'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var motionUtils = require('motion-utils');
/**
* The frameloop's state, kept apart from the frameloop itself so that
* reading it doesn't bundle the scheduler.
*/
const frameData = {
delta: 0.0,
timestamp: 0.0,
isProcessing: false,
};
let now;
function clearTime() {
now = undefined;
}
/**
* An eventloop-synchronous alternative to performance.now().
*
* Ensures that time measurements remain consistent within a synchronous context.
* Usually calling performance.now() twice within the same synchronous context
* will return different values which isn't useful for animations when we're usually
* trying to sync animations to the same frame.
*/
const time = {
now: () => {
if (now === undefined) {
time.set(frameData.isProcessing || motionUtils.MotionGlobalConfig.useManualTiming
? frameData.timestamp
: performance.now());
}
return now;
},
set: (newTime) => {
now = newTime;
queueMicrotask(clearTime);
},
};
// If this number is a decimal, make it just five decimal places
// to avoid exponents
const sanitize = (v) => Math.round(v * 100000) / 100000;
const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
const isCSSVariableName =
/*@__PURE__*/ checkStringStartsWith("--");
const startsAsVariableToken =
/*@__PURE__*/ checkStringStartsWith("var(--");
const isCSSVariableToken = (value) => {
const startsWithToken = startsAsVariableToken(value);
if (!startsWithToken)
return false;
// Ensure any comments are stripped from the value as this can harm performance of the regex.
return singleCssVariableRegex.test(value.split("/*")[0].trim());
};
const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
/**
* Check if a value contains a CSS variable anywhere (e.g. inside calc()).
* Unlike isCSSVariableToken which checks if the value IS a var() token,
* this checks if the value CONTAINS var() somewhere in the string.
*/
function containsCSSVariable(value) {
if (typeof value !== "string")
return false;
// Strip comments to avoid false positives
return value.split("/*")[0].includes("var(--");
}
const number = {
test: (v) => typeof v === "number",
parse: parseFloat,
transform: (v) => v,
};
const alpha = {
...number,
transform: (v) => motionUtils.clamp(0, 1, v),
};
const scale = {
...number,
default: 1,
};
const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
function isNullish(v) {
return v == null;
}
const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
/**
* Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
* but false if a number or multiple colors
*/
const isColorString = (type, testProp) => (v) => {
return Boolean((typeof v === "string" &&
singleColorRegex.test(v) &&
v.startsWith(type)) ||
(testProp &&
!isNullish(v) &&
Object.prototype.hasOwnProperty.call(v, testProp)));
};
const splitColor = (aName, bName, cName) => (v) => {
if (typeof v !== "string")
return v;
const [a, b, c, alpha] = v.match(floatRegex);
return {
[aName]: parseFloat(a),
[bName]: parseFloat(b),
[cName]: parseFloat(c),
alpha: alpha !== undefined ? parseFloat(alpha) : 1,
};
};
const clampRgbUnit = (v) => motionUtils.clamp(0, 255, v);
const rgbUnit = {
...number,
transform: (v) => Math.round(clampRgbUnit(v)),
};
const rgba = {
test: /*@__PURE__*/ isColorString("rgb", "red"),
parse: /*@__PURE__*/ splitColor("red", "green", "blue"),
transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" +
rgbUnit.transform(red) +
", " +
rgbUnit.transform(green) +
", " +
rgbUnit.transform(blue) +
", " +
sanitize(alpha.transform(alpha$1)) +
")",
};
function parseHex(v) {
let r = "";
let g = "";
let b = "";
let a = "";
// If we have 6 characters, ie #FF0000
if (v.length > 5) {
r = v.substring(1, 3);
g = v.substring(3, 5);
b = v.substring(5, 7);
a = v.substring(7, 9);
// Or we have 3 characters, ie #F00
}
else {
r = v.substring(1, 2);
g = v.substring(2, 3);
b = v.substring(3, 4);
a = v.substring(4, 5);
r += r;
g += g;
b += b;
a += a;
}
return {
red: parseInt(r, 16),
green: parseInt(g, 16),
blue: parseInt(b, 16),
alpha: a ? parseInt(a, 16) / 255 : 1,
};
}
const hex = {
test: /*@__PURE__*/ isColorString("#"),
parse: parseHex,
transform: rgba.transform,
};
/*#__NO_SIDE_EFFECTS__*/
const createUnitType = (unit) => ({
test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
parse: parseFloat,
transform: (v) => `${v}${unit}`,
});
const degrees = /*@__PURE__*/ createUnitType("deg");
const percent = /*@__PURE__*/ createUnitType("%");
const px = /*@__PURE__*/ createUnitType("px");
const vh = /*@__PURE__*/ createUnitType("vh");
const vw = /*@__PURE__*/ createUnitType("vw");
const progressPercentage = /*@__PURE__*/ (() => ({
...percent,
parse: (v) => percent.parse(v) / 100,
transform: (v) => percent.transform(v * 100),
}))();
const hsla = {
test: /*@__PURE__*/ isColorString("hsl", "hue"),
parse: /*@__PURE__*/ splitColor("hue", "saturation", "lightness"),
transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
return ("hsla(" +
Math.round(hue) +
", " +
percent.transform(sanitize(saturation)) +
", " +
percent.transform(sanitize(lightness)) +
", " +
sanitize(alpha.transform(alpha$1)) +
")");
},
};
const color = {
test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
parse: (v) => {
if (rgba.test(v)) {
return rgba.parse(v);
}
else if (hsla.test(v)) {
return hsla.parse(v);
}
else {
return hex.parse(v);
}
},
transform: (v) => {
return typeof v === "string"
? v
: v.hasOwnProperty("red")
? rgba.transform(v)
: hsla.transform(v);
},
getAnimatableNone: (v) => {
const parsed = color.parse(v);
parsed.alpha = 0;
return color.transform(parsed);
},
};
const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
/**
* Non-global copies of the token regexes so test() can use .test()
* (no match array, stops at the first token) without lastIndex state.
*/
const hasFloat = /*@__PURE__*/ new RegExp(floatRegex.source);
const hasColor = /*@__PURE__*/ new RegExp(colorRegex.source, "i");
function test(v) {
return (isNaN(v) &&
typeof v === "string" &&
(hasFloat.test(v) || hasColor.test(v)));
}
const NUMBER_TOKEN = "number";
const COLOR_TOKEN = "color";
const VAR_TOKEN = "var";
const VAR_FUNCTION_TOKEN = "var(";
const SPLIT_TOKEN = "${}";
// this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex`.
// The lookahead skips digits in function names, like the 3 in matrix3d(.
const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)(?![a-z]*\()/giu;
/**
* Whether analyseComplexValue(value) would find any values, without
* tokenising the string. CSS variables are resolved before this is
* used, so it's enough to look for a number or a color.
*/
function hasComplexValues(value) {
const asString = value.toString();
return hasFloat.test(asString) || hasColor.test(asString);
}
function analyseComplexValue(value) {
const originalValue = value.toString();
const values = [];
const indexes = {
color: [],
number: [],
var: [],
};
const types = [];
let i = 0;
const tokenised = originalValue.replace(complexRegex, (parsedValue) => {
if (color.test(parsedValue)) {
indexes.color.push(i);
types.push(COLOR_TOKEN);
values.push(color.parse(parsedValue));
}
else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) {
indexes.var.push(i);
types.push(VAR_TOKEN);
values.push(parsedValue);
}
else {
indexes.number.push(i);
types.push(NUMBER_TOKEN);
values.push(parseFloat(parsedValue));
}
++i;
return SPLIT_TOKEN;
});
const split = tokenised.split(SPLIT_TOKEN);
return { values, split, indexes, types };
}
function parseComplexValue(v) {
return analyseComplexValue(v).values;
}
function buildTransformer({ split, types }) {
const numSections = split.length;
return (v) => {
let output = "";
for (let i = 0; i < numSections; i++) {
output += split[i];
if (v[i] !== undefined) {
const type = types[i];
if (type === NUMBER_TOKEN) {
output += sanitize(v[i]);
}
else if (type === COLOR_TOKEN) {
output += color.transform(v[i]);
}
else {
output += v[i];
}
}
}
return output;
};
}
function createTransformer(source) {
return buildTransformer(analyseComplexValue(source));
}
const convertNumbersToZero = (v) => typeof v === "number" ? 0 : color.test(v) ? color.getAnimatableNone(v) : v;
/**
* Convert a parsed value to its zero equivalent, but preserve numbers
* that act as divisors in CSS calc() expressions.
*
* analyseComplexValue extracts numbers from CSS strings and puts the
* surrounding text into a `split` template array. For example:
* "calc(var(--gap) / 5)" → values: [var(--gap), 5]
* split: ["calc(", " / ", ")"]
*
* When building a zero-equivalent for animation, naively zeroing all
* numbers turns the divisor into 0 → "calc(var(--gap) / 0)" → NaN.
* We detect this by checking whether the text preceding a number
* (split[i]) ends with "/" — the CSS calc division operator.
*/
const convertToZero = (value, splitBefore) => {
if (typeof value === "number") {
return splitBefore?.trim().endsWith("/") ? value : 0;
}
return convertNumbersToZero(value);
};
function getAnimatableNone$1(v) {
const info = analyseComplexValue(v);
const transformer = buildTransformer(info);
return transformer(info.values.map((value, i) => convertToZero(value, info.split[i])));
}
const complex = {
test,
parse: parseComplexValue,
createTransformer,
getAnimatableNone: getAnimatableNone$1,
};
// Adapted from https://gist.github.com/mjackson/5311256
function hueToRgb(p, q, t) {
if (t < 0)
t += 1;
if (t > 1)
t -= 1;
if (t < 1 / 6)
return p + (q - p) * 6 * t;
if (t < 1 / 2)
return q;
if (t < 2 / 3)
return p + (q - p) * (2 / 3 - t) * 6;
return p;
}
function hslaToRgba({ hue, saturation, lightness, alpha }) {
hue /= 360;
saturation /= 100;
lightness /= 100;
let red = 0;
let green = 0;
let blue = 0;
if (!saturation) {
red = green = blue = lightness;
}
else {
const q = lightness < 0.5
? lightness * (1 + saturation)
: lightness + saturation - lightness * saturation;
const p = 2 * lightness - q;
red = hueToRgb(p, q, hue + 1 / 3);
green = hueToRgb(p, q, hue);
blue = hueToRgb(p, q, hue - 1 / 3);
}
return {
red: Math.round(red * 255),
green: Math.round(green * 255),
blue: Math.round(blue * 255),
alpha,
};
}
function mixImmediate(a, b) {
return (p) => (p > 0 ? b : a);
}
/*
Value in range from progress
Given a lower limit and an upper limit, we return the value within
that range as expressed by progress (usually a number from 0 to 1)
So progress = 0.5 would change
from -------- to
to
from ---- to
E.g. from = 10, to = 20, progress = 0.5 => 15
@param [number]: Lower limit of range
@param [number]: Upper limit of range
@param [number]: The progress between lower and upper limits expressed 0-1
@return [number]: Value as calculated from progress within range (not limited within range)
*/
const mixNumber$1 = (from, to, progress) => {
return from + (to - from) * progress;
};
// Linear color space blending
// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
// Demonstrated http://codepen.io/osublake/pen/xGVVaN
const mixLinearColor = (from, to, v) => {
const fromExpo = from * from;
const expo = v * (to * to - fromExpo) + fromExpo;
return expo < 0 ? 0 : Math.sqrt(expo);
};
const colorTypes = [hex, rgba, hsla];
const getColorType = (v) => colorTypes.find((type) => type.test(v));
function asRGBA(color) {
const type = getColorType(color);
if (!type) {
motionUtils.warning(false, `'${color}' is not an animatable color. Use the equivalent color code instead.`, "color-not-animatable");
return false;
}
let model = type.parse(color);
if (type === hsla) {
// TODO Remove this cast - needed since Motion's stricter typing
model = hslaToRgba(model);
}
return model;
}
const mixColor = (from, to) => {
const fromRGBA = asRGBA(from);
const toRGBA = asRGBA(to);
if (!fromRGBA || !toRGBA) {
return mixImmediate(from, to);
}
const blended = { ...fromRGBA };
return (v) => {
blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
blended.alpha = mixNumber$1(fromRGBA.alpha, toRGBA.alpha, v);
return rgba.transform(blended);
};
};
const invisibleValues = new Set(["none", "hidden"]);
/**
* Returns a function that, when provided a progress value between 0 and 1,
* will return the "none" or "hidden" string only when the progress is that of
* the origin or target.
*/
function mixVisibility(origin, target) {
if (invisibleValues.has(origin)) {
return (p) => (p <= 0 ? origin : target);
}
else {
return (p) => (p >= 1 ? target : origin);
}
}
function mixNumber(a, b) {
return (p) => mixNumber$1(a, b, p);
}
function getMixer(a) {
if (typeof a === "number") {
return mixNumber;
}
else if (typeof a === "string") {
return isCSSVariableToken(a)
? mixImmediate
: color.test(a)
? mixColor
: mixComplex;
}
else if (Array.isArray(a)) {
return mixArray;
}
else if (typeof a === "object") {
return color.test(a) ? mixColor : mixObject;
}
return mixImmediate;
}
function mixArray(a, b) {
const output = [...a];
const numValues = output.length;
const blendValue = a.map((v, i) => getMixer(v)(v, b[i]));
return (p) => {
for (let i = 0; i < numValues; i++) {
output[i] = blendValue[i](p);
}
return output;
};
}
function mixObject(a, b) {
const output = { ...a, ...b };
const blendValue = {};
for (const key in output) {
if (a[key] !== undefined && b[key] !== undefined) {
blendValue[key] = getMixer(a[key])(a[key], b[key]);
}
}
return (v) => {
for (const key in blendValue) {
output[key] = blendValue[key](v);
}
return output;
};
}
function matchOrder(origin, target) {
const orderedOrigin = [];
const pointers = { color: 0, var: 0, number: 0 };
for (let i = 0; i < target.values.length; i++) {
const type = target.types[i];
const originIndex = origin.indexes[type][pointers[type]];
const originValue = origin.values[originIndex] ?? 0;
orderedOrigin[i] = originValue;
pointers[type]++;
}
return orderedOrigin;
}
const mixComplex = (origin, target) => {
const template = complex.createTransformer(target);
const originStats = analyseComplexValue(origin);
const targetStats = analyseComplexValue(target);
const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length &&
originStats.indexes.color.length === targetStats.indexes.color.length &&
originStats.indexes.number.length >= targetStats.indexes.number.length;
if (canInterpolate) {
if ((invisibleValues.has(origin) &&
!targetStats.values.length) ||
(invisibleValues.has(target) &&
!originStats.values.length)) {
return mixVisibility(origin, target);
}
return motionUtils.pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
}
else {
motionUtils.warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`, "complex-values-different");
return mixImmediate(origin, target);
}
};
/**
* A single number with an optional unit, e.g. "50%", "-10px", ".5em".
* Exponents don't match, so they fall through to the complex mixer.
*/
const unitValue = /^(-?(?:\d+(?:\.\d*)?|\.\d+))([a-z%]*)$/iu;
/**
* Most CSS values Motion mixes are a single number with a unit. Mixing
* these directly produces the same output as the complex mixer
* ("25%", "0.33333px") without tokenising both strings.
*/
function mixUnit(from, to) {
const a = unitValue.exec(from);
if (!a)
return;
const b = unitValue.exec(to);
if (!b || a[2] !== b[2])
return;
const unit = a[2];
const origin = parseFloat(a[1]);
const target = parseFloat(b[1]);
return (p) => sanitize(mixNumber$1(origin, target, p)) + unit;
}
function mix(from, to, p) {
if (typeof from === "number" &&
typeof to === "number" &&
typeof p === "number") {
return mixNumber$1(from, to, p);
}
if (typeof from === "string" && typeof to === "string") {
const mixer = mixUnit(from, to);
if (mixer)
return mixer;
}
const mixer = getMixer(from);
return mixer(from, to);
}
const stepsOrder = [
"setup", // Compute
"read", // Read
"resolveKeyframes", // Write/Read/Write/Read
"preUpdate", // Compute
"update", // Compute
"preRender", // Compute
"render", // Write
"postRender", // Compute
];
function createRenderStep(runNextFrame) {
/**
* We create and reuse two queues, one to queue jobs for the current frame
* and one for the next. We reuse to avoid triggering GC after x frames.
*/
let thisFrame = new Set();
let nextFrame = new Set();
/**
* Track whether we're currently processing jobs in this step. This way
* we can decide whether to schedule new jobs for this frame or next.
*/
let isProcessing = false;
let flushNextFrame = false;
/**
* A set of processes which were marked keepAlive when scheduled.
* A keepAlive process is always also held by a frame queue until
* it's cancelled, so a Set has the same lifetime semantics as a
* WeakSet here while being considerably faster to query every frame.
*/
const toKeepAlive = new Set();
let latestFrameData = {
delta: 0.0,
timestamp: 0.0,
isProcessing: false,
};
function triggerCallback(callback) {
if (toKeepAlive.has(callback)) {
nextFrame.add(callback);
runNextFrame();
}
callback(latestFrameData);
}
const step = {
/**
* Schedule a process to run on the next frame.
*/
schedule: (callback, keepAlive = false, immediate = false) => {
const addToCurrentFrame = immediate && isProcessing;
const queue = addToCurrentFrame ? thisFrame : nextFrame;
if (keepAlive)
toKeepAlive.add(callback);
queue.add(callback);
return callback;
},
/**
* Cancel the provided callback from running on the next frame.
*/
cancel: (callback) => {
nextFrame.delete(callback);
toKeepAlive.delete(callback);
},
/**
* Execute all schedule callbacks.
*/
process: (frameData) => {
latestFrameData = frameData;
/**
* If we're already processing we've probably been triggered by a flushSync
* inside an existing process. Instead of executing, mark flushNextFrame
* as true and ensure we flush the following frame at the end of this one.
*/
if (isProcessing) {
flushNextFrame = true;
return;
}
isProcessing = true;
// Swap this frame and the next to avoid GC
const prevFrame = thisFrame;
thisFrame = nextFrame;
nextFrame = prevFrame;
// Execute this frame
thisFrame.forEach(triggerCallback);
// Clear the frame so no callbacks remain. This is to avoid
// memory leaks should this render step not run for a while.
thisFrame.clear();
isProcessing = false;
if (flushNextFrame) {
flushNextFrame = false;
step.process(frameData);
}
},
};
return step;
}
const maxElapsed = 40;
function createRenderBatcher(scheduleNextBatch, allowKeepAlive, state = {
delta: 0.0,
timestamp: 0.0,
isProcessing: false,
}) {
let runNextFrame = false;
let useDefaultElapsed = true;
const flagRunNextFrame = () => (runNextFrame = true);
const steps = stepsOrder.reduce((acc, key) => {
acc[key] = createRenderStep(flagRunNextFrame);
return acc;
}, {});
const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps;
const processBatch = () => {
const useManualTiming = motionUtils.MotionGlobalConfig.useManualTiming;
const timestamp = useManualTiming
? state.timestamp
: performance.now();
runNextFrame = false;
if (!useManualTiming) {
state.delta = useDefaultElapsed
? 1000 / 60
: Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
}
state.timestamp = timestamp;
state.isProcessing = true;
// Unrolled render loop for better per-frame performance
setup.process(state);
read.process(state);
resolveKeyframes.process(state);
preUpdate.process(state);
update.process(state);
preRender.process(state);
render.process(state);
postRender.process(state);
state.isProcessing = false;
if (runNextFrame && allowKeepAlive) {
useDefaultElapsed = false;
scheduleNextBatch(processBatch);
}
};
const wake = () => {
runNextFrame = true;
useDefaultElapsed = true;
if (!state.isProcessing) {
scheduleNextBatch(processBatch);
}
};
const schedule = stepsOrder.reduce((acc, key) => {
const step = steps[key];
acc[key] = (process, keepAlive = false, immediate = false) => {
if (!runNextFrame)
wake();
return step.schedule(process, keepAlive, immediate);
};
return acc;
}, {});
const cancel = (process) => {
for (let i = 0; i < stepsOrder.length; i++) {
steps[stepsOrder[i]].cancel(process);
}
};
return { schedule, cancel, state, steps };
}
const { schedule: frame, cancel: cancelFrame, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : motionUtils.noop, true, frameData);
const frameloopDriver = (update) => {
const passTimestamp = ({ timestamp }) => update(timestamp);
return {
start: (keepAlive = true) => frame.update(passTimestamp, keepAlive),
stop: () => cancelFrame(passTimestamp),
/**
* If we're processing this frame we can use the
* framelocked timestamp to keep things in sync.
*/
now: () => (frameData.isProcessing ? frameData.timestamp : time.now()),
};
};
const generateLinearEasing = (easing, duration, // as milliseconds
resolution = 10 // as milliseconds
) => {
let points = "";
const numPoints = Math.max(Math.round(duration / resolution), 2);
for (let i = 0; i < numPoints; i++) {
points += Math.round(easing(i / (numPoints - 1)) * 10000) / 10000 + ", ";
}
return `linear(${points.substring(0, points.length - 2)})`;
};
/**
* Implement a practical max duration for keyframe generation
* to prevent infinite loops
*/
const maxGeneratorDuration = 20000;
function calcGeneratorDuration(generator, timeStep = 50, maxDuration = maxGeneratorDuration, keyframes) {
let duration = 0;
let state = generator.next(duration);
keyframes?.push(state.value);
while (!state.done && duration < maxDuration) {
duration += timeStep;
state = generator.next(duration);
keyframes?.push(state.value);
}
return duration >= maxDuration ? Infinity : duration;
}
/**
* Create a progress => progress easing function from a generator.
*/
function createGeneratorEasing(options, scale = 100, createGenerator) {
/**
* The easing is generated over 0 - scale, but velocity is in the
* value's own units, so scale it to match. Otherwise an interrupted
* spring hands off the wrong speed, or direction. Keyframes with
* units (colours, filters, mixed units) give NaN, which is falsy,
* so their velocity passes through unscaled.
*/
const { keyframes: k, velocity: v } = options;
const delta = k && k[k.length - 1] - k[0];
const generator = createGenerator({
...options,
velocity: v && delta ? (v * scale) / delta : v,
keyframes: [0, scale],
});
const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
return {
type: "keyframes",
ease: (progress) => {
return generator.next(duration * progress).value / scale;
},
duration: motionUtils.millisecondsToSeconds(duration),
};
}
const springDefaults = {
// Default spring physics
stiffness: 100,
damping: 10,
mass: 1.0,
// Default duration/bounce-based options
duration: 800, // in ms
bounce: 0.3,
visualDuration: 0.3, // in seconds
// Rest thresholds
restSpeed: {
granular: 0.01,
default: 2,
},
restDelta: {
granular: 0.005,
default: 0.5,
},
// Limits
minDuration: 0.01, // in seconds
maxDuration: 10.0, // in seconds
minDamping: 0.05,
};
/**
* Maps bounce to a damping ratio as SwiftUI does: 0 is critically damped, and
* it approaches undamped towards 1 and infinitely overdamped towards -1. Both
* ends are limited so the spring still moves and settles.
*/
const bounceToDampingRatio = (bounce) => bounce < 0
? 1 / Math.max(1 + bounce, springDefaults.minDamping)
: Math.max(1 - bounce, springDefaults.minDamping);
/**
* Scales an overdamped spring's undamped frequency so that, at its defining
* time, it has as far left to go as the critically damped spring that's
* criticalFreqTime radians in by then. A negative bounce then changes the
* shape of the curve, not when it arrives. 1 at a damping ratio of 1, so
* there's no jump at a bounce of 0.
*
* Solved by Newton on the remaining distance (times fast - slow), which is
* convex from criticalFreqTime onwards. criticalFreqTime is always below the
* answer, so it converges from below without overshooting.
*/
function overdampedFreqScale(dampingRatio, criticalFreqTime) {
if (!(dampingRatio > 1))
return 1;
const root = Math.sqrt(dampingRatio * dampingRatio - 1);
const slow = dampingRatio - root;
const fast = dampingRatio + root;
const target = 2 * root * Math.exp(-criticalFreqTime) * (1 + criticalFreqTime);
return (approximateRoot((freqTime) => fast * Math.exp(-slow * freqTime) -
slow * Math.exp(-fast * freqTime) -
target, (freqTime) => Math.exp(-fast * freqTime) - Math.exp(-slow * freqTime), criticalFreqTime) / criticalFreqTime);
}
function calcAngularFreq(undampedFreq, dampingRatio) {
return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
}
const rootIterations = 12;
function approximateRoot(envelope, derivative, initialGuess) {
let result = initialGuess;
for (let i = 1; i < rootIterations; i++) {
result = result - envelope(result) / derivative(result);
}
return result;
}
/**
* This is ported from the Framer implementation of duration-based spring resolution.
*/
const safeMin = 0.001;
/**
* Assumes zero initial velocity and the default mass: time-defined springs
* ignore inherited velocity and only resolve without valid physics. Returns
* NaN physics when the root search doesn't converge.
*/
function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, }) {
let envelope;
let derivative;
motionUtils.warning(duration <= motionUtils.secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
const dampingRatio = bounceToDampingRatio(bounce);
duration = motionUtils.clamp(springDefaults.minDuration, springDefaults.maxDuration, motionUtils.millisecondsToSeconds(duration));
if (dampingRatio < 1) {
/**
* Underdamped spring
*/
envelope = (undampedFreq) => {
const exponentialDecay = undampedFreq * dampingRatio;
const delta = exponentialDecay * duration;
const b = calcAngularFreq(undampedFreq, dampingRatio);
const c = Math.exp(-delta);
return safeMin - (exponentialDecay / b) * c;
};
derivative = (undampedFreq) => {
const exponentialDecay = undampedFreq * dampingRatio;
const delta = exponentialDecay * duration;
const e = dampingRatio *
dampingRatio *
undampedFreq *
undampedFreq *
duration;
const f = Math.exp(-delta);
const g = calcAngularFreq(undampedFreq * undampedFreq, dampingRatio);
const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;
return (factor * -e * f) / g;
};
}
else {
/**
* Critically-damped spring. Overdamped springs reuse this root,
* scaled below.
*/
envelope = (undampedFreq) => {
const a = Math.exp(-undampedFreq * duration);
const b = undampedFreq * duration + 1;
return -safeMin + a * b;
};
derivative = (undampedFreq) => {
const a = Math.exp(-undampedFreq * duration);
const b = -undampedFreq * (duration * duration);
return a * b;
};
}
const initialGuess = 5 / duration;
const criticalFreq = approximateRoot(envelope, derivative, initialGuess);
const undampedFreq = criticalFreq *
overdampedFreqScale(dampingRatio, criticalFreq * duration);
const stiffness = undampedFreq * undampedFreq;
return {
stiffness,
damping: dampingRatio * 2 * Math.sqrt(stiffness),
duration: motionUtils.secondsToMilliseconds(duration),
};
}
/**
* Spring physics must be finite. stiffness and mass are also divisors so must
* be positive, whereas a damping of 0 is a valid, perpetually oscillating
* spring. Relational rather than Number.isFinite so numeric strings still
* coerce.
*/
const isValidPhysics = (value, canBeZero) => (canBeZero ? value >= 0 : value > 0) && value < Infinity;
/**
* Returns value if it's usable spring physics, otherwise undefined so callers
* fall back to the default. An explicit `undefined`, e.g. from a forwarded
* optional prop, must fall back too. Invalid physics would otherwise resolve
* to NaN spring values that never report done.
*/
function resolvePhysics(value, canBeZero) {
if (isValidPhysics(value, canBeZero))
return value;
if (process.env.NODE_ENV !== "production") {
motionUtils.warning(value === undefined, "Spring stiffness and mass must be positive, damping 0 or greater", "spring-invalid-physics");
}
return undefined;
}
function getSpringOptions(options) {
/**
* Resolve physics before choosing between physics- and duration-based
* resolution, so an invalid stiffness doesn't also silently discard a
* valid duration/bounce.
*/
const validStiffness = resolvePhysics(options.stiffness);
const validDamping = resolvePhysics(options.damping, true);
const validMass = resolvePhysics(options.mass);
const springOptions = {
...options,
stiffness: validStiffness ?? springDefaults.stiffness,
damping: validDamping ?? springDefaults.damping,
mass: validMass ?? springDefaults.mass,
isResolvedFromDuration: false,
// stiffness/damping/mass overrides duration/bounce
isTimeDefined: (validStiffness ?? validDamping ?? validMass) === undefined &&
(options.duration !== undefined || options.bounce !== undefined),
};
if (springOptions.isTimeDefined) {
if (options.visualDuration) {
const dampingRatio = bounceToDampingRatio(options.bounce || 0);
const root = ((2 * Math.PI) / (options.visualDuration * 1.2)) *
overdampedFreqScale(dampingRatio, (2 * Math.PI) / 1.2);
springOptions.stiffness = root * root;
springOptions.damping =
2 * dampingRatio * Math.sqrt(springOptions.stiffness);
}
else {
Object.assign(springOptions, findSpring(springOptions));
springOptions.isResolvedFromDuration = true;
}
/**
* Time options can degenerate: a NaN bounce gives a NaN damping, an
* infinite visualDuration a 0 stiffness, and findSpring NaN for both
* when it doesn't converge. Replace the two together, so the
* relationship duration resolution establishes between them is never
* left half-overwritten.
*/
if (!isValidPhysics(springOptions.stiffness) ||
!isValidPhysics(springOptions.damping, true)) {
springOptions.stiffness = springDefaults.stiffness;
springOptions.damping = springDefaults.damping;
}
}
return springOptions;
}
function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
const options = typeof optionsOrVisualDuration !== "object"
? {
visualDuration: optionsOrVisualDuration,
keyframes: [0, 1],
bounce,
}
: optionsOrVisualDuration;
const origin = options.keyframes[0];
const target = options.keyframes[options.keyframes.length - 1];
/**
* This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
* to reduce GC during animation.
*/
const state = { done: false, value: origin };
const { stiffness, damping, mass, duration, isResolvedFromDuration, isTimeDefined, } = getSpringOptions({ ...options });
/**
* Time-defined springs ignore inherited velocity. Velocity from
* interrupted animations causes massive oscillation on small-range
* animations.
*/
const inheritVelocity = (velocity) => isTimeDefined ? 0 : -motionUtils.millisecondsToSeconds(velocity);
const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
const undampedAngularFreq = motionUtils.millisecondsToSeconds(Math.sqrt(stiffness / mass));
const decay = dampingRatio * undampedAngularFreq;
/**
* Everything that changes when the spring is retargeted: written by
* retarget() and update(), read by the resolvers. Grouped on one object,
* like the coefficients (c) below. Writing doubles to object fields
* measured marginally faster than to captured let variables in optimised
* code; neither allocates, so this is a grouping choice, not a GC one.
*/
const s = {
target,
delta: target - origin,
velocity: inheritVelocity(options.velocity || 0) || 0,
restSpeed: 0,
restDelta: 0,
};
/**
* If we're working on a granular scale, use smaller defaults for determining
* when the spring is finished.
*
* These defaults have been selected empirically based on what strikes a good
* ratio between feeling good and finishing as soon as changes are imperceptible.
*/
const setRestThresholds = () => {
const isGranularScale = Math.abs(s.delta) < 5;
s.restSpeed =
options.restSpeed ||
(isGranularScale
? springDefaults.restSpeed.granular
: springDefaults.restSpeed.default);
s.restDelta =
options.restDelta ||
(isGranularScale
? springDefaults.restDelta.granular
: springDefaults.restDelta.default);
};
setRestThresholds();
let resolveSpring;
let resolveVelocity;
/**
* Derives the coefficients that depend on origin, target and initial
* velocity. Called once now and again whenever the spring is retargeted.
*/
let update;
if (dampingRatio < 1) {
const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
/**
* A is the position coefficient, sinC/cosC the coefficients of the
* analytical derivative (px/ms). The exp/sin/cos terms depend only
* on t, so they're memoized by t independently of the target: a
* spring retargeted every frame samples the same t each frame and
* skips the transcendentals entirely.
*/
const c = { A: 0, sinC: 0, cosC: 0, t: -1, env: 0, sin: 0, cos: 0 };
update = () => {
c.A = (s.velocity + decay * s.delta) / angularFreq;
c.sinC = decay * c.A + s.delta * angularFreq;
c.cosC = decay * s.delta - c.A * angularFreq;
};
const sample = (t) => {
if (t !== c.t) {
c.t = t;
c.env = Math.exp(-decay * t);
c.sin = Math.sin(angularFreq * t);
c.cos = Math.cos(angularFreq * t);
}
};
// Underdamped spring
resolveSpring = (t) => {
sample(t);
return s.target - c.env * (c.A * c.sin + s.delta * c.cos);
};
resolveVelocity = (t) => {
sample(t);
return c.env * (c.sinC * c.sin + c.cosC * c.cos);
};
}
else if (dampingRatio === 1) {
// Critically damped spring
resolveSpring = (t) => s.target -
Math.exp(-undampedAngularFreq * t) *
(s.delta + (s.velocity + undampedAngularFreq * s.delta) * t);
// Analytical derivative of critically damped spring (px/ms)
const c = { C: 0 };
update = () => {
c.C = s.velocity + undampedAngularFreq * s.delta;
};
resolveVelocity = (t) => Math.exp(-undampedAngularFreq * t) *
(undampedAngularFreq * c.C * t - s.velocity);
}
else {
/**
* Overdamped spring: the sum of a slow and a fast decaying
* exponential, so no term can overflow however heavily it's damped.
*/
const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
const slow = decay - dampedAngularFreq;
const fast = decay + dampedAngularFreq;
/**
* Physics-defined springs keep a non-physical limit: once
* dampedAngularFreq * t passes 300, both terms decay at the damping
* rate. Heavily overdamped drag springs (dragElastic: 0,
* dragTransition) rely on this to settle almost at once rather than
* creep at stiffness / damping. Negative bounce needs the exact
* curve, so time-defined springs are exempt.
*/
const limit = isTimeDefined ? Infinity : 300 / dampedAngularFreq;
const decayAt = (rate, t) => Math.exp(t > limit ? -rate * limit - decay * (t - limit) : -rate * t);
const c = { S: 0, F: 0 };
update = () => {
const P = (s.velocity + decay * s.delta) / dampedAngularFreq;
c.S = (s.delta + P) / 2;
c.F = (s.delta - P) / 2;
};
resolveSpring = (t) => s.target - c.S * decayAt(slow, t) - c.F * decayAt(fast, t);
// Analytical derivative of overdamped spring (px/ms)
resolveVelocity = (t) => slow * c.S * decayAt(slow, t) + fast * c.F * decayAt(fast, t);
}
update();
const calculatedDuration = isResolvedFromDuration ? duration || null : null;
const generator = {
calculatedDuration,
/**
* Aim the spring at a new target from its current position and
* velocity, reusing the resolved physics and closures.
*/
retarget: (keyframes, newVelocity) => {
s.target = keyframes[keyframes.length - 1];
s.delta = s.target - keyframes[0];
s.velocity = inheritVelocity(newVelocity);
// Default thresholds depend on the scale of the new delta
if (!(options.restSpeed && options.restDelta))
setRestThresholds();
// Invalidate any duration lazily cached by JSAnimation
generator.calculatedDuration = calculatedDuration;
state.done = false;
update();
},
velocity: (t) => motionUtils.secondsToMilliseconds(resolveVelocity(t)),
next: (t) => {
const current = resolveSpring(t);
if (!isResolvedFromDuration) {
const currentVelocity = motionUtils.secondsToMilliseconds(resolveVelocity(t));
state.done =
Math.abs(currentVelocity) <= s.restSpeed &&
Math.abs(s.target - current) <= s.restDelta;
}
else {
state.done = t >= duration;
}
state.value = state.done ? s.target : current;
return state;
},
toString: () => {
const easingDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
const easing = generateLinearEasing((progress) => generator.next(easingDuration * progress).value, easingDuration, 30);
return easingDuration + "ms " + easing;
},
toTransition: () => { },
};
return generator;
}
spring.applyToOptions = (options) => {
const generatorOptions = createGeneratorEasing(options, 100, spring);
options.ease = generatorOptions.ease;
options.duration = motionUtils.secondsToMilliseconds(generatorOptions.duration);
options.type = "keyframes";
return options;
};
function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
const origin = keyframes[0];
const state = {
done: false,
value: origin,
};
const isOutOfBounds = (v) => v < min || v > max;
const nearestBoundary = (v) => {
if (min === undefined)
return max;
if (max === undefined)
return min;
return Math.abs(min - v) < Math.abs(max - v) ? min : max;
};
let amplitude = power * velocity;
const ideal = origin + amplitude;
const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
/**
* If the target has changed we need to re-calculate the amplitude, otherwise
* the animation will start from the wrong position.
*/
if (target !== ideal)
amplitude = target - origin;
const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);
const applyFriction = (t) => {
const delta = calcDelta(t);
state.done = Math.abs(delta) <= restDelta;
state.value = state.done ? target : target + delta;
};
/**
* Ideally this would resolve for t in a stateless way, we could
* do that by always precalculating the animation but as we know
* this will be done anyway we can assume that spring will
* be discovered during that.
*/
let timeReachedBoundary;
let spring$1;
const checkCatchBoundary = (t) => {
if (!isOutOfBounds(state.value))
return;
timeReachedBoundary = t;
spring$1 = spring({
keyframes: [state.value, nearestBoundary(state.value)],
/**
* The friction curve is target + calcDelta(t), so its exact
* derivative is -calcDelta(t) / timeConstant in units/ms,
* converted here to the units/second expected by spring.
*/
velocity: (-calcDelta(t) / timeConstant) * 1000,
damping: bounceDamping,
stiffness: bounceStiffness,
restDelta,
restSpeed,
});
};
checkCatchBoundary(0);
return {
calculatedDuration: null,
next: (t) => {
/**
* We need to resolve the friction to figure out if we need a
* spring but we don't want to do this twice per frame. So here
* we flag if we updated for this frame and later if we did
* we can skip doing it again.
*/
let hasUpdatedFrame = false;
if (!spring$1 && timeReachedBoundary === undefined) {
hasUpdatedFrame = true;
applyFriction(t);
checkCatchBoundary(t);
}
/**
* If we have a spring and the provided t is beyond the moment the friction
* animation crossed the min/max boundary, use the spring.
*/
if (timeReachedBoundary !== undefined && t >= timeReachedBoundary) {
return spring$1.next(t - timeReachedBoundary);
}
else {
!hasUpdatedFrame && applyFriction(t);
return state;
}
},
};
}
function createMixers(output, ease, customMixer) {
const mixers = [];
const mixerFactory = customMixer || motionUtils.MotionGlobalConfig.mix || mix;
const numMixers = output.length - 1;
for (let i = 0; i < numMixers; i++) {
let mixer = mixerFactory(output[i], output[i + 1]);
if (ease) {
const easingFunction = Array.isArray(ease) ? ease[i] || motionUtils.noop : ease;
mixer = motionUtils.pipe(easingFunction, mixer);
}
mixers.push(mixer);
}
return mixers;
}
/**
* Create a function that maps from a numerical input array to a generic output array.
*
* Accepts:
* - Numbers
* - Colors (hex, hsl, hsla, rgb, rgba)
* - Complex (combinations of one or more numbers or strings)
*
* ```jsx
* const mixColor = interpolate([0, 1], ['#fff', '#000'])
*
* mixColor(0.5) // 'rgba(128, 128, 128, 1)'
* ```
*
* TODO Revisit this approach once we've moved to data models for values,
* probably not needed to pregenerate mixer functions.
*
* @public
*/
function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
const inputLength = input.length;
motionUtils.invariant(inputLength === output.length, "Both input and output ranges must be the same length", "range-length");
/**
* If we're only provided a single input, we can just make a function
* that returns the output.
*/
if (inputLength === 1)
return () => output[0];
if (inputLength === 2 && output[0] === output[1])
return () => output[1];
const isZeroDeltaRange = input[0] === input[1];
// If input runs highest -> lowest, reverse both arrays
if (input[0] > input[inputLength - 1]) {
input = [...input].reverse();
output = [...output].reverse();
}
const mixers = createMixers(output, ease, mixer);
const numMixers = mixers.length;
const interpolator = (v) => {
if (isZeroDeltaRange && v < input[0])
return output[0];
let i = 0;
if (numMixers > 1) {
for (; i < input.length - 2; i++) {
if (v < input[i + 1])
break;
}
}
const progressInRange = motionUtils.progress(input[i], input[i + 1], v);
return mixers[i](progressInRange);
};
return isClamp
? (v) => interpolator(motionUtils.clamp(input[0], input[inputLength - 1], v))
: interpolator;
}
function fillOffset(offset, remaining) {
const min = offset[offset.length - 1];
for (let i = 1; i <= remaining; i++) {
const offsetProgress = motionUtils.progress(0, remaining, i);
offset.push(mixNumber$1(min, 1, offsetProgress));
}
}
function defaultOffset(arr) {
const offset = [0];
fillOffset(offset, arr.length - 1);
return offset;
}
function convertOffsetToTimes(offset, duration) {
return offset.map((o) => o * duration);
}
function defaultEasing(values, easing) {
return values.map(() => easing || motionUtils.easeInOut).splice(0, values.length - 1);
}
function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) {
/**
* Easing functions can be externally defined as strings. Here we convert them
* into actual functions.
*/
const easingFunctions = motionUtils.isEasingArray(ease)
? ease.map(motionUtils.easingDefinitionToFunction)
: motionUtils.easingDefinitionToFunction(ease) || motionUtils.easeInOut;
/**
* This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
* to reduce GC during animation.
*/
const state = {
done: false,
value: keyframeValues[0],
};
/**
* Fast setup path for two keyframes one easing.
*/
if (keyframeValues.length === 2 &&
!Array.isArray(easingFunctions) &&
(!times ||
times.length !== 2 ||
(times[0] === 0 && times[1] === 1))) {
const [origin, target] = keyframeValues;
const mixer = origin === target
? undefined
: (motionUtils.MotionGlobalConfig.mix || mix)(origin, target);
return {
calculatedDuration: duration,
next: (t) => {
state.value = mixer
? mixer(easingFunctions(duration > 0 ? motionUtils.clamp(0, 1, t / duration) : 1))
: target;
state.done = t >= duration;
return state;
},
};
}
/**
* Create a times array based on the provided 0-1 offsets
*/
const absoluteTimes = convertOffsetToTimes(
// Only use the provided offsets if they're the correct length
// TODO Maybe we should warn here if there's a length mismatch
times && times.length === keyframeValues.length
? times
: defaultOffset(keyframeValues), duration);
const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {
ease: Array.isArray(easingFunctions)
? easingFunctions
: defaultEasing(keyframeValues, easingFunctions),
});
return {
calculatedDuration: duration,
next: (t) => {
state.value = mapTimeToKeyframe(t);
state.done = t >= duration;
return state;
},
};
}
const velocitySampleDuration = 5; // ms
function getGeneratorVelocity(resolveValue, t, current) {
const prevT = Math.max(t - velocitySampleDuration, 0);
return motionUtils.velocityPerSecond(current - resolveValue(prevT), t - prevT);
}
/**
* A generator's velocity at time t in units/second: analytical where the
* generator provides it (springs), otherwise by finite difference. Before
* the animation has started this is its initial velocity.
*/
function calcGeneratorVelocity(generator, t, initialVelocity = 0) {
if (t <= 0)
return initialVelocity;
return generator.velocity
? generator.velocity(t)
: getGeneratorVelocity((s) => generator.next(s).value, t, generator.next(t).value);
}
const isNotNull = (value) => value !== null;
function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) {
const resolvedKeyframes = keyframes.filter(isNotNull);
const useFirstKeyframe = speed < 0 || (repeat && repeatType !== "loop" && repeat % 2 === 1);
const index = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1;
return !index || finalKeyframe === undefined
? resolvedKeyframes[index]
: finalKeyframe;
}
const transitionTypeMap = {
decay: inertia,
inertia,
tween: keyframes,
keyframes: keyframes,
spring,
};
function replaceTransitionType(transition) {
if (typeof transition.type === "string") {
transition.type = transitionTypeMap[transition.type];
}
}
/**
* If an animation's keyframes resolve, or its first frame renders, more than
* this long after its start time, it starts from then instead. While we prefer
* to "start" an animation as soon as it's triggered, this avoids a visual jump
* into it after main thread work.
*
* Manual timing steps frames by however long it likes, so never lags.
*/
const MAX_START_DELAY = 40;
const resolveStartTime = (startTime, now) => now - startTime > MAX_START_DELAY && !motionUtils.MotionGlobalConfig.useManualTiming
? now
: startTime;
function baseRecord(kind, animation) {
return {
kind,
animation,
timestamp: time.now(),
frameTimestamp: frameData.timestamp,
frameIsProcessing: frameData.isProcessing,
};
}
/**
* Notify an optional inspector without adding a public Motion API.
*
* The record is a raw firehose: the live animation handle, the concrete
* animation's internal options object untouched (timing fields in
* internal milliseconds, name/keyframes/element/motionValue still
* attached), a timestamp and the raw frameloop state at notify time.
* All interpretation belongs to the consumer behind
* globalThis.__MOTION_INSPECT__.
*/
function notifyAnimationStart(animation, options, transition) {
const notify = globalThis.__MOTION_INSPECT__;
if (!notify)
return;
try {
notify({
...baseRecord("animation-start", animation),
options: transition ? { ...options, ...transition } : options,
});
}
catch { }
}
/**
* Layout animations drive a projection node's progress rather than a
* property, so the record forwards the live node itself: it carries the
* DOM instance, the layout options (layoutId) and the progress handle.
* Fired inside the frame.update that starts the animation, so nodes
* animating in the same layout commit share frameTimestamp.
*/
function notifyLayoutAnimationStart(animation, node) {
const notify = globalThis.__MOTION_INSPECT__;
if (!notify)
return;
try {
notify({
...baseRecord("layout-animation-start", animation),
node,
});
}
catch { }
}
class WithPromise {
constructor() {
this.isResolved = false;
}
get finished() {
if (!this._finished) {
this._finished = this.isResolved
? Promise.resolve()
: new Promise((resolve) => {
this._resolve = resolve;
});
}
return this._finished;
}
updateFinished() {
this._finished = this._resolve = undefined;
this.isResolved = false;
}
notifyFinished() {
this.isResolved = true;
this._resolve?.();
}
/**
* Allows the animation to be awaited.
*
* @deprecated Use `finished` instead.
*/
then(onResolve, onReject) {
return this.finished.then(onResolve, onReject);
}
}
const percentToProgress = (percent) => percent / 100;
const round = (value) => Math.round(value * 10000) / 10000;
class JSAnimation extends WithPromise {
constructor(options) {
super();
this.state = "idle";
this.startTime = null;
this.isStopped = false;
/**
* The current time of the animation.
*/
this.currentTime = 0;
/**
* The time at which the animation was paused.
*/
this.holdTime = null;
/**
* Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.
*/
this.playbackSpeed = 1;
/**
* Reusable state object for the delay phase to avoid
* allocating a new object every frame.
*/
this.delayState = {
done: false,
value: undefined,
};
/**
* This method is bound to the instance to fix a pattern where
* animation.stop is returned as a reference from a useEffect.
*/
this.stop = () => {
const { motionValue } = this.options;
if (motionValue && motionValue.updatedAt !== time.now()) {
this.tick(time.now());
}
this.isStopped = true;
if (this.state === "idle")
return;
this.teardown();
this.options.onStop?.();
};
this.options = options;
this.initAnimation();
this.play();
if (options.autoplay === false)
this.pause();
notifyAnimationStart(this, this.options);
}
initAnimation() {
const { options } = this;
replaceTransitionType(options);
const { type = keyframes, repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = options;
let { keyframes: keyframes$1 } = options;
const generatorFactory = type || keyframes;
if (process.env.NODE_ENV !== "production" &&
generatorFactory !== keyframes) {
motionUtils.invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`, "spring-two-frames");
}
if (generatorFactory !== keyframes &&
typeof keyframes$1[0] !== "number") {
this.mixKeyframes = motionUtils.pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
keyframes$1 = [0, 100];
}
const generator = generatorFactory(keyframes$1 === options.keyframes
? options
: { ...options, keyframes: keyframes$1 });
/**
* If we have a mirror repeat type we need to create a second generator that outputs the
* mirrored (not reversed) animation and later ping pong between the two generators.
*/
if (repeatType === "mirror") {
this.mirroredGenerator = generatorFactory({
...options,
keyframes: [...keyframes$1].reverse(),
velocity: -velocity,
});
}
/**
* If duration is undefined and we have repeat options,
* we need to calculate a duration from the generator.
*
* We set it to the generator itself to cache the duration.
* Any timeline resolver will need to have already precalculated
* the duration by this step.
*/
if (generator.calculatedDuration === null) {
generator.calculatedDuration = calcGeneratorDuration(generator);
}
const { calculatedDuration } = generator;
this.calculatedDuration = calculatedDuration;
this.resolvedDuration = calculatedDuration + repeatDelay;
this.totalDuration = this.resolvedDuration * (repeat + 1) - repeatDelay;
this.generator = generator;
}
updateTime(timestamp) {
const animationTime = Math.round(timestamp - this.startTime) * this.playbackSpeed;
// Update currentTime
if (this.holdTime !== null) {
this.currentTime = this.holdTime;
}
else {
// Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =
// 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for
// example.
this.currentTime = animationTime;
}
}
tick(timestamp, sample = false) {
const { generator, totalDuration, calculatedDuration } = this;
if (this.startTime === null)
return generator.next(0);
const { delay = 0, keyframes, type, onUpdate, finalKeyframe, } = this.options;
if (this.startTime === this.pendingStartTime) {
this.startTime = resolveStartTime(this.startTime, timestamp);
}
this.pendingStartTime = undefined;
/**
* requestAnimationFrame timestamps can come through as lower than
* the startTime as set by performance.now(). Here we prevent this,
* though in the future it could be possible to make setting startTime
* a pending operation that gets resolved here.
*/
if (this.speed > 0) {
this.startTime = Math.min(this.startTime, timestamp);
}
else if (this.speed < 0) {
this.startTime = Math.min(timestamp - totalDuration / this.speed, this.startTime);
}
if (sample) {
this.currentTime = timestamp;
}
else {
this.updateTime(timestamp);
}
// Rebase on delay
const timeWithoutDelay = this.currentTime - delay * (this.playbackSpeed >= 0 ? 1 : -1);
const isInDelayPhase = this.playbackSpeed >= 0
? timeWithoutDelay < 0
: timeWithoutDelay > totalDuration;
this.currentTime = Math.max(timeWithoutDelay, 0);
// If this animation has finished, set the current time to the total duration.
if (this.state === "finished" && this.holdTime === null) {
this.currentTime = totalDuration;
}
const state = this.generate(this.currentTime, isInDelayPhase);
let { done } = state;
if (!isInDelayPhase && calculatedDuration !== null) {
done =
this.playbackSpeed >= 0
? this.currentTime >= totalDuration
: this.currentTime <= 0;
}
const isAnimationFinished = this.holdTime === null &&
(this.state === "finished" || (this.state === "running" && done));
// TODO: The exception for inertia could be cleaner here
if (isAnimationFinished && type !== inertia) {
state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
}
if (onUpdate) {
onUpdate(state.value);
}
if (isAnimationFinished) {
this.finish();
}
return state;
}
/**
* This animation's time, including delay, at a timestamp.
*/
at(timestamp) {
return (this.holdTime ??
round((timestamp - this.startTime) * this.playbackSpeed));
}
/**
* The value at a timestamp, without changing this animation's state.
* If resolved, it ends at the last resolved keyframe, which is in the
* same unit as the others, rather than at finalKeyframe.
*/
sampleAt(timestamp, resolved) {
const { options, totalDuration } = this;
const t = this.at(timestamp) - (options.delay || 0);
return t >= totalDuration && options.type !== inertia
? getFinalKeyframe(options.keyframes, options, resolved ? undefined : options.finalKeyframe)
: this.generate(Math.max(t, 0), t < 0).value;
}
/**
* The generator's state `currentTime` ms after the delay, without
* changing the animation's own state.
*/
generate(currentTime, isInDelayPhase) {
const { generator, totalDuration, mixKeyframes, mirroredGenerator, resolvedDuration, } = this;
const { keyframes, repeat, repeatType, repeatDelay } = this.options;
let elapsed = currentTime;
let frameGenerator = generator;
if (repeat) {
/**
* Get the current progress (0-1) of the animation. If t is >
* than duration we'll get values like 2.5 (midway through the
* third iteration)
*/
const progress = Math.min(currentTime, totalDuration) / resolvedDuration;
/**
* Get the current iteration (0 indexed). For instance the floor of
* 2.5 is 2.
*/
let currentIteration = Math.floor(progress);
/**
* Get the current progress of the iteration by taking the remainder
* so 2.5 is 0.5 through iteration 2
*/
let iterationProgress = progress % 1.0;
/**
* If iteration progress is 1 we count that as the end
* of the previous iteration.
*/
if (!iterationProgress && progress >= 1) {
iterationProgress = 1;
}
iterationProgress === 1 && currentIteration--;
currentIteration = Math.min(currentIteration, repeat + 1);
/**
* Reverse progress if we're not running in "normal" direction
*/
const isOddIteration = Boolean(currentIteration % 2);
if (isOddIteration) {
if (repeatType === "reverse") {
iterationProgress = 1 - iterationProgress;
if (repeatDelay) {
iterationProgress -= repeatDelay / resolvedDuration;
}
}
else if (repeatType === "mirror") {
frameGenerator = mirroredGenerator;
}
}
elapsed = motionUtils.clamp(0, 1, iterationProgress) * resolvedDuration;
}
/**
* If we're in negative time, set state as the initial keyframe.
* This prevents delay: x, duration: 0 animations from finishing
* instantly.
*/
let state;
if (isInDelayPhase) {
this.delayState.value = keyframes[0];
state = this.delayState;
}
else {
state = frameGenerator.next(elapsed);
}
if (mixKeyframes && !isInDelayPhase) {
state.value = mixKeyframes(state.value);
}
return state;
}
/**
* Allows the returned animation to be awaited or promise-chained. Currently
* resolves when the animation finishes at all but in a future update could/should
* reject if its cancels.
*/
then(resolve, reject) {
return this.finished.then(resolve, reject);
}
get duration() {
return motionUtils.millisecondsToSeconds(this.calculatedDuration);
}
get iterationDuration() {
const { delay = 0 } = this.options || {};
return this.duration + motionUtils.millisecondsToSeconds(delay);
}
get time() {
return motionUtils.millisecondsToSeconds(this.currentTime);
}
set time(newTime) {
newTime = motionUtils.secondsToMilliseconds(newTime);
this.currentTime = newTime;
if (this.startTime === null ||
this.holdTime !== null ||
this.playbackSpeed === 0) {
this.holdTime = newTime;
}
else if (this.driver) {
this.startTime = this.driver.now() - newTime / this.playbackSpeed;
}
if (this.driver) {
this.driver.start(false);
}
else {
this.startTime = 0;
this.state = "paused";
this.holdTime = newTime;
this.tick(newTime);
}
}
/**
* Returns the generator's velocity at the current time in units/second.
* Uses the analytical derivative when available (springs), avoiding
* the MotionValue's frame-dependent velocity estimation.
*/
getGeneratorVelocity() {
return calcGeneratorVelocity(this.generator, this.currentTime, this.options.velocity);
}
get speed() {
return this.playbackSpeed;
}
set speed(newSpeed) {
const hasChanged = this.playbackSpeed !== newSpeed;
if (hasChanged && this.driver) {
this.updateTime(time.now());
}
this.playbackSpeed = newSpeed;
if (hasChanged && this.driver) {
this.time = motionUtils.millisecondsToSeconds(this.currentTime);
}
}
play() {
if (this.isStopped)
return;
const { driver = frameloopDriver, startTime } = this.options;
if (!this.driver) {
this.driver = driver((timestamp) => this.tick(timestamp));
}
this.options.onPlay?.();
const now = this.driver.now();
if (this.state === "finished") {
this.updateFinished();
this.startTime = now;
}
else if (this.holdTime !== null) {
this.startTime = now - this.holdTime / (this.playbackSpeed || 1);
}
else if (!this.startTime) {
this.startTime = startTime ?? (this.pendingStartTime = now);
}
if (this.state === "finished" && this.speed < 0) {
this.startTime += this.calculatedDuration;
}
this.holdTime = null;
/**
* Set playState to running only after we've used it in
* the previous logic.
*/
this.state = "running";
this.driver.start();
}
pause() {
this.state = "paused";
this.updateTime(time.now());
this.holdTime = this.currentTime;
}
complete() {
if (this.state !== "running") {
this.play();
}
this.state = "finished";
this.holdTime = null;
}
finish() {
this.notifyFinished();
this.teardown();
this.state = "finished";
this.options.onComplete?.();
}
cancel() {
this.holdTime = null;
this.startTime = 0;
this.tick(0);
this.teardown();
this.options.onCancel?.();
}
teardown() {
this.state = "idle";
this.stopDriver();
this.startTime = this.holdTime = null;
}
stopDriver() {
if (!this.driver)
return;
this.driver.stop();
this.driver = undefined;
}
sample(sampleTime) {
this.startTime = 0;
return this.tick(sampleTime, true);
}
attachTimeline(timeline) {
if (this.options.allowFlatten) {
this.options.type = "keyframes";
this.options.ease = "linear";
this.initAnimation();
}
this.driver?.stop();
return timeline.observe(this);
}
}
// Legacy function support
function animateValue(options) {
return new JSAnimation(options);
}
/**
* Properties that should default to 1 or 100%
*/
const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
function applyDefaultFilter(v) {
const [name, value] = v.slice(0, -1).split("(");
if (name === "drop-shadow")
return v;
const [number] = value.match(floatRegex) || [];
if (!number)
return v;
const unit = value.replace(number, "");
let defaultValue = maxDefaults.has(name) ? 1 : 0;
if (number !== value)
defaultValue *= 100;
return name + "(" + defaultValue + unit + ")";
}
const functionRegex = /\b([a-z-]*)\(.*?\)/gu;
const filter = {
...complex,
getAnimatableNone: (v) => {
const functions = v.match(functionRegex);
return functions ? functions.map(applyDefaultFilter).join(" ") : v;
},
};
const mask = {
...complex,
getAnimatableNone: (v) => {
const parsed = complex.parse(v);
const transformer = complex.createTransformer(v);
return transformer(parsed.map((v) => typeof v === "number" ? 0 : typeof v === "object" ? { ...v, alpha: 1 } : v));
},
};
const int = {
...number,
transform: Math.round,
};
const transformValueTypes = {
rotate: degrees,
/**
* Internal channel for `transition.path` orientToPath. Composed onto
* `rotate` at the transform-build sites so the user's `rotate` is
* never read or overwritten. Not part of `transformPropOrder`.
*/
pathRotation: degrees,
rotateX: degrees,
rotateY: degrees,
rotateZ: degrees,
scale,
scaleX: scale,
scaleY: scale,
scaleZ: scale,
skew: degrees,
skewX: degrees,
skewY: degrees,
distance: px,
translateX: px,
translateY: px,
translateZ: px,
x: px,
y: px,
z: px,
perspective: px,
transformPerspective: px,
opacity: alpha,
originX: progressPercentage,
originY: progressPercentage,
originZ: px,
};
const numberValueTypes = {
// Border props
borderWidth: px,
borderTopWidth: px,
borderRightWidth: px,
borderBottomWidth: px,
borderLeftWidth: px,
borderRadius: px,
borderTopLeftRadius: px,
borderTopRightRadius: px,
borderBottomRightRadius: px,
borderBottomLeftRadius: px,
// Positioning props
width: px,
maxWidth: px,
height: px,
maxHeight: px,
top: px,
right: px,
bottom: px,
left: px,
inset: px,
insetBlock: px,
insetBlockStart: px,
insetBlockEnd: px,
insetInline: px,
insetInlineStart: px,
insetInlineEnd: px,
// Spacing props
padding: px,
paddingTop: px,
paddingRight: px,
paddingBottom: px,
paddingLeft: px,
paddingBlock: px,
paddingBlockStart: px,
paddingBlockEnd: px,
paddingInline: px,
paddingInlineStart: px,
paddingInlineEnd: px,
margin: px,
marginTop: px,
marginRight: px,
marginBottom: px,
marginLeft: px,
marginBlock: px,
marginBlockStart: px,
marginBlockEnd: px,
marginInline: px,
marginInlineStart: px,
marginInlineEnd: px,
// Typography
fontSize: px,
// Misc
backgroundPositionX: px,
backgroundPositionY: px,
...transformValueTypes,
zIndex: int,
// SVG
fillOpacity: alpha,
strokeOpacity: alpha,
numOctaves: int,
};
/**
* A map of default value types for common values
*/
const defaultValueTypes = {
...numberValueTypes,
// Color props
color,
backgroundColor: color,
outlineColor: color,
fill: color,
stroke: color,
// Border props
borderColor: color,
borderTopColor: color,
borderRightColor: color,
borderBottomColor: color,
borderLeftColor: color,
filter,
WebkitFilter: filter,
mask,
WebkitMask: mask,
};
/**
* Gets the default ValueType for the provided value key
*/
const getDefaultValueType = (key) => defaultValueTypes[key];
const customTypes = /*@__PURE__*/ new Set([filter, mask]);
function getAnimatableNone(key, value) {
let defaultValueType = getDefaultValueType(key);
if (!customTypes.has(defaultValueType))
defaultValueType = complex;
// If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
return defaultValueType.getAnimatableNone
? defaultValueType.getAnimatableNone(value)
: undefined;
}
function fillWildcards(keyframes) {
for (let i = 1; i < keyframes.length; i++) {
keyframes[i] ?? (keyframes[i] = keyframes[i - 1]);
}
}
const radToDeg = (rad) => (rad * 180) / Math.PI;
const rotate = (v) => {
const angle = radToDeg(Math.atan2(v[1], v[0]));
return rebaseAngle(angle);
};
const matrix2dParsers = {
x: 4,
y: 5,
translateX: 4,
translateY: 5,
scaleX: 0,
scaleY: 3,
scaleZ: () => 1,
scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
rotate,
rotateZ: rotate,
skewX: (v) => radToDeg(Math.atan(v[1])),
skewY: (v) => radToDeg(Math.atan(v[2])),
skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2,
};
const rebaseAngle = (angle) => {
angle = angle % 360;
if (angle < 0)
angle += 360;
return angle;
};
const rotateZ = rotate;
const scaleX = (v) => Math.hypot(v[0], v[1]);
const scaleY = (v) => Math.hypot(v[4], v[5]);
const matrix3dParsers = {
x: 12,
y: 13,
z: 14,
translateX: 12,
translateY: 13,
translateZ: 14,
scaleX,
scaleY,
scaleZ: (v) => Math.hypot(v[8], v[9], v[10]),
scale: (v) => (scaleX(v) + scaleY(v)) / 2,
rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
rotateZ,
rotate: rotateZ,
skewX: (v) => radToDeg(Math.atan(v[4])),
skewY: (v) => radToDeg(Math.atan(v[1])),
skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2,
};
function defaultTransformValue(name) {
return name.includes("scale") ? 1 : 0;
}
function parseValueFromTransform(transform, name) {
if (!transform || transform === "none") {
return defaultTransformValue(name);
}
const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
let parsers;
let match;
if (matrix3dMatch) {
parsers = matrix3dParsers;
match = matrix3dMatch;
}
else {
const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u);
parsers = matrix2dParsers;
match = matrix2dMatch;
}
if (!match) {
return defaultTransformValue(name);
}
const valueParser = parsers[name];
const values = match[1].split(",").map(convertTransformToNumber);
return typeof valueParser === "function"
? valueParser(values)
: values[valueParser];
}
const readTransformValue = (instance, name) => {
const { transform = "none" } = getComputedStyle(instance);
return parseValueFromTransform(transform, name);
};
function convertTransformToNumber(value) {
return parseFloat(value.trim());
}
/**
* Generate a list of every possible transform key.
*/
const transformPropOrder = [
"transformPerspective",
"x",
"y",
"z",
"translateX",
"translateY",
"translateZ",
"scale",
"scaleX",
"scaleY",
"scaleZ",
"rotate",
"rotateX",
"rotateY",
"rotateZ",
"skew",
"skewX",
"skewY",
];
/**
* A quick lookup for transform props.
*
* `pathRotation` is a transform for routing purposes (skipped from raw
* style application, wired to the transform composite, flags transform
* dirty) but is intentionally NOT in `transformPropOrder` — it is
* composed onto `rotate` at the build sites, not serialized in its own
* slot, and must stay out of the order-array consumers (parse-transform,
* unit-conversion, keys-position).
*/
const transformProps = /*@__PURE__*/ (() => new Set([...transformPropOrder, "pathRotation"]))();
const isNumOrPxType = (v) => v === number || v === px;
const transformKeys = new Set(["x", "y", "z"]);
const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
/**
* Reset any bounding box-changing transforms so the element can be
* measured. Returns the values to restore. Values already at their
* default don't change the box, so they're left alone: an element with
* only `rotate: 0` doesn't need to be re-rendered before measuring.
*/
function removeNonTranslationalTransform(visualElement) {
const removedTransforms = [];
nonTranslationalTransformKeys.forEach((key) => {
const value = visualElement.getValue(key);
if (value !== undefined) {
const current = value.get();
const reset = key.startsWith("scale") ? 1 : 0;
if (current === reset)
return;
removedTransforms.push([key, current]);
value.set(reset);
}
});
return removedTransforms;
}
/**
* Values that can only be measured from the bounding box. Elements with
* these values need bounding box-changing transforms removed first.
*/
const boxDependentValues = new Set(["bottom", "right"]);
/**
* Computed width/height is already in pixels and unaffected by
* transforms. It's "auto" for elements without a layout box (e.g. inline),
* in which case we fall back to measuring the bounding box.
*/
function measureDimension(computed, measureBox, axis, paddingStart, paddingEnd, boxSizing) {
const px = parseFloat(computed);
if (!isNaN(px))
return px;
const { min, max } = measureBox()[axis];
const size = max - min;
return boxSizing === "border-box"
? size
: size - parseFloat(paddingStart) - parseFloat(paddingEnd);
}
const positionalValues = {
// Dimensions
width: ({ width, paddingLeft = "0", paddingRight = "0", boxSizing }, measureBox) => measureDimension(width, measureBox, "x", paddingLeft, paddingRight, boxSizing),
height: ({ height, paddingTop = "0", paddingBottom = "0", boxSizing }, measureBox) => measureDimension(height, measureBox, "y", paddingTop, paddingBottom, boxSizing),
top: ({ top }) => parseFloat(top),
left: ({ left }) => parseFloat(left),
bottom: ({ top }, measureBox) => {
const { y } = measureBox();
return parseFloat(top) + (y.max - y.min);
},
right: ({ left }, measureBox) => {
const { x } = measureBox();
return parseFloat(left) + (x.max - x.min);
},
// Transform
x: ({ transform }) => parseValueFromTransform(transform, "x"),
y: ({ transform }) => parseValueFromTransform(transform, "y"),
};
// Alias translate longform names
positionalValues.translateX = positionalValues.x;
positionalValues.translateY = positionalValues.y;
const toResolve = new Set();
let isScheduled = false;
let anyNeedsMeasurement = false;
let isForced = false;
function measureAllKeyframes() {
if (anyNeedsMeasurement) {
const resolversToMeasure = [];
const elementsToMeasure = new Set();
const elementsToUntransform = new Set();
toResolve.forEach((resolver) => {
if (!resolver.needsMeasurement)
return;
resolversToMeasure.push(resolver);
elementsToMeasure.add(resolver.element);
if (boxDependentValues.has(resolver.name)) {
elementsToUntransform.add(resolver.element);
}
});
const transformsToRestore = new Map();
/**
* Write pass
* Values measured from the bounding box need bounding box-changing
* transforms removed first. Values read from computed style don't.
*/
elementsToUntransform.forEach((element) => {
const removedTransforms = removeNonTranslationalTransform(element);
if (!removedTransforms.length)
return;
transformsToRestore.set(element, removedTransforms);
element.render();
});
// Read
resolversToMeasure.forEach((resolver) => resolver.measureInitialState());
// Write
elementsToMeasure.forEach((element) => {
element.render();
const restore = transformsToRestore.get(element);
if (restore) {
restore.forEach(([key, value]) => {
element.getValue(key)?.set(value);
});
}
});
// Read
resolversToMeasure.forEach((resolver) => resolver.measureEndState());
// Write
resolversToMeasure.forEach((resolver) => {
if (resolver.suspendedScrollY !== undefined) {
window.scrollTo(0, resolver.suspendedScrollY);
}
});
}
anyNeedsMeasurement = false;
isScheduled = false;
toResolve.forEach((resolver) => resolver.complete(isForced));
toResolve.clear();
}
function readAllKeyframes() {
toResolve.forEach((resolver) => {
resolver.readKeyframes();
if (resolver.needsMeasurement) {
anyNeedsMeasurement = true;
}
});
}
function flushKeyframeResolvers() {
isForced = true;
readAllKeyframes();
measureAllKeyframes();
isForced = false;
}
/**
* Normalise a value read from the subject into an animation origin: a
* number read as a string ("0", "200") becomes a number, and a value
* that isn't animatable (e.g. "none") but whose target is becomes an
* animatable zero in the shape of the target.
*/
function readOrigin(value, name, target) {
if (typeof value === "string") {
if (motionUtils.isNumericalString(value) || motionUtils.isZeroValueString(value)) {
return parseFloat(value);
}
else if (!complex.test(value) && complex.test(target)) {
return getAnimatableNone(name, target);
}
}
return value ?? undefined;
}
class KeyframeResolver {
constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) {
this.state = "pending";
/**
* Track whether this resolver is async. If it is, it'll be added to the
* resolver queue and flushed in the next frame. Resolvers that aren't going
* to trigger read/write thrashing don't need to be async.
*/
this.isAsync = false;
/**
* Track whether this resolver needs to perform a measurement
* to resolve its keyframes.
*/
this.needsMeasurement = false;
this.unresolvedKeyframes = [...unresolvedKeyframes];
this.onComplete = onComplete;
this.name = name;
this.motionValue = motionValue;
this.element = element;
this.isAsync = isAsync;
}
scheduleResolve() {
this.state = "scheduled";
if (this.isAsync) {
toResolve.add(this);
if (!isScheduled) {
isScheduled = true;
frame.read(readAllKeyframes);
frame.resolveKeyframes(measureAllKeyframes);
}
}
else {
this.readKeyframes();
this.complete();
}
}
readKeyframes() {
const { unresolvedKeyframes, name, element, motionValue } = this;
// If initial keyframe is null we need to read it from the DOM
if (unresolvedKeyframes[0] === null) {
const currentValue = motionValue?.get();
// TODO: This doesn't work if the final keyframe is a wildcard
const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
if (currentValue !== undefined) {
unresolvedKeyframes[0] = currentValue;
}
else if (element && name) {
const valueAsRead = readOrigin(element.readValue(name, finalKeyframe), name, finalKeyframe);
if (valueAsRead !== undefined) {
unresolvedKeyframes[0] = valueAsRead;
}
}
if (unresolvedKeyframes[0] === undefined) {
unresolvedKeyframes[0] = finalKeyframe;
}
if (motionValue && currentValue === undefined) {
motionValue.set(unresolvedKeyframes[0]);
}
}
fillWildcards(unresolvedKeyframes);
}
setFinalKeyframe() { }
measureInitialState() { }
renderEndStyles() { }
measureEndState() { }
complete(isForcedComplete = false) {
this.state = "complete";
this.onComplete(this.unresolvedKeyframes, this.finalKeyframe, isForcedComplete);
toResolve.delete(this);
}
cancel() {
if (this.state === "scheduled") {
toResolve.delete(this);
this.state = "pending";
}
}
resume() {
if (this.state === "pending")
this.scheduleResolve();
}
}
const isCSSVar = (name) => name.startsWith("--");
function setStyle(element, name, value) {
isCSSVar(name)
? element.style.setProperty(name, value)
: (element.style[name] = value);
}
/**
* Add the ability for test suites to manually set support flags
* to better test more environments.
*/
const supportsFlags = {};
function memoSupports(callback, supportsFlag) {
const memoized = motionUtils.memo(callback);
return () => supportsFlags[supportsFlag] ?? memoized();
}
const supportsScrollTimeline = /* @__PURE__ */ memoSupports(() => window.ScrollTimeline !== undefined, "scrollTimeline");
const supportsViewTimeline = /* @__PURE__ */ memoSupports(() => window.ViewTimeline !== undefined, "viewTimeline");
const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
try {
document
.createElement("div")
.animate({ opacity: 0 }, { easing: "linear(0, 1)" });
}
catch (e) {
return false;
}
return true;
}, "linearEasing");
const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
const supportedWaapiEasing = {
linear: "linear",
ease: "ease",
easeIn: "ease-in",
easeOut: "ease-out",
easeInOut: "ease-in-out",
circIn: /*@__PURE__*/ cubicBezierAsString([0, 0.65, 0.55, 1]),
circOut: /*@__PURE__*/ cubicBezierAsString([0.55, 0, 1, 0.45]),
backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
};
function mapEasingToNativeEasing(easing, duration) {
if (!easing) {
return undefined;
}
else if (typeof easing === "function") {
return supportsLinearEasing()
? generateLinearEasing(easing, duration)
: "ease-out";
}
else if (motionUtils.isBezierDefinition(easing)) {
return cubicBezierAsString(easing);
}
else if (Array.isArray(easing)) {
return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) ||
supportedWaapiEasing.easeOut);
}
else {
return supportedWaapiEasing[easing];
}
}
function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeOut", times, } = {}, pseudoElement = undefined) {
const keyframeOptions = {
[valueName]: keyframes,
};
if (times)
keyframeOptions.offset = times;
const easing = mapEasingToNativeEasing(ease, duration);
/**
* If this is an easing array, apply to keyframes, not animation as a whole
*/
if (Array.isArray(easing))
keyframeOptions.easing = easing;
const options = {
delay,
duration,
easing: !Array.isArray(easing) ? easing : "linear",
fill: "both",
iterations: repeat + 1,
direction: repeatType === "reverse" ? "alternate" : "normal",
};
if (pseudoElement)
options.pseudoElement = pseudoElement;
return element.animate(keyframeOptions, options);
}
function isGenerator(type) {
return typeof type === "function" && "applyToOptions" in type;
}
function applyGeneratorOptions({ type, ...options }) {
if (isGenerator(type) && supportsLinearEasing()) {
return type.applyToOptions(options);
}
else {
options.duration ?? (options.duration = 300);
options.ease ?? (options.ease = "easeOut");
}
return options;
}
/**
* NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.
*/
class NativeAnimation extends WithPromise {
constructor(options) {
super();
this.finishedTime = null;
this.isStopped = false;
/**
* Tracks a manually-set start time that takes precedence over WAAPI's
* dynamic startTime. This is cleared when play() or time setter is called,
* allowing WAAPI to take over timing.
*/
this.manualStartTime = null;
if (!options)
return;
const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
this.isPseudoElement = Boolean(pseudoElement);
this.allowFlatten = allowFlatten;
this.options = options;
motionUtils.invariant(typeof options.type !== "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring");
const transition = applyGeneratorOptions(options);
this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
if (transition.autoplay === false) {
this.animation.pause();
}
this.animation.onfinish = () => {
this.finishedTime = this.time;
if (!pseudoElement) {
const keyframe = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
if (this.updateMotionValue) {
this.updateMotionValue(keyframe);
}
/**
* If we can, we want to commit the final style as set by the user,
* rather than the computed keyframe value supplied by the animation.
* We always do this, even when a motion value is present, to prevent
* a visual flash in Firefox where the WAAPI animation's fill is removed
* during cancel() before the scheduled render can apply the correct value.
*/
setStyle(element, name, keyframe);
this.animation.cancel();
}
onComplete?.();
this.notifyFinished();
};
notifyAnimationStart(this, options, transition);
}
play() {
if (this.isStopped)
return;
this.manualStartTime = null;
this.animation.play();
if (this.state === "finished") {
this.updateFinished();
}
}
pause() {
this.animation.pause();
}
complete() {
this.animation.finish?.();
}
cancel() {
try {
this.animation.cancel();
}
catch (e) { }
}
stop() {
if (this.isStopped)
return;
this.isStopped = true;
const { state } = this;
if (state === "idle" || state === "finished") {
return;
}
if (this.updateMotionValue) {
this.updateMotionValue();
}
else {
this.commitStyles();
}
if (!this.isPseudoElement)
this.cancel();
}
/**
* WAAPI doesn't natively have any interruption capabilities.
*
* In this method, we commit styles back to the DOM before cancelling
* the animation.
*
* This is designed to be overridden by NativeAnimationExtended, which
* will create a renderless JS animation and sample it twice to calculate
* its current value, "previous" value, and therefore allow
* Motion to also correctly calculate velocity for any subsequent animation
* while deferring the commit until the next animation frame.
*/
commitStyles() {
const element = this.options?.element;
if (!this.isPseudoElement && element?.isConnected) {
this.animation.commitStyles?.();
}
}
get duration() {
const duration = this.animation.effect?.getComputedTiming?.().duration || 0;
return motionUtils.millisecondsToSeconds(Number(duration));
}
get iterationDuration() {
const { delay = 0 } = this.options || {};
return this.duration + motionUtils.millisecondsToSeconds(delay);
}
get time() {
return motionUtils.millisecondsToSeconds(Number(this.animation.currentTime) || 0);
}
set time(newTime) {
const wasFinished = this.finishedTime !== null;
this.manualStartTime = null;
this.finishedTime = null;
this.animation.currentTime = motionUtils.secondsToMilliseconds(newTime);
if (wasFinished) {
this.animation.pause();
}
}
/**
* The playback speed of the animation.
* 1 = normal speed, 2 = double speed, 0.5 = half speed.
*/
get speed() {
return this.animation.playbackRate;
}
set speed(newSpeed) {
// Allow backwards playback after finishing
if (newSpeed < 0)
this.finishedTime = null;
this.animation.playbackRate = newSpeed;
}
get state() {
return this.finishedTime !== null
? "finished"
: this.animation.playState;
}
get startTime() {
return this.manualStartTime ?? Number(this.animation.startTime);
}
set startTime(newStartTime) {
this.manualStartTime = this.animation.startTime = newStartTime;
}
/**
* Attaches a timeline to the animation, for instance the `ScrollTimeline`.
*/
attachTimeline({ timeline, onAttach, observe, }) {
if (this.allowFlatten) {
this.animation.effect?.updateTiming({ easing: "linear" });
}
this.animation.onfinish = null;
if (timeline && supportsScrollTimeline()) {
this.animation.timeline = timeline;
onAttach?.(this.animation);
return motionUtils.noop;
}
else {
return observe(this);
}
}
}
const unsupportedEasingFunctions = {
anticipate: motionUtils.anticipate,
backInOut: motionUtils.backInOut,
circInOut: motionUtils.circInOut,
};
function isUnsupportedEase(key) {
return key in unsupportedEasingFunctions;
}
function replaceStringEasing(transition) {
if (typeof transition.ease === "string" &&
isUnsupportedEase(transition.ease)) {
transition.ease = unsupportedEasingFunctions[transition.ease];
}
}
/**
* 10ms is chosen here as it strikes a balance between smooth
* results (more than one keyframe per frame at 60fps) and
* keyframe quantity.
*/
const sampleDelta = 10; //ms
class NativeAnimationExtended extends NativeAnimation {
constructor(options) {
/**
* The base NativeAnimation function only supports a subset
* of Motion easings, and WAAPI also only supports some
* easing functions via string/cubic-bezier definitions.
*
* This function replaces those unsupported easing functions
* with a JS easing function. This will later get compiled
* to a linear() easing function.
*/
replaceStringEasing(options);
/**
* Ensure we replace the transition type with a generator function
* before passing to WAAPI.
*
* TODO: Does this have a better home? It could be shared with
* JSAnimation.
*/
replaceTransitionType(options);
super(options);
/**
* Only set startTime when the animation should autoplay.
* Setting startTime on a paused WAAPI animation unpauses it
* (per the WAAPI spec), which breaks autoplay: false.
*/
if (options.startTime !== undefined && options.autoplay !== false) {
this.startTime = options.startTime;
}
this.options = options;
}
/**
* The animation's time now, in ms. Wall-clock rather than WAAPI's
* currentTime while running, as under CPU load currentTime may not
* reflect the actual elapsed time, causing incorrect sampling and
* visual jumps.
*/
elapsed() {
return this.state === "running"
? (time.now() - this.startTime) * this.speed
: this.time * 1000;
}
/**
* The value at a time, from a renderless JS animation.
*/
sample(sampleTime) {
if (!this.sampler) {
const { motionValue, onUpdate, onComplete, onPlay, onStop, element, ...options } = this.options;
/**
* Stop it straight away so its driver doesn't run every frame.
* It can still be sampled.
*/
this.sampler = new JSAnimation({ ...options, autoplay: false });
this.sampler.stop();
}
return this.sampler.sample(Math.max(0, sampleTime)).value;
}
/**
* The value now, as WAAPI doesn't set the motion value while it runs.
*/
liveValue() {
const { state } = this;
if (state === "running" || state === "paused") {
return this.sample(this.elapsed());
}
}
/**
* WAAPI doesn't natively have any interruption capabilities.
*
* Rather than read committed styles back out of the DOM, we can
* sample a renderless JS animation twice to calculate its current
* value, "previous" value, and therefore allow Motion to calculate
* velocity for any subsequent animation.
*/
updateMotionValue(value) {
const { motionValue, element, name } = this.options;
if (!motionValue)
return;
if (value !== undefined) {
motionValue.set(value);
return;
}
const { speed } = this;
const sampleTime = this.elapsed();
const delta = this.state === "running" && speed
? motionUtils.clamp(0, sampleDelta, sampleTime)
: 0;
const current = this.sample(sampleTime);
/**
* Write the estimated value to inline style so it persists
* after cancel(), covering the async gap before the next
* animation starts.
*/
if (element && name)
setStyle(element, name, current);
motionValue.setWithVelocity(this.sample(sampleTime - delta * Math.sign(speed)), current, delta / Math.abs(speed || 1));
}
}
/**
* Check if a value is animatable. Examples:
*
* ✅: 100, "100px", "#fff"
* ❌: "block", "url(2.jpg)"
* @param value
*
* @internal
*/
const isAnimatable = (value, name) => {
// If the list of keys that might be non-animatable grows, replace with Set
if (name === "zIndex")
return false;
// If it's a number or a keyframes array, we can animate it. We might at some point
// need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
// but for now lets leave it like this for performance reasons
if (typeof value === "number" || Array.isArray(value))
return true;
if (typeof value === "string" && // It's animatable if we have a string
(complex.test(value) || value === "0") && // And it contains numbers and/or colors
!value.startsWith("url(") // Unless it starts with "url("
) {
return true;
}
return false;
};
function hasKeyframesChanged(keyframes) {
const current = keyframes[0];
if (keyframes.length === 1)
return true;
for (let i = 0; i < keyframes.length; i++) {
if (keyframes[i] !== current)
return true;
}
}
function canAnimate(keyframes, name, type, velocity) {
/**
* Check if we're able to animate between the start and end keyframes,
* and throw a warning if we're attempting to animate between one that's
* animatable and another that isn't.
*/
const originKeyframe = keyframes[0];
if (originKeyframe === null) {
return false;
}
/**
* These aren't traditionally animatable but we do support them.
* In future we could look into making this more generic or replacing
* this function with mix() === mixImmediate
*/
if (name === "display" || name === "visibility")
return true;
const targetKeyframe = keyframes[keyframes.length - 1];
const isOriginAnimatable = isAnimatable(originKeyframe, name);
const isTargetAnimatable = isAnimatable(targetKeyframe, name);
// Always skip if any of these are true
if (!isOriginAnimatable || !isTargetAnimatable) {
// Only build the message when we're going to warn
isOriginAnimatable !== isTargetAnimatable &&
motionUtils.warning(false, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". "${isOriginAnimatable ? targetKeyframe : originKeyframe}" is not an animatable value.`, "value-not-animatable");
return false;
}
return (hasKeyframesChanged(keyframes) ||
((type === "spring" || isGenerator(type)) && velocity));
}
function makeAnimationInstant(options) {
options.duration = 0;
options.type = "keyframes";
}
/**
* A list of values that can be hardware-accelerated.
*/
const acceleratedValues = new Set([
"opacity",
"clipPath",
"filter",
"transform",
"backgroundColor",
]);
const browserColorFunctions = /^(?:oklch|oklab|lab|lch|color|color-mix|light-dark)\(/;
function hasBrowserOnlyColors(keyframes) {
for (let i = 0; i < keyframes.length; i++) {
if (typeof keyframes[i] === "string" &&
browserColorFunctions.test(keyframes[i])) {
return true;
}
}
return false;
}
const colorProperties = new Set([
"color",
"backgroundColor",
"outlineColor",
"fill",
"stroke",
"borderColor",
"borderTopColor",
"borderRightColor",
"borderBottomColor",
"borderLeftColor",
]);
const supportsWaapi = /*@__PURE__*/ motionUtils.memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
function supportsBrowserAnimation(options) {
const { motionValue, name, repeatDelay, repeatType, damping, type, keyframes, } = options;
/**
* Most values can't be accelerated at all, so check the name before
* looking at the element or its props.
*/
if (!name ||
!(acceleratedValues.has(name) || colorProperties.has(name))) {
return false;
}
const subject = motionValue?.owner?.current;
/**
* We use instanceof checks instead of isHTMLElement()/isSVGElement()
* because we explicitly **don't** want elements in different timing
* contexts (i.e. popups) to be accelerated, as it's not possible to sync
* these animations properly with those driven from the main window
* frameloop.
*/
if (!(subject instanceof HTMLElement) &&
!(subject instanceof SVGElement)) {
return false;
}
const { onUpdate, transformTemplate } = motionValue.owner.getProps();
return (supportsWaapi() &&
/**
* Force WAAPI for color properties with browser-only color formats
* (oklch, oklab, lab, lch, etc.) that the JS animation path can't parse.
*/
(acceleratedValues.has(name) ||
(colorProperties.has(name) &&
hasBrowserOnlyColors(keyframes))) &&
(name !== "transform" || !transformTemplate) &&
/**
* If we're outputting values to onUpdate then we can't use WAAPI as there's
* no way to read the value from WAAPI every frame.
*/
!onUpdate &&
!repeatDelay &&
repeatType !== "mirror" &&
damping !== 0 &&
type !== "inertia");
}
/**
* Provided a value and a ValueType, returns the value as that value type.
*/
const getValueAsType = (value, type) => {
return type && typeof value === "number"
? type.transform(value)
: value;
};
const translateAlias = {
x: "translateX",
y: "translateY",
z: "translateZ",
transformPerspective: "perspective",
};
const numTransforms = transformPropOrder.length;
/**
* Build a CSS transform style from individual x/y/scale etc properties.
*
* This outputs with a default order of transforms/scales/rotations, this can be customised by
* providing a transformTemplate function.
*/
function buildTransform$1(latestValues, transform, transformTemplate) {
// The transform string we're going to build into.
let transformString = "";
let transformIsDefault = true;
/**
* Loop over all possible transforms in order, adding the ones that
* are present to the transform string.
*/
for (let i = 0; i < numTransforms; i++) {
const key = transformPropOrder[i];
const value = latestValues[key];
if (value === undefined)
continue;
let valueIsDefault = true;
if (typeof value === "number") {
valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
}
else {
const parsed = parseFloat(value);
valueIsDefault = key.startsWith("scale") ? parsed === 1 : parsed === 0;
}
if (!valueIsDefault || transformTemplate) {
const valueAsType = getValueAsType(value, numberValueTypes[key]);
if (!valueIsDefault) {
transformIsDefault = false;
const transformName = translateAlias[key] || key;
transformString += `${transformName}(${valueAsType}) `;
}
if (transformTemplate) {
transform[key] = valueAsType;
}
}
}
// `pathRotation` composes onto `rotate` as a separate additive term so
// the user's `rotate` is never clobbered. Deliberately not a slot in
// `transformPropOrder`.
const pathRotation = latestValues.pathRotation;
if (pathRotation) {
transformIsDefault = false;
transformString += `rotate(${getValueAsType(pathRotation, numberValueTypes.pathRotation)}) `;
}
transformString = transformString.trim();
// If we have a custom `transform` template, pass our transform values and
// generated transformString to that before returning
if (transformTemplate) {
transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
}
else if (transformIsDefault) {
transformString = "none";
}
return transformString;
}
const transformGroups = new WeakMap();
/**
* Sample at the interruption sampling rate, up to a cap for long
* animations.
*/
const maxSamples = 200;
/**
* How far values may stray from the WAAPI animation: as a fraction of
* each value's change when they share an easing, otherwise in px or deg,
* or for scale.
*/
const easingTolerance = 0.001;
const sampleTolerance = 0.1;
const scaleTolerance = 0.001;
/**
* If an outside write, or a seek the WAAPI animation can't follow,
* happens again within this window, the group is being driven every
* frame (scrubbing, drag), which is cheaper on the main thread than
* rebuilding the WAAPI animation every frame.
*/
const churnWindow = 100;
/**
* Named easings that are the same cubic-bezier in JS and CSS.
*/
const isNativeEasing = (ease) => /^(linear|ease(In|Out|InOut))$/.test(ease);
const byTime = (a, b) => a - b;
/**
* n + 1 evenly spaced timestamps, from one timestamp to another.
*/
const spread = (from, to, n) => {
const result = [];
for (let i = 0; i <= n; i++)
result.push(mixNumber$1(from, to, i / n));
return result;
};
const getOwner = (options) => options.motionValue.owner;
const getGroup = (element) => transformGroups.get(element);
const read = (owner, key) => owner.latestValues ? owner.latestValues[key] : owner.getValue(key)?.get();
/**
* Whether this animation should join its element's transform group.
* Animations that can't be accelerated still join, so the group knows
* to stay on the main thread while they run. Browsers without linear()
* easing stay on the main thread.
*/
const canGroupTransform = ({ name, motionValue, }) => name &&
transformPropOrder.includes(name) &&
motionValue?.owner?.current instanceof HTMLElement &&
supportsWaapi() &&
supportsLinearEasing();
function canAccelerateTransform(options) {
const owner = getOwner(options);
const { onUpdate, transformTemplate } = owner.getProps();
return (
/**
* A handoff from an optimised appear animation is already running
* on its own WAAPI animation. onUpdate needs every value, every
* frame.
*/
!options.isHandoff &&
!onUpdate &&
!options.hasOnUpdate &&
/**
* transformTemplate could output anything.
*/
!transformTemplate &&
options.type !== "inertia" &&
/**
* A literal transform, or pathRotation, replaces or adds to the
* transform we'd build. styleEffect builds its own as "none".
*/
(read(owner, "transform") || "none") === "none" &&
!read(owner, "pathRotation") &&
/**
* Layout animations write transform every frame.
*/
!owner.projection?.isProjecting());
}
class TransformAnimation extends JSAnimation {
constructor(options) {
const element = getOwner(options).current;
const { driver = frameloopDriver } = options;
let animation;
/**
* Before JSAnimation replaces the type with its generator.
*/
const canAccelerate = canAccelerateTransform(options);
/**
* The driver ticks on the main thread only once the group has
* moved there. Until then, starting or stopping tells the group to
* update its WAAPI animation.
*/
options.driver = (update) => {
const js = driver(update);
return {
js,
now: js.now,
start: (keepAlive = true) => {
const group = getGroup(element);
const isJS = !group || group.isJS;
/**
* keepAlive is false when seeking. Seeking the WAAPI
* animation is free, but if a seek needs a rebuild and
* keeps happening, the group moves to the main thread.
*/
isJS
? js.start(keepAlive)
: group.schedule(false, !keepAlive);
},
stop: () => {
js.stop();
const group = getGroup(element);
group && !group.isFinishing && group.release(animation);
},
};
};
super(options);
animation = this;
this.canAccelerate = canAccelerate;
/**
* stop is bound in JSAnimation, so wrap it rather than override.
* Before stopping, set the motion value to where the WAAPI
* animation is now, with velocity, for the next animation to
* start from.
*/
const { stop } = this;
this.stop = () => {
this.isAccelerated() && this.sync();
stop();
};
}
get group() {
return getGroup(getOwner(this.options).current);
}
get js() {
return this.driver?.js;
}
get name() {
return this.options.name;
}
/**
* When this stops moving, or, if it repeats forever, when it starts
* repeating, and how long each repeat takes. Held (paused, or at
* speed 0) animations never stop moving.
*/
timing() {
const { startTime, speed, totalDuration } = this;
const { delay = 0, repeatType } = this.options;
return this.holdTime !== null
? [Infinity, 0]
: totalDuration === Infinity
? [
startTime + delay / speed,
(this.resolvedDuration * (repeatType === "loop" ? 1 : 2)) /
speed || 1,
]
: [startTime + (delay + totalDuration) / speed, 0];
}
/**
* Whether this is running, or paused, on the compositor.
*/
isAccelerated() {
const { group, state } = this;
return (group?.tracks.has(this) &&
!group.isJS &&
this.canAccelerate &&
(state === "running" || state === "paused"));
}
/**
* The value now, while this runs on the compositor and so doesn't
* set its motion value every frame.
*/
liveValue() {
return this.isAccelerated() ? this.sampleAt(time.now()) : undefined;
}
/**
* If this is a two-keyframe tween whose easing WAAPI runs exactly,
* when it starts and stops moving, and that easing.
*/
tween() {
const { keyframes: keyframes$1, type, ease, times, repeat, delay = 0 } = this.options;
const easing = motionUtils.isBezierDefinition(ease)
? cubicBezierAsString(ease)
: isNativeEasing(ease) && supportedWaapiEasing[ease];
if (easing &&
!repeat &&
!times &&
keyframes$1.length === 2 &&
type === keyframes &&
this.holdTime === null) {
const start = this.startTime + delay / this.speed;
return [start, start + this.resolvedDuration / this.speed, easing];
}
}
/**
* The timestamps between two timestamps where this reaches a
* keyframe or starts a repeat, where it can turn or jump.
*/
boundaries(from, to) {
const { startTime, speed, resolvedDuration, options } = this;
const { delay = 0, repeat = 0, repeatDelay = 0, repeatType, times, keyframes: keyframes$1, type, } = options;
const offsets = (type || keyframes) === keyframes
? times || defaultOffset(keyframes$1)
: [0, 1];
const start = startTime + delay / speed;
const result = [];
if (this.holdTime !== null || !(resolvedDuration > 0))
return result;
for (let i = Math.max(0, Math.floor(((from - start) * speed) / resolvedDuration)); i <= repeat; i++) {
const iterationStart = start + (i * resolvedDuration) / speed;
if (iterationStart > to)
break;
for (const offset of offsets) {
const t = iterationStart +
((i % 2 && repeatType && repeatType !== "loop"
? 1 - offset
: offset) *
(resolvedDuration - repeatDelay)) /
speed;
t > from && t < to && result.push(t);
}
}
return result;
}
/**
* The value at a timestamp, as a number.
*/
numberAt(timestamp) {
return parseFloat(this.sampleAt(timestamp, true));
}
/**
* Write the current value, and velocity, to the motion value.
*/
sync() {
const now = time.now();
this.options.motionValue.setWithVelocity(this.sampleAt(now - sampleDelta, true), this.sampleAt(now, true), sampleDelta);
}
play() {
/**
* A stopped animation (one that was interrupted) can't play again,
* so it mustn't join the group.
*/
if (this.isStopped)
return;
(this.group || createGroup(getOwner(this.options))).tracks.add(this);
super.play();
}
pause() {
super.pause();
if (this.isAccelerated()) {
this.sync();
this.group.schedule(false);
}
}
/**
* JSAnimation finishes on its next tick, which only happens on the
* main thread, so finish now.
*/
complete() {
super.complete();
const { group } = this;
group && !group.isJS && this.canAccelerate && this.tick(time.now());
}
/**
* Without a tick to rebase it, a held time still includes the delay,
* so take it off here, as a JS animation does on its next tick.
*/
get time() {
if (this.isAccelerated()) {
return motionUtils.millisecondsToSeconds(motionUtils.clamp(0, this.totalDuration, this.at(time.now()) - (this.options.delay || 0)));
}
return super.time;
}
/**
* A JS animation sets its motion value from a seek on its next tick.
* This doesn't tick, so set it now, rather than leave it to be set
* when this next stops.
*/
set time(newTime) {
super.time = newTime;
this.isAccelerated() && this.sync();
}
/**
* Scroll timelines set time every frame, so run these on the main
* thread.
*/
attachTimeline(timeline) {
this.canAccelerate = false;
this.group?.demote(true);
return super.attachTimeline(timeline);
}
}
function createGroup(owner) {
const element = owner.current;
const tracks = new Set();
const byKey = new Map();
/**
* Transforms that aren't animating, as built into the WAAPI animation.
*/
let statics = {};
/**
* The transforms in the WAAPI animation, in order.
*/
let keys = [];
let built = new Map();
let segments = [];
let needsBuild = false;
let isScheduled = false;
let isEnded = false;
let hasChurned = false;
let lastChurn = -Infinity;
const has = (key) => {
for (const track of tracks)
if (track.name === key)
return true;
};
/**
* The transform values at a timestamp or, without one, from the
* motion values. Animations that don't repeat forever are sampled no
* earlier than settled, so a loop that starts from an earlier cycle
* boundary holds them at their end.
*/
const valuesAt = (timestamp, settled) => {
const values = {};
for (const key of timestamp === undefined ? transformPropOrder : keys) {
const track = byKey.get(key);
const value = timestamp === undefined
? read(owner, key)
: track
? track.sampleAt(settled > timestamp && !track.timing()[1]
? settled
: timestamp)
: statics[key];
if (value !== undefined)
values[key] = value;
}
return values;
};
/**
* Build the transform at a timestamp. Unlike buildTransform, every key
* is written, even at its default, so each keyframe has the same list
* of functions and the browser interpolates them one by one.
*/
const compose = (timestamp, settled) => {
let transform = "";
const values = valuesAt(timestamp, settled);
for (const key in values) {
transform +=
(translateAlias[key] || key) +
"(" +
getValueAsType(values[key], numberValueTypes[key]) +
") ";
}
return transform || "none";
};
/**
* Write the transform as an inline style, as the renderer would.
*/
const commit = (values = valuesAt()) => {
element.style.transform = buildTransform$1(values, {});
};
/**
* Cancel the WAAPI animations, by default first committing the
* transform. The renderer writes its own version on its next render.
*/
const stop = (shouldCommit = true) => {
shouldCommit && commit();
segments.forEach(({ animation }) => animation.cancel());
segments = [];
};
const add = (animation, offset, end = Infinity) => {
const segment = { animation, offset, end };
animation.startTime = time.now() + offset;
/**
* Animations finish when the WAAPI animation reaches their end.
* Once a loop has taken over, the finished animation isn't needed.
*/
if (end < Infinity) {
animation.onfinish = () => {
segment.isDone = true;
if (segments.some((s) => s.end === Infinity)) {
animation.cancel();
segments = segments.filter((s) => s !== segment);
}
group.schedule(false);
};
}
/**
* Something else cancelled it, so carry on on the main thread.
*/
animation.oncancel = () => segments.includes(segment) && group.demote();
segments.push(segment);
};
/**
* Where a value jumps between two timestamps, as when a repeat starts
* again: the timestamps either side of the jump, or none if it moves
* there continuously.
*/
const jumpAt = (value, a, b) => {
const change = (x, y) => Math.abs(value(y) - value(x));
const size = change(a, b);
while (b - a > 0.01) {
const mid = (a + b) / 2;
change(a, mid) > change(mid, b) ? (b = mid) : (a = mid);
}
return change(a, b) > size / 2 ? [a, b] : [];
};
/**
* If every moving animation follows the same eased progress between
* two timestamps, the easing that describes it.
*/
const getEasing = (moving, from, to, bounds) => {
const samples = Math.min(maxSamples, Math.max(2, Math.ceil((to - from) / sampleDelta)));
/**
* Too many keyframes or repeats to follow with this many samples.
*/
if (bounds.length * 4 > samples)
return;
const at = spread(from, to, samples).concat(bounds).sort(byTime);
const position = (t) => motionUtils.progress(from, to, t);
let shared;
let progressAt;
for (const track of moving) {
const values = at.map((t) => track.numberAt(t));
const [first] = values;
const changes = values.map((value) => value - first);
const end = changes[changes.length - 1];
/**
* A value that ends only a tiny way from where it started, as
* a round trip does if it's built just after it starts, or
* from a float residue, ends where it started. Dividing by
* that tiny range would stretch the easing to values the
* compositor can't render.
*/
const range = changes.some((change) => Math.abs(change) * easingTolerance > Math.abs(end))
? 0
: end;
const progress = changes.map((change) => range ? change / range : change);
/**
* A value that doesn't change, like one still in its delay,
* fits any easing. One that changes but ends where it started
* fits none.
*/
if (!range) {
if (progress.some((p) => !(Math.abs(p) <= easingTolerance))) {
return;
}
}
else if (!shared) {
shared = progress;
progressAt = (t) => (track.numberAt(t) - first) / range;
}
else if (progress.some((p, i) => !(Math.abs(p - shared[i]) <= easingTolerance))) {
return;
}
}
if (!shared ||
shared.every((p, i) => Math.abs(p - position(at[i])) <= easingTolerance)) {
return "linear";
}
/**
* A repeat that starts again jumps back, which takes two points at
* the same position.
*/
const points = [];
const point = (t, p = progressAt(t)) => points.push(round(p) + " " + round(position(t) * 100) + "%");
shared.forEach((p, i) => {
i &&
Math.abs(p - shared[i - 1]) > 0.2 &&
jumpAt(progressAt, at[i - 1], at[i]).forEach((t) => point(t));
point(at[i], p);
});
return "linear(" + points + ")";
};
/**
* Sample timestamps between two timestamps, closer together where the
* moving animations curve.
*/
const sample = (moving, from, to, bounds) => {
const times = [from];
/**
* Values that aren't numbers, like calc(), are left to the
* browser to interpolate.
*/
const isStraight = (a, b) => moving.every((track) => !(Math.abs(track.numberAt((a + b) / 2) -
(track.numberAt(a) + track.numberAt(b)) / 2) >
(track.name.startsWith("scale")
? scaleTolerance
: sampleTolerance)));
const split = (a, b, depth) => {
if (b - a < 1 || isStraight(a, b)) {
times.push(b);
}
else if (depth < 4) {
split(a, (a + b) / 2, depth + 1);
split((a + b) / 2, b, depth + 1);
}
else {
/**
* Keyframes either side of a jump, like a repeat starting
* again, so it doesn't play as a quick sweep.
*/
for (const track of moving) {
times.push(...jumpAt((t) => track.numberAt(t), a, b));
}
times.push(b);
}
};
/**
* Split at least every 100ms, and at every keyframe and repeat,
* either side of where a value can jump.
*/
const ends = spread(from, to, Math.ceil((to - from) / 100));
for (const t of bounds)
ends.push(t, Math.min(t + 0.01, to));
let start = from;
for (const end of ends.sort(byTime)) {
end > start && split(start, end, 0);
start = end;
}
return times.sort(byTime);
};
/**
* If every moving animation is the same tween, started together, as
* happens for the values of one animate() call or transition, when
* they move and their native easing.
*/
const getTween = (moving) => {
let shared;
for (const track of moving) {
const tween = track.tween();
if (!tween ||
shared?.some((v, i) => i < 2
? Math.abs(tween[i] - v) > 1
: tween[i] !== v)) {
return;
}
shared = tween;
}
return shared;
};
/**
* A WAAPI animation of the composed transform between two timestamps.
*/
const run = (moving, from, to, options = { fill: "both" }, settled, nativeEasing) => {
const bounds = moving.flatMap((track) => track.boundaries(from, to));
const easing = nativeEasing || getEasing(moving, from, to, bounds);
const times = easing ? [from, to] : sample(moving, from, to, bounds);
const transform = times.map((t) => compose(t, settled));
let keyframes = { transform };
if (!easing) {
keyframes.offset = times.map((t) => motionUtils.progress(from, to, t));
}
/**
* If nothing moves, don't hold a transform, which, even at its
* default, would make the element a containing block. The empty
* animation still finishes the animations.
*/
if (transform.every((t) => t === transform[0])) {
commit(valuesAt(from, settled));
keyframes = null;
}
return element.animate(keyframes, {
...options,
duration: to - from,
easing: easing || "linear",
});
};
/**
* Replace the WAAPI animations with ones built from now. Returns
* undefined if the animations can't be composed.
*/
const animate = (now) => {
/**
* The finite part runs until the last finite animation (or the
* last delay) ends. Infinitely repeating animations then continue
* as one looping WAAPI animation, which needs them to share a
* cycle.
*/
let end = now;
let cycle = 0;
let cycleStart = 0;
const moving = [];
const looping = [];
const ends = new Set();
byKey.clear();
built = new Map();
for (const track of tracks) {
byKey.set(track.name, track);
const [trackEnd, trackCycle] = track.timing();
const isHeld = trackEnd === Infinity;
built.set(track, [track.at(now), track.speed, isHeld]);
/**
* Held animations don't move, so keep their motion values up
* to date, as a JSAnimation would on a seek.
*/
if (isHeld) {
track.sync();
continue;
}
if (track.speed < 0)
return;
if (trackCycle) {
if (cycle) {
const phase = (trackEnd - cycleStart) / trackCycle;
if (Math.abs(trackCycle - cycle) > 1 ||
Math.abs(phase - Math.round(phase)) * cycle > 1) {
return;
}
}
else {
cycle = trackCycle;
cycleStart = trackEnd;
}
looping.push(track);
}
else {
ends.add(trackEnd);
}
moving.push(track);
end = Math.max(end, trackEnd);
}
statics = {};
/**
* Transforms that aren't animating are left out at their default.
*/
keys = transformPropOrder.filter((key) => {
if (byKey.has(key))
return true;
const value = (statics[key] = read(owner, key));
return (value !== undefined &&
parseFloat(value) !==
(key.startsWith("scale") ? 1 : 0));
});
stop(false);
/**
* Values that share one tween are one WAAPI animation of it, with
* two keyframes and its own easing, from when they started.
*/
const tween = !cycle && getTween(moving);
try {
if (tween && tween[1] > now) {
const [from, to, easing] = tween;
add(run(moving, from, to, undefined, undefined, easing), from - now, to - from);
}
else if (end > now) {
add(run(moving, now, end), 0, end - now);
/**
* Animations that end sooner finish on the events of
* empty animations that end with them.
*/
ends.forEach((trackEnd) => trackEnd < end - 1 &&
add(element.animate(null, {
duration: trackEnd - now,
}), 0, trackEnd - now));
}
if (cycle) {
/**
* Build one cycle from a cycle boundary, so it repeats
* seamlessly, and start it part way through.
*/
const from = cycleStart + Math.floor((end - cycleStart) / cycle) * cycle;
add(run(looping, from, from + cycle, {
iterations: Infinity,
iterationStart: (end - from) / cycle,
/**
* It must not fill backwards over the finite part
* that runs before it.
*/
fill: "forwards",
}, end), end - now);
}
}
catch {
return;
}
/**
* Everything is held, so hold it with an inline style instead.
*/
segments.length || stop();
return true;
};
/**
* If every animation has been paused, played, seeked or sped up
* together since the WAAPI animation was built, do the same to it.
* Returns false if it needs rebuilding instead.
*/
const retime = (now) => {
let elapsed;
let rate = 0;
for (const track of tracks) {
const state = built.get(track);
if (!state)
return false;
const [builtTime, builtSpeed, wasHeld] = state;
const trackTime = track.at(now);
const isHeld = track.timing()[0] === Infinity;
if (wasHeld) {
if (isHeld && trackTime === builtTime)
continue;
return false;
}
const trackElapsed = (trackTime - builtTime) / builtSpeed;
const trackRate = isHeld ? 0 : track.speed / builtSpeed;
if (elapsed === undefined) {
elapsed = trackElapsed;
rate = trackRate;
}
else if (Math.abs(trackElapsed - elapsed) > 1 ||
trackRate !== rate) {
return false;
}
}
if (elapsed === undefined)
return true;
if (!segments.length)
return false;
for (const { offset, end, isDone } of segments) {
const local = elapsed - offset;
if (end < Infinity &&
(isDone ? local < end - 1 : local < 0 || local >= end)) {
return false;
}
}
for (const { animation, offset, isDone } of segments) {
if (isDone)
continue;
const local = elapsed - offset;
if (rate) {
animation.playbackRate = rate;
animation.startTime = now - local / rate;
}
else {
animation.pause();
animation.currentTime = local;
}
}
return true;
};
/**
* If no animations are left, write where they got to and cancel the
* WAAPI animations. Returns whether the group ended.
*/
const end = () => {
if (tracks.size)
return false;
isEnded = true;
transformGroups.delete(element);
group.isJS || stop();
return true;
};
const build = () => {
const now = time.now();
/**
* Finish the animations that have reached their end, which the
* WAAPI animation has already rendered.
*/
if (!group.isJS) {
group.isFinishing = true;
tracks.forEach((track) => {
const [trackEnd, trackCycle] = track.timing();
if (track.state === "running" &&
track.speed > 0 &&
!trackCycle &&
trackEnd <= now + 1) {
track.complete();
/**
* From now it's checked for outside writes like any
* other static transform. If the WAAPI animation never
* rendered it (it was instant), rebuild with its value.
*/
statics[track.name] = read(owner, track.name);
built.has(track) || (needsBuild = true);
}
});
group.isFinishing = false;
}
isScheduled = false;
if (isEnded)
return;
tracks.forEach(({ state }, track) => {
if (state === "idle" || state === "finished")
tracks.delete(track);
});
if (end())
return;
for (const track of tracks) {
if (!track.canAccelerate)
return group.demote(true);
}
/**
* Everything that kept the group on the main thread has finished,
* so move the remaining animations back to the compositor.
*/
if (group.isJS) {
group.isJS = false;
needsBuild = true;
tracks.forEach((track) => track.js?.stop());
}
const shouldBuild = needsBuild;
const churned = hasChurned;
needsBuild = hasChurned = false;
if (shouldBuild || !retime(now)) {
if (churned) {
if (now - lastChurn < churnWindow)
return group.demote();
lastChurn = now;
}
if (!animate(now))
return group.demote();
}
};
const group = {
tracks,
isJS: false,
isFinishing: false,
schedule(build_, isChurn) {
if (isEnded)
return;
needsBuild || (needsBuild = build_);
hasChurned || (hasChurned = !!isChurn);
/**
* Build in this frame's render step, so it's in place before
* anything reads the DOM in postRender, or straight after the
* current task outside of a frame.
*/
if (!isScheduled) {
isScheduled = true;
frameData.isProcessing
? frame.render(build, false, true)
: queueMicrotask(build);
}
},
/**
* End the group now, rather than when it next builds, so the
* element's transform is the caller's again as soon as its last
* animation is stopped.
*/
release(track) {
/**
* Only drop the stopped animation. Others can be idle because
* they're part way through play(), and are about to run.
*/
const { state } = track;
if (state === "idle" || state === "finished")
tracks.delete(track);
end() || group.schedule(true);
},
/**
* An outside write. Rebuild once, but if it keeps happening, move
* to the main thread.
*/
check() {
if (group.isJS)
return;
for (const key in statics) {
if (read(owner, key) !== statics[key] && !has(key)) {
return group.schedule(true, true);
}
}
},
demote(canReturn) {
if (group.isJS || isEnded)
return;
/**
* Unless only another animation is holding the group on the
* main thread, these animations stay there until they end.
*/
tracks.forEach((track) => {
track.isAccelerated() && track.sync();
canReturn || (track.canAccelerate = false);
});
group.isJS = true;
built = new Map();
stop();
tracks.forEach((track) => track.state === "running" && track.js?.start());
},
};
transformGroups.set(element, group);
return group;
}
class AsyncMotionValueAnimation extends WithPromise {
constructor(options) {
super();
/**
* Bound to support return animation.stop pattern
*/
this.stop = () => {
if (this._animation) {
this._animation.stop();
this.stopTimeline?.();
}
this.keyframeResolver?.cancel();
};
this.createdAt = time.now();
const { keyframes, name, motionValue, element } = options;
/**
* animateMotionValue builds a fresh options object per value, so
* it's completed in place as keyframes resolve rather than copied.
*/
const optionsWithDefaults = options;
optionsWithDefaults.autoplay ?? (optionsWithDefaults.autoplay = true);
optionsWithDefaults.delay ?? (optionsWithDefaults.delay = 0);
optionsWithDefaults.type ?? (optionsWithDefaults.type = "keyframes");
optionsWithDefaults.repeat ?? (optionsWithDefaults.repeat = 0);
optionsWithDefaults.repeatDelay ?? (optionsWithDefaults.repeatDelay = 0);
optionsWithDefaults.repeatType ?? (optionsWithDefaults.repeatType = "loop");
const KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver;
this.keyframeResolver = new KeyframeResolver$1(keyframes, (resolvedKeyframes, finalKeyframe, forced) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe, optionsWithDefaults, !forced), name, motionValue, element);
this.keyframeResolver?.scheduleResolve();
}
onKeyframesResolved(keyframes, finalKeyframe, options, sync) {
this.keyframeResolver = undefined;
const { name, type, velocity, delay, isHandoff, onUpdate } = options;
this.resolvedAt = time.now();
/**
* If we can't animate this value with the resolved keyframes
* then we should complete it immediately.
*/
let canAnimateValue = true;
if (!canAnimate(keyframes, name, type, velocity)) {
canAnimateValue = false;
if (motionUtils.MotionGlobalConfig.instantAnimations || !delay) {
onUpdate?.(getFinalKeyframe(keyframes, options, finalKeyframe));
}
keyframes[0] = keyframes[keyframes.length - 1];
makeAnimationInstant(options);
options.repeat = 0;
}
const { onComplete } = options;
options.finalKeyframe = finalKeyframe;
options.keyframes = keyframes;
/**
* JSAnimation and NativeAnimation call onComplete exactly when
* their own `finished` resolves, so this replaces a promise chain
* per value with a callback.
*/
options.onComplete = () => {
onComplete?.();
this.notifyFinished();
};
/**
* Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via
* WAAPI. Therefore, this animation must be JS to ensure it runs "under" the
* optimised animation.
*
* Also skip WAAPI when keyframes aren't animatable, as the resolved
* values may not be valid CSS and would trigger browser warnings.
*/
const useWaapi = canAnimateValue && !isHandoff && supportsBrowserAnimation(options);
/**
* Independent transforms (x, scale etc) on an HTML element are
* composed into one WAAPI transform animation per element.
*/
const isGroupedTransform = !useWaapi && canGroupTransform(options);
/**
* Resolve startTime for the animation. A startTime passed in options
* (an optimised appear handoff syncing to its WAAPI animation) takes
* precedence.
*
* *Ideally*, we would use the createdAt time as t=0 as the following
* frame would then be the first frame of the animation in progress,
* which would feel snappier. If keyframes resolved on a later frame,
* and long after creation, we start from then instead.
*
* If they resolved immediately, a JSAnimation picks its own start
* time and resolves it the same way on its first frame, so every
* animation started in that moment stays in sync. WAAPI has no frame
* of ours to do that on.
*/
if (sync &&
(useWaapi ||
isGroupedTransform ||
this.resolvedAt !== this.createdAt)) {
options.startTime ?? (options.startTime = resolveStartTime(this.createdAt, this.resolvedAt));
}
let animation;
if (useWaapi) {
/**
* The resolver needed the VisualElement, WAAPI needs the DOM
* element. JSAnimation reads neither, so this is safe to
* leave in place if we fall back to it.
*/
options.element = options.motionValue?.owner?.current;
try {
animation = new NativeAnimationExtended(options);
}
catch {
animation = new JSAnimation(options);
}
}
else if (isGroupedTransform) {
animation = new TransformAnimation(options);
}
else {
animation = new JSAnimation(options);
}
if (this.pendingTimeline) {
this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
this.pendingTimeline = undefined;
}
this._animation = animation;
}
get finished() {
return this._animation ? this._animation.finished : super.finished;
}
then(onResolve, _onReject) {
return this.finished.finally(onResolve).then(() => { });
}
/**
* The value now, if the animation runs on the compositor.
*/
liveValue() {
return this._animation?.liveValue?.();
}
get animation() {
if (!this._animation) {
this.keyframeResolver?.resume();
flushKeyframeResolvers();
}
return this._animation;
}
get duration() {
return this.animation.duration;
}
get iterationDuration() {
return this.animation.iterationDuration;
}
get time() {
return this.animation.time;
}
set time(newTime) {
this.animation.time = newTime;
}
get speed() {
return this.animation.speed;
}
get state() {
return this.animation.state;
}
set speed(newSpeed) {
this.animation.speed = newSpeed;
}
get startTime() {
return this.animation.startTime;
}
attachTimeline(timeline) {
if (this._animation) {
this.stopTimeline = this.animation.attachTimeline(timeline);
}
else {
this.pendingTimeline = timeline;
}
return () => this.stop();
}
play() {
this.animation.play();
}
pause() {
this.animation.pause();
}
complete() {
this.animation.complete();
}
cancel() {
if (this._animation) {
this.animation.cancel();
}
this.keyframeResolver?.cancel();
}
}
class GroupAnimation {
constructor(animations) {
// Bound to accommodate common `return animation.stop` pattern
this.stop = () => this.runAll("stop");
this.animations = animations.filter(Boolean);
}
get finished() {
return Promise.all(this.animations.map((animation) => animation.finished));
}
/**
* TODO: Filter out cancelled or stopped animations before returning
*/
getAll(propName) {
return this.animations[0][propName];
}
setAll(propName, newValue) {
for (let i = 0; i < this.animations.length; i++) {
this.animations[i][propName] = newValue;
}
}
attachTimeline(timeline) {
const subscriptions = this.animations.map((animation) => animation.attachTimeline(timeline));
return () => {
subscriptions.forEach((cancel, i) => {
cancel && cancel();
this.animations[i].stop();
});
};
}
get time() {
return this.getAll("time");
}
set time(time) {
this.setAll("time", time);
}
get speed() {
return this.getAll("speed");
}
set speed(speed) {
this.setAll("speed", speed);
}
get state() {
return this.getAll("state");
}
get startTime() {
return this.getAll("startTime");
}
get duration() {
return getMax(this.animations, "duration");
}
get iterationDuration() {
return getMax(this.animations, "iterationDuration");
}
runAll(methodName) {
this.animations.forEach((controls) => controls[methodName]());
}
play() {
this.runAll("play");
}
pause() {
this.runAll("pause");
}
cancel() {
this.runAll("cancel");
}
complete() {
this.runAll("complete");
}
}
function getMax(animations, propName) {
let max = 0;
for (let i = 0; i < animations.length; i++) {
const value = animations[i][propName];
if (value !== null && value > max) {
max = value;
}
}
return max;
}
class GroupAnimationWithThen extends GroupAnimation {
then(onResolve, _onReject) {
return this.finished.finally(onResolve).then(() => { });
}
}
class NativeAnimationWrapper extends NativeAnimation {
constructor(animation) {
super();
this.animation = animation;
animation.onfinish = () => {
this.finishedTime = this.time;
this.notifyFinished();
};
/**
* The optionless super() returns before NativeAnimation's own
* notify, so wrapped animations (view transition cross-fades)
* report here, after the wrapped WAAPI animation is attached.
*/
notifyAnimationStart(this, {});
}
}
const animationMaps = new WeakMap();
const animationMapKey = (name, pseudoElement = "") => `${name}:${pseudoElement}`;
function getAnimationMap(element) {
let map = animationMaps.get(element);
if (!map) {
map = new Map();
animationMaps.set(element, map);
}
return map;
}
function calcChildStagger(children, child, delayChildren, staggerChildren = 0, staggerDirection = 1) {
const index = Array.from(children)
.sort((a, b) => a.sortNodePosition(b))
.indexOf(child);
const numChildren = children.size;
const maxStaggerDuration = (numChildren - 1) * staggerChildren;
const delayIsFunction = typeof delayChildren === "function";
return delayIsFunction
? delayChildren(index, numChildren)
: staggerDirection === 1
? index * staggerChildren
: maxStaggerDuration - index * staggerChildren;
}
/**
* Maximum time between the value of two frames, beyond which we
* assume the velocity has since been 0.
*/
const MAX_VELOCITY_DELTA = 30;
const isFloat = (value) => {
return !isNaN(parseFloat(value));
};
const collectMotionValues = {
current: undefined,
};
/**
* `MotionValue` is used to track the state and velocity of motion values.
*
* @public
*/
class MotionValue {
/**
* @param init - The initiating value
* @param config - Optional configuration options
*
* - `transformer`: A function to transform incoming values with.
*/
constructor(init, options = {}) {
/**
* Tracks whether this value can output a velocity. Currently this is only true
* if the value is numerical, but we might be able to widen the scope here and support
* other value types.
*
* @internal
*/
this.canTrackVelocity = null;
/**
* An object containing a SubscriptionManager for each active event.
*/
this.events = {};
this.updateAndNotify = (v) => {
const currentTime = time.now();
/**
* If we're updating the value during another frame or eventloop
* than the previous frame, then the we set the previous frame value
* to current.
*/
if (this.updatedAt !== currentTime) {
this.setPrevFrameValue();
}
this.prev = this.current;
this.setCurrent(v);
// Update update subscribers
if (this.current !== this.prev) {
this.notifyChange();
if (this.dependents) {
for (const dependent of this.dependents) {
dependent.dirty();
}
}
}
};
this.hasAnimated = false;
this.setCurrent(init);
this.owner = options.owner;
}
setCurrent(current) {
this.current = current;
this.updatedAt = time.now();
if (this.canTrackVelocity === null && current !== undefined) {
this.canTrackVelocity = isFloat(this.current);
}
}
setPrevFrameValue(prevFrameValue = this.current) {
this.prevFrameValue = prevFrameValue;
this.prevUpdatedAt = this.updatedAt;
}
/**
* Adds a function that will be notified when the `MotionValue` is updated.
*
* It returns a function that, when called, will cancel the subscription.
*
* When calling `onChange` inside a React component, it should be wrapped with the
* `useEffect` hook. As it returns an unsubscribe function, this should be returned
* from the `useEffect` function to ensure you don't add duplicate subscribers..
*
* ```jsx
* export const MyComponent = () => {
* const x = useMotionValue(0)
* const y = useMotionValue(0)
* const opacity = useMotionValue(1)
*
* useEffect(() => {
* function updateOpacity() {
* const maxXY = Math.max(x.get(), y.get())
* const newOpacity = transform(maxXY, [0, 100], [1, 0])
* opacity.set(newOpacity)
* }
*
* const unsubscribeX = x.on("change", updateOpacity)
* const unsubscribeY = y.on("change", updateOpacity)
*
* return () => {
* unsubscribeX()
* unsubscribeY()
* }
* }, [])
*
* return
* }
* ```
*
* @param subscriber - A function that receives the latest value.
* @returns A function that, when called, will cancel this subscription.
*
* @deprecated
*/
onChange(subscription) {
if (process.env.NODE_ENV !== "production") {
motionUtils.warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
}
return this.on("change", subscription);
}
on(eventName, callback) {
var _a;
if (eventName === "change")
return this.onChangeSubscribe(callback);
return ((_a = this.events)[eventName] || (_a[eventName] = new motionUtils.SubscriptionManager())).add(callback);
}
onChangeSubscribe(callback) {
const { events } = this;
if (!events.change && !this.changeSubscriber) {
this.changeSubscriber = callback;
}
else {
if (!events.change) {
events.change = new motionUtils.SubscriptionManager();
events.change.add(this.changeSubscriber);
this.changeSubscriber = undefined;
}
events.change.add(callback);
}
return () => {
if (this.changeSubscriber === callback) {
this.changeSubscriber = undefined;
}
else {
events.change?.remove(callback);
}
this.stopIfUnobserved();
};
}
/**
* If we have no more change listeners by the start
* of the next frame, stop active animations.
*/
stopIfUnobserved() {
frame.read(() => {
if (!this.changeSubscriber && !this.events.change?.getSize()) {
this.stop();
}
});
}
clearListeners() {
this.changeSubscriber = undefined;
for (const eventManagers in this.events) {
this.events[eventManagers].clear();
}
}
/**
* Attaches a passive effect to the `MotionValue`.
*/
attach(passiveEffect, stopPassiveEffect) {
this.passiveEffect = passiveEffect;
this.stopPassiveEffect = stopPassiveEffect;
}
/**
* Sets the state of the `MotionValue`.
*
* @remarks
*
* ```jsx
* const x = useMotionValue(0)
* x.set(10)
* ```
*
* @param latest - Latest value to set.
* @param render - Whether to notify render subscribers. Defaults to `true`
*
* @public
*/
set(v) {
if (!this.passiveEffect) {
this.updateAndNotify(v);
}
else {
this.passiveEffect(v, this.updateAndNotify);
}
}
setWithVelocity(prev, current, delta) {
this.set(current);
this.prev = undefined;
this.prevFrameValue = prev;
this.prevUpdatedAt = this.updatedAt - delta;
}
/**
* Set the state of the `MotionValue`, stopping any active animations,
* effects, and resets velocity to `0`.
*/
jump(v, endAnimation = true) {
this.updateAndNotify(v);
this.prev = v;
this.prevUpdatedAt = this.prevFrameValue = undefined;
endAnimation && this.stop();
if (this.stopPassiveEffect)
this.stopPassiveEffect();
}
dirty() {
this.notifyChange();
}
notifyChange() {
const { current, changeSubscriber } = this;
/**
* One or the other exists. Subscribing during the direct
* subscriber's call moves it into a new manager, which must not
* then be notified for the same change.
*/
if (changeSubscriber) {
changeSubscriber(current);
}
else {
this.events.change?.notify(current);
}
}
addDependent(dependent) {
if (!this.dependents) {
this.dependents = new Set();
}
this.dependents.add(dependent);
}
removeDependent(dependent) {
if (this.dependents) {
this.dependents.delete(dependent);
}
}
/**
* Returns the latest state of `MotionValue`
*
* @returns - The latest state of `MotionValue`
*
* @public
*/
get() {
if (collectMotionValues.current) {
collectMotionValues.current.push(this);
}
/**
* A value animating on the compositor isn't updated every frame,
* so read it from its animation.
*/
const sampled = this.animation?.liveValue?.();
return sampled === undefined ? this.current : sampled;
}
/**
* The value as last set. Unlike get(), this doesn't read an animation
* running on the compositor, which renders the value itself.
*/
getCurrent() {
return this.current;
}
/**
* @public
*/
getPrevious() {
return this.prev;
}
/**
* Returns the latest velocity of `MotionValue`
*
* @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
*
* @public
*/
getVelocity() {
const currentTime = time.now();
if (!this.canTrackVelocity ||
this.prevFrameValue === undefined ||
currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {
return 0;
}
const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
// Casts because of parseFloat's poor typing
return motionUtils.velocityPerSecond(parseFloat(this.current) -
parseFloat(this.prevFrameValue), delta);
}
/**
* Registers a new animation to control this `MotionValue`. Only one
* animation can drive a `MotionValue` at one time.
*
* ```jsx
* value.start()
* ```
*
* @param animation - A function that starts the provided animation
*/
start(startAnimation) {
this.stop();
return new Promise((resolve) => {
this.hasAnimated = true;
/**
* Complete synchronously via the callback rather than chaining a
* second promise per animation. Guard against animations that
* complete before startAnimation has returned.
*/
let isComplete = false;
let animation;
// eslint-disable-next-line prefer-const -- read by the callback before assignment when completing synchronously
animation = startAnimation(() => {
isComplete = true;
this.events.animationComplete?.notify();
if (this.animation === animation)
this.clearAnimation();
resolve();
});
if (!isComplete)
this.animation = animation;
this.events.animationStart?.notify();
});
}
/**
* Stop the currently active animation.
*
* @public
*/
stop() {
if (this.animation) {
this.animation.stop();
if (this.events.animationCancel) {
this.events.animationCancel.notify();
}
}
this.clearAnimation();
}
/**
* Returns `true` if this value is currently animating.
*
* @public
*/
isAnimating() {
return !!this.animation;
}
clearAnimation() {
// Assign rather than delete to keep the object's shape stable
this.animation = undefined;
}
/**
* Destroy and clean up subscribers to this `MotionValue`.
*
* The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
* handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
* created a `MotionValue` via the `motionValue` function.
*
* @public
*/
destroy() {
this.dependents?.clear();
this.events.destroy?.notify();
this.clearListeners();
this.stop();
if (this.stopPassiveEffect) {
this.stopPassiveEffect();
}
}
}
function motionValue(init, options) {
return new MotionValue(init, options);
}
/**
* If `transition` has `inherit: true`, shallow-merge it with
* `parentTransition` (child keys win) and strip the `inherit` key.
* Otherwise return `transition` unchanged.
*/
function resolveTransition(transition, parentTransition) {
if (transition?.inherit && parentTransition) {
const { inherit: _, ...rest } = transition;
return { ...parentTransition, ...rest };
}
return transition;
}
function getValueTransition(transition, key) {
const valueTransition = transition?.[key] ??
transition?.["default"] ??
transition;
if (valueTransition !== transition) {
return resolveTransition(valueTransition, transition);
}
return valueTransition;
}
const underDampedSpring = {
type: "spring",
stiffness: 500,
damping: 25,
restSpeed: 10,
};
const criticallyDampedSpring = (target) => ({
type: "spring",
stiffness: 550,
damping: target === 0 ? 2 * Math.sqrt(550) : 30,
restSpeed: 10,
});
const keyframesTransition = {
type: "keyframes",
duration: 0.8,
};
/**
* Default easing curve is a slightly shallower version of
* the default browser easing curve.
*/
const ease = {
type: "keyframes",
ease: [0.25, 0.1, 0.35, 1],
duration: 0.3,
};
const getDefaultTransition = (valueKey, { keyframes }) => {
if (keyframes.length > 2) {
return keyframesTransition;
}
else if (transformProps.has(valueKey)) {
return valueKey.startsWith("scale")
? criticallyDampedSpring(keyframes[1])
: underDampedSpring;
}
return ease;
};
const orchestrationKeys = new Set([
"when",
"delay",
"delayChildren",
"staggerChildren",
"staggerDirection",
"repeat",
"repeatType",
"repeatDelay",
"from",
"elapsed",
]);
/**
* Decide whether a transition is defined on a given Transition.
* This filters out orchestration options and returns true
* if any options are left.
*/
function isTransitionDefined(transition) {
for (const key in transition) {
if (!orchestrationKeys.has(key))
return true;
}
return false;
}
const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
const valueTransition = getValueTransition(transition, name) || {};
/**
* Most transition values are currently completely overwritten by value-specific
* transitions. In the future it'd be nicer to blend these transitions. But for now
* delay actually does inherit from the root transition if not value-specific.
*/
const delay = valueTransition.delay || transition.delay || 0;
/**
* Elapsed isn't a public transition option but can be passed through from
* optimized appear effects in milliseconds.
*/
let { elapsed = 0 } = transition;
elapsed = elapsed - motionUtils.secondsToMilliseconds(delay);
const options = {
keyframes: Array.isArray(target) ? target : [null, target],
ease: "easeOut",
velocity: value.getVelocity(),
...valueTransition,
delay: -elapsed,
onUpdate: (v) => {
value.set(v);
valueTransition.onUpdate && valueTransition.onUpdate(v);
},
onComplete: () => {
onComplete();
valueTransition.onComplete && valueTransition.onComplete();
},
name,
motionValue: value,
element: isHandoff ? undefined : element,
hasOnUpdate: !!valueTransition.onUpdate,
};
/**
* If there's no transition defined for this value, we can generate
* unique transition settings for this value.
*/
if (!isTransitionDefined(valueTransition)) {
Object.assign(options, getDefaultTransition(name, options));
}
/**
* Both WAAPI and our internal animation functions use durations
* as defined by milliseconds, while our external API defines them
* as seconds.
*/
options.duration && (options.duration = motionUtils.secondsToMilliseconds(options.duration));
options.repeatDelay && (options.repeatDelay = motionUtils.secondsToMilliseconds(options.repeatDelay));
/**
* Support deprecated way to set initial value. Prefer keyframe syntax.
*/
if (options.from !== undefined) {
options.keyframes[0] = options.from;
}
let shouldSkip = false;
if (options.type === false ||
(options.duration === 0 && !options.repeatDelay)) {
makeAnimationInstant(options);
if (options.delay === 0) {
shouldSkip = true;
}
}
if (motionUtils.MotionGlobalConfig.instantAnimations ||
motionUtils.MotionGlobalConfig.skipAnimations ||
element?.shouldSkipAnimations ||
valueTransition.skipAnimations) {
shouldSkip = true;
makeAnimationInstant(options);
options.delay = 0;
}
/**
* If the transition type or easing has been explicitly set by the user
* then we don't want to allow flattening the animation.
*/
options.allowFlatten = !valueTransition.type && !valueTransition.ease;
/**
* If we can or must skip creating the animation, and apply only
* the final keyframe, do so. We also check once keyframes are resolved but
* this early check prevents the need to create an animation at all.
*/
if (shouldSkip && !isHandoff && value.get() !== undefined) {
const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
if (finalKeyframe !== undefined) {
frame.update(() => {
options.onUpdate(finalKeyframe);
options.onComplete();
});
return;
}
}
return valueTransition.isSync
? new JSAnimation(options)
: new AsyncMotionValueAnimation(options);
};
const MIN_LAYOUT_DISTANCE = 20;
function bezierPoint(t, origin, control, target) {
const inv = 1 - t;
return inv * inv * origin + 2 * inv * t * control + t * t * target;
}
function bezierTangentAngle(t, originX, controlX, targetX, originY, controlY, targetY) {
const dx = 2 * (1 - t) * (controlX - originX) + 2 * t * (targetX - controlX);
const dy = 2 * (1 - t) * (controlY - originY) + 2 * t * (targetY - controlY);
return Math.atan2(dy, dx) * (180 / Math.PI);
}
function computeArcControlPoint(fromX, fromY, toX, toY, strength, peak) {
const deltaX = toX - fromX;
const deltaY = toY - fromY;
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
if (distance > 0) {
const normalPerpX = -deltaY / distance;
const normalPerpY = deltaX / distance;
const desiredHeight = strength * distance;
return {
x: fromX + deltaX * peak + normalPerpX * desiredHeight,
y: fromY + deltaY * peak + normalPerpY * desiredHeight,
};
}
return { x: fromX, y: fromY };
}
/**
* The pure sampling factory: `(from, to) => (t) => point`. Internal —
* used by {@link arc} and the unit tests. Not part of the public surface.
*/
function createArcPath({ strength = 0.5, peak = 0.5, direction, rotate = false, } = {}) {
const rotationScale = rotate === true ? 1 : typeof rotate === "number" ? rotate : 0;
// Auto-direction only: persists across calls to flip the bulge back
// onto the same screen side when the dominant axis changes between
// calls. Reuse the factory (module scope / useMemo) to keep this alive.
let prevBulgeSign;
const createInterpolator = (from, to) => {
const dx = to.x - from.x;
const dy = to.y - from.y;
let signed;
if (direction === "cw") {
signed = -strength;
}
else if (direction === "ccw") {
signed = strength;
}
else {
const dom = Math.abs(dx) >= Math.abs(dy) ? dx : dy;
signed = dom < 0 ? -strength : strength;
}
let control = computeArcControlPoint(from.x, from.y, to.x, to.y, signed, peak);
if (direction === undefined) {
const isVertical = Math.abs(dx) < Math.abs(dy);
const midX = from.x + dx * peak;
const midY = from.y + dy * peak;
const bulgeSign = isVertical
? Math.sign(control.x - midX)
: Math.sign(control.y - midY);
if (prevBulgeSign !== undefined &&
bulgeSign !== 0 &&
bulgeSign !== prevBulgeSign) {
signed = -signed;
control = computeArcControlPoint(from.x, from.y, to.x, to.y, signed, peak);
}
else if (bulgeSign !== 0) {
prevBulgeSign = bulgeSign;
}
}
const tangent0 = rotationScale
? bezierTangentAngle(0, from.x, control.x, to.x, from.y, control.y, to.y)
: 0;
const tangent1 = rotationScale
? bezierTangentAngle(1, from.x, control.x, to.x, from.y, control.y, to.y)
: 0;
const tangentDelta = rotationScale
? motionUtils.wrap(-180, 180, tangent1 - tangent0)
: 0;
return (t) => {
const out = {
x: bezierPoint(t, from.x, control.x, to.x),
y: bezierPoint(t, from.y, control.y, to.y),
};
if (rotationScale) {
const raw = bezierTangentAngle(t, from.x, control.x, to.x, from.y, control.y, to.y);
const baseline = tangent0 + tangentDelta * t;
out.rotate = motionUtils.wrap(-180, 180, raw - baseline) * rotationScale;
}
return out;
};
};
return createInterpolator;
}
/**
* Creates a curved path for `transition.path`:
*
* ```ts
*
* ```
*
* Reuse the returned value (module scope / useMemo / useRef) so its
* continuity closure survives re-renders — a fresh `arc()` has no memory.
*/
function arc(options = {}) {
const sample = createArcPath(options);
const path = {
interpolateProjection(delta) {
// `from` is the current translate offset (carries any in-flight
// displacement when interrupted); `to` is the new layout origin.
// The distance floor avoids visible wobble on tiny shifts.
const tx = delta.x.translate;
const ty = delta.y.translate;
if (Math.sqrt(tx * tx + ty * ty) < MIN_LAYOUT_DISTANCE) {
return undefined;
}
return sample({ x: tx, y: ty }, { x: 0, y: 0 });
},
animateValues(getValue, target, transition, delay, animations) {
if (!("x" in target || "y" in target))
return;
const xValue = getValue("x");
const yValue = getValue("y");
const xRaw = target.x;
const yRaw = target.y;
const xFrom = (Array.isArray(xRaw) && xRaw[0] != null
? xRaw[0]
: xValue?.get()) ?? 0;
const yFrom = (Array.isArray(yRaw) && yRaw[0] != null
? yRaw[0]
: yValue?.get()) ?? 0;
const xTo = (Array.isArray(xRaw)
? xRaw[xRaw.length - 1]
: xRaw ?? xFrom);
const yTo = (Array.isArray(yRaw)
? yRaw[yRaw.length - 1]
: yRaw ?? yFrom);
// Interruption needs no flag: x/y already hold the displaced
// mid-arc position, so xFrom/yFrom carry the continuity geometry.
const interpolate = sample({ x: xFrom, y: yFrom }, { x: xTo, y: yTo });
// Drive a dedicated `pathRotation` value (composed onto `rotate`
// at the build sites) rather than `rotate` itself, so a
// concurrent rotate animation composes and nothing accumulates
// on interrupt.
const pathRotationValue = interpolate(0).rotate !== undefined
? getValue("pathRotation")
: undefined;
const pathTransition = {
delay,
...getValueTransition(transition || {}, "x"),
};
delete pathTransition.path;
const progress = motionValue(0);
progress.start(animateMotionValue("", progress, [0, 1000], {
...pathTransition,
isSync: true,
velocity: 0,
onUpdate: (latest) => {
const point = interpolate(latest / 1000);
xValue?.set(point.x);
yValue?.set(point.y);
if (pathRotationValue && point.rotate !== undefined) {
pathRotationValue.set(point.rotate);
}
},
onComplete: () => {
xValue?.set(xTo);
yValue?.set(yTo);
pathRotationValue?.set(0);
},
// Interrupt/cancel must clear our additive contribution
// so it can't linger on top of the user's `rotate`.
onStop: () => pathRotationValue?.set(0),
onCancel: () => pathRotationValue?.set(0),
}));
if (progress.animation) {
animations.push(progress.animation);
}
delete target.x;
delete target.y;
},
};
return path;
}
/**
* Parse Framer's special CSS variable format into a CSS token and a fallback.
*
* ```
* `var(--foo, #fff)` => [`--foo`, '#fff']
* ```
*
* @param current
*/
const splitCSSVariableRegex =
// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;
function parseCSSVariable(current) {
const match = splitCSSVariableRegex.exec(current);
if (!match)
return [,];
const [, token1, token2, fallback] = match;
return [`--${token1 ?? token2}`, fallback];
}
const maxDepth = 4;
function getVariableValue(current, element, depth = 1) {
motionUtils.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`, "max-css-var-depth");
const [token, fallback] = parseCSSVariable(current);
// No CSS variable detected
if (!token)
return;
// Attempt to read this CSS variable off the element
const resolved = window.getComputedStyle(element).getPropertyValue(token);
if (resolved) {
const trimmed = resolved.trim();
return motionUtils.isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
}
return isCSSVariableToken(fallback)
? getVariableValue(fallback, element, depth + 1)
: fallback;
}
function getValueState(visualElement) {
const state = [{}, {}];
visualElement?.values.forEach((value, key) => {
state[0][key] = value.get();
state[1][key] = value.getVelocity();
});
return state;
}
function resolveVariantFromProps(props, definition, custom, visualElement) {
const resolveFunction = (def) => typeof def === "function"
? def(custom !== undefined ? custom : props.custom, ...getValueState(visualElement))
: def;
/**
* Resolve a function, then a variant label (which the function may have
* returned), then a function again as the label may point to one. The
* final function can only return a target object.
*/
definition = resolveFunction(definition);
if (typeof definition === "string") {
definition = props.variants && props.variants[definition];
}
return resolveFunction(definition);
}
function resolveVariant(visualElement, definition, custom) {
return resolveVariantFromProps(visualElement.getProps(), definition, custom, visualElement);
}
/**
* Exit variants resolve with AnimatePresence's custom, every other type
* with the element's own.
*/
const getTypeCustom = (visualElement, type) => type === "exit" ? visualElement.presenceContext?.custom : undefined;
const positionalKeys = new Set([
"width",
"height",
"top",
"left",
"right",
"bottom",
...transformPropOrder,
]);
const isKeyframesTarget = (v) => {
return Array.isArray(v);
};
/**
* Set VisualElement's MotionValue, creating a new MotionValue for it if
* it doesn't exist.
*/
function setMotionValue(visualElement, key, value) {
if (visualElement.hasValue(key)) {
visualElement.getValue(key).set(value);
}
else {
visualElement.addValue(key, motionValue(value));
}
}
function resolveFinalValueInKeyframes(v) {
// TODO maybe throw if v.length - 1 is placeholder token?
return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
}
function setTarget(visualElement, definition) {
const resolved = resolveVariant(visualElement, definition);
let { transitionEnd = {}, transition = {}, ...target } = resolved || {};
target = { ...target, ...transitionEnd };
for (const key in target) {
const value = resolveFinalValueInKeyframes(target[key]);
setMotionValue(visualElement, key, value);
}
}
const isMotionValue = (value) => Boolean(value && value.getVelocity);
function isWillChangeMotionValue(value) {
return Boolean(isMotionValue(value) && value.add);
}
function addValueToWillChange(visualElement, key) {
const willChange = visualElement.getValue("willChange");
/**
* It could be that a user has set willChange to a regular MotionValue,
* in which case we can't add the value to it.
*/
if (isWillChangeMotionValue(willChange)) {
return willChange.add(key);
}
else if (!willChange && motionUtils.MotionGlobalConfig.WillChange) {
const newWillChange = new motionUtils.MotionGlobalConfig.WillChange("auto");
visualElement.addValue("willChange", newWillChange);
newWillChange.add(key);
}
}
function camelToDash(str) {
return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
}
const optimizedAppearDataId = "framerAppearId";
const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
function getOptimisedAppearId(visualElement) {
return visualElement.props[optimizedAppearDataAttribute];
}
const isBrowser$1 = typeof window !== "undefined";
/**
* Decide whether we should block this animation. Previously, we achieved this
* just by checking whether the key was listed in protectedKeys, but this
* posed problems if an animation was triggered by afterChildren and protectedKeys
* had been set to true in the meantime.
*/
function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
const shouldBlock = key in protectedKeys && !needsAnimating[key];
needsAnimating[key] = false;
return shouldBlock;
}
function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) {
let { transition, transitionEnd, ...target } = targetAndTransition;
const defaultTransition = visualElement.getDefaultTransition();
transition = transition
? resolveTransition(transition, defaultTransition)
: defaultTransition;
const reduceMotion = transition?.reduceMotion;
const skipAnimations = transition?.skipAnimations;
if (transitionOverride)
transition = transitionOverride;
const animations = [];
const animationTypeState = type && visualElement.animationState?.getState()[type];
const path = transition?.path;
if (path) {
// path mutates `target` to claim x/y; loop below skips them.
path.animateValues
? path.animateValues((key) => visualElement.getValue(key, visualElement.latestValues[key] ?? 0), target, transition, delay, animations)
: path.animateVisualElement?.(visualElement, target, transition, delay, animations);
}
for (const key in target) {
const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
const valueTarget = target[key];
if (valueTarget === undefined ||
(animationTypeState &&
shouldBlockAnimation(animationTypeState, key))) {
continue;
}
const valueTransition = {
delay,
...getValueTransition(transition || {}, key),
};
if (skipAnimations)
valueTransition.skipAnimations = true;
/**
* If the value is already at the defined target, skip the animation.
* We still re-assert the value via frame.update to take precedence
* over any stale transitionEnd callbacks from previous animations.
*/
const currentValue = value.get();
if (currentValue !== undefined &&
!value.isAnimating() &&
!Array.isArray(valueTarget) &&
valueTarget === currentValue &&
!valueTransition.velocity) {
frame.update(() => value.set(valueTarget));
continue;
}
/**
* If this is the first time a value is being animated, check
* to see if we're handling off from an existing animation.
*/
let isHandoff = false;
if (isBrowser$1 && window.MotionHandoffAnimation) {
const appearId = getOptimisedAppearId(visualElement);
if (appearId) {
const startTime = window.MotionHandoffAnimation(appearId, key, frame);
if (startTime !== null) {
valueTransition.startTime = startTime;
isHandoff = true;
}
}
}
addValueToWillChange(visualElement, key);
const shouldReduceMotion = reduceMotion ?? visualElement.shouldReduceMotion;
value.start(animateMotionValue(key, value, valueTarget, shouldReduceMotion && positionalKeys.has(key)
? { type: false }
: valueTransition, visualElement, isHandoff));
const animation = value.animation;
if (animation) {
animations.push(animation);
}
}
if (transitionEnd) {
const applyTransitionEnd = () => frame.update(() => {
transitionEnd && setTarget(visualElement, transitionEnd);
});
if (animations.length) {
Promise.all(animations).then(applyTransitionEnd);
}
else {
applyTransitionEnd();
}
}
return animations;
}
function animateVariant(visualElement, variant, options = {}) {
const resolved = resolveVariant(visualElement, variant, getTypeCustom(visualElement, options.type));
const transition = options.transitionOverride ||
(resolved?.transition ?? (visualElement.getDefaultTransition() || {}));
const getAnimation = () => Promise.all(resolved ? animateTarget(visualElement, resolved, options) : []);
const getChildAnimations = (delay = 0) => {
const { variantChildren } = visualElement;
const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
const animations = [];
variantChildren?.forEach((child) => {
child.notify("AnimationStart", variant);
animations.push(animateVariant(child, variant, {
...options,
delay: delay +
(typeof delayChildren === "function"
? 0
: delayChildren) +
calcChildStagger(variantChildren, child, delayChildren, staggerChildren, staggerDirection),
}).then(() => child.notify("AnimationComplete", variant)));
});
return Promise.all(animations);
};
/**
* when: "beforeChildren" | "afterChildren" runs this element's animation
* and its children's in sequence.
*/
const { when } = transition;
return when
? when === "beforeChildren"
? getAnimation().then(() => getChildAnimations())
: getChildAnimations().then(getAnimation)
: Promise.all([getAnimation(), getChildAnimations(options.delay)]);
}
function animateVisualElement(visualElement, definition, options = {}) {
visualElement.notify("AnimationStart", definition);
const animation = Array.isArray(definition)
? Promise.all(definition.map((variant) => animateVariant(visualElement, variant, options)))
: typeof definition === "string"
? animateVariant(visualElement, definition, options)
: Promise.all(animateTarget(visualElement, resolveVariant(visualElement, definition, options.custom), options));
return animation.then(() => {
visualElement.notify("AnimationComplete", definition);
});
}
/**
* ValueType for "auto"
*/
const auto = {
test: (v) => v === "auto",
parse: (v) => v,
};
/**
* Tests a provided value against a ValueType
*/
const testValueType = (v) => (type) => type.test(v);
/**
* A list of value types commonly used for dimensions
*/
const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
/**
* Tests a dimensional value against the list of dimension ValueTypes
*/
const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
function isNone(value) {
if (typeof value === "number") {
return value === 0;
}
else if (value !== null) {
return value === "none" || value === "0" || motionUtils.isZeroValueString(value);
}
else {
return true;
}
}
/**
* If we encounter keyframes like "none" or "0" and we also have keyframes like
* "#fff" or "200px 200px" we want to find a keyframe to serve as a template for
* the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into
* zero equivalents, i.e. "#fff0" or "0px 0px".
*/
const invalidTemplates = new Set(["auto", "none", "0"]);
function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
let i = 0;
let animatableTemplate = undefined;
while (i < unresolvedKeyframes.length && !animatableTemplate) {
const keyframe = unresolvedKeyframes[i];
if (typeof keyframe === "string" &&
!invalidTemplates.has(keyframe) &&
hasComplexValues(keyframe)) {
animatableTemplate = unresolvedKeyframes[i];
}
i++;
}
if (animatableTemplate && name) {
for (const noneIndex of noneKeyframeIndexes) {
/**
* A zero-valued template like "0%" is already its own
* animatable none, so there's nothing to derive.
*/
if (unresolvedKeyframes[noneIndex] === animatableTemplate)
continue;
unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
}
}
}
class DOMKeyframesResolver extends KeyframeResolver {
constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {
super(unresolvedKeyframes, onComplete, name, motionValue, element, true);
}
/**
* Keyframes that don't need reading from the DOM, or measuring,
* resolve straight away rather than in the frame loop's batched read.
*/
scheduleResolve() {
if (this.canReadNow()) {
this.readKeyframes();
if (!this.needsMeasurement)
return this.complete();
}
super.scheduleResolve();
}
canReadNow() {
const { unresolvedKeyframes, element, motionValue } = this;
const origin = unresolvedKeyframes[0] ?? motionValue?.get();
if (!element?.current || origin === undefined)
return false;
for (let i = 0; i < unresolvedKeyframes.length; i++) {
if (containsCSSVariable(i ? unresolvedKeyframes[i] : origin)) {
return false;
}
}
return true;
}
readKeyframes() {
const { unresolvedKeyframes, element, name } = this;
if (!element || !element.current)
return;
super.readKeyframes();
/**
* If any keyframe is a CSS variable, we need to find its value by sampling the element
*/
for (let i = 0; i < unresolvedKeyframes.length; i++) {
let keyframe = unresolvedKeyframes[i];
if (typeof keyframe === "string") {
keyframe = keyframe.trim();
if (isCSSVariableToken(keyframe)) {
const resolved = getVariableValue(keyframe, element.current);
if (resolved !== undefined) {
unresolvedKeyframes[i] = resolved;
}
if (i === unresolvedKeyframes.length - 1) {
this.finalKeyframe = keyframe;
}
}
}
}
/**
* Resolve "none" values. We do this potentially twice - once before and once after measuring keyframes.
* This could be seen as inefficient but it's a trade-off to avoid measurements in more situations, which
* have a far bigger performance impact.
*/
this.resolveNoneKeyframes();
/**
* Check to see if unit type has changed. If so schedule jobs that will
* temporarily set styles to the destination keyframes.
* Skip if we have more than two keyframes or this isn't a positional value.
* TODO: We can throw if there are multiple keyframes and the value type changes.
*/
if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) {
return;
}
const [origin, target] = unresolvedKeyframes;
// Two numbers share a unit, so skip the value type search.
if (typeof origin === "number" && typeof target === "number")
return;
const originType = findDimensionValueType(origin);
const targetType = findDimensionValueType(target);
/**
* If one keyframe contains embedded CSS variables (e.g. in calc()) and the other
* doesn't, we need to measure to convert to pixels. This handles GitHub issue #3410.
*/
const originHasVar = containsCSSVariable(origin);
const targetHasVar = containsCSSVariable(target);
if (originHasVar !== targetHasVar && positionalValues[name]) {
this.needsMeasurement = true;
return;
}
/**
* Either we don't recognise these value types or we can animate between them.
*/
if (originType === targetType)
return;
/**
* If both values are numbers or pixels, we can animate between them by
* converting them to numbers.
*/
if (isNumOrPxType(originType) && isNumOrPxType(targetType)) {
for (let i = 0; i < unresolvedKeyframes.length; i++) {
const value = unresolvedKeyframes[i];
if (typeof value === "string") {
unresolvedKeyframes[i] = parseFloat(value);
}
}
}
else if (positionalValues[name]) {
/**
* Else, the only way to resolve this is by measuring the element.
*/
this.needsMeasurement = true;
}
}
resolveNoneKeyframes() {
const { unresolvedKeyframes, name } = this;
const noneKeyframeIndexes = [];
for (let i = 0; i < unresolvedKeyframes.length; i++) {
if (unresolvedKeyframes[i] === null ||
isNone(unresolvedKeyframes[i])) {
noneKeyframeIndexes.push(i);
}
}
if (noneKeyframeIndexes.length) {
makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name);
}
}
measure() {
const { element, name } = this;
return positionalValues[name](window.getComputedStyle(element.current), () => element.measureViewportBox());
}
measureInitialState() {
const { element, unresolvedKeyframes, name } = this;
if (!element || !element.current)
return;
if (name === "height") {
this.suspendedScrollY = window.pageYOffset;
}
this.measuredOrigin = this.measure();
unresolvedKeyframes[0] = this.measuredOrigin;
// Set final key frame to measure after next render
const measureKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
if (measureKeyframe !== undefined) {
this.motionValue?.jump(measureKeyframe, false);
}
}
measureEndState() {
const { element, unresolvedKeyframes } = this;
if (!element || !element.current)
return;
this.motionValue?.jump(this.measuredOrigin, false);
const finalKeyframeIndex = unresolvedKeyframes.length - 1;
const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex];
unresolvedKeyframes[finalKeyframeIndex] = this.measure();
if (finalKeyframe !== null && this.finalKeyframe === undefined) {
this.finalKeyframe = finalKeyframe;
}
// If we removed transform values, reapply them before the next render
if (this.removedTransforms?.length) {
this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
element
.getValue(unsetTransformName)
.set(unsetTransformValue);
});
}
this.resolveNoneKeyframes();
}
}
/**
* The four corner-radius longhands. Shared so the projection mixer, scale
* corrector, WAAPI px-value set and view-transition crop pass don't each carry
* their own copy. Order is irrelevant - every consumer mixes/corrects/animates
* each corner independently.
*/
const cornerRadiusProps = [
"borderTopLeftRadius",
"borderTopRightRadius",
"borderBottomRightRadius",
"borderBottomLeftRadius",
];
const pxValues = new Set([
// Border props
"borderWidth",
"borderTopWidth",
"borderRightWidth",
"borderBottomWidth",
"borderLeftWidth",
"borderRadius",
...cornerRadiusProps,
// Positioning props
"width",
"maxWidth",
"height",
"maxHeight",
"top",
"right",
"bottom",
"left",
"inset",
"insetBlock",
"insetBlockStart",
"insetBlockEnd",
"insetInline",
"insetInlineStart",
"insetInlineEnd",
// Spacing props
"padding",
"paddingTop",
"paddingRight",
"paddingBottom",
"paddingLeft",
"paddingBlock",
"paddingBlockStart",
"paddingBlockEnd",
"paddingInline",
"paddingInlineStart",
"paddingInlineEnd",
"margin",
"marginTop",
"marginRight",
"marginBottom",
"marginLeft",
"marginBlock",
"marginBlockStart",
"marginBlockEnd",
"marginInline",
"marginInlineStart",
"marginInlineEnd",
// Typography
"fontSize",
// Misc
"backgroundPositionX",
"backgroundPositionY",
]);
function applyPxDefaults(keyframes, name) {
for (let i = 0; i < keyframes.length; i++) {
if (typeof keyframes[i] === "number" && pxValues.has(name)) {
keyframes[i] = keyframes[i] + "px";
}
}
}
function isWaapiSupportedEasing(easing) {
return Boolean((typeof easing === "function" && supportsLinearEasing()) ||
!easing ||
(typeof easing === "string" &&
(easing in supportedWaapiEasing || supportsLinearEasing())) ||
motionUtils.isBezierDefinition(easing) ||
(Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
}
const supportsPartialKeyframes = /*@__PURE__*/ motionUtils.memo(() => {
try {
document.createElement("div").animate({ opacity: [1] });
}
catch (e) {
return false;
}
return true;
});
/**
* Effects registered via `animate.addEffect()`, most recent first.
*/
const effects = [];
function addEffect(effect) {
motionUtils.invariant(typeof effect.test === "function" && typeof effect.read === "function", "Effects passed to animate.addEffect() need test() and read().", "effect-missing-test");
removeEffect(effect);
effects.unshift(effect);
}
function removeEffect(effect) {
motionUtils.removeItem(effects, effect);
}
function findEffect(subject) {
return effects.find((effect) => effect.test(subject));
}
/**
* Animate each key in `keyframes` on the motion value `getValue` returns
* for it. `element` is what the keyframe resolver uses to read, render
* and measure the subject when the effect defers resolution to it.
*/
function animateValues(getValue, keyframes, transition = {}, element) {
const animations = [];
const { velocity, path } = transition;
const reduceMotion = transition.reduceMotion ?? element?.shouldReduceMotion;
/**
* Only elements have x/y to move along a path. path claims them by
* deleting them, so hand it a copy.
*/
if (path?.animateValues && element) {
keyframes = { ...keyframes };
path.animateValues(getValue, keyframes, transition, 0, animations);
}
for (const key in keyframes) {
if (key === "transition" || key === "transitionEnd")
continue;
const target = keyframes[key];
if (target === undefined)
continue;
const value = getValue(key);
/**
* If the value is already at the defined target, skip the animation.
* We still re-assert the value via frame.update to take precedence
* over any stale transitionEnd callbacks from previous animations.
*/
const current = value.get();
if (current !== undefined &&
!value.isAnimating() &&
!Array.isArray(target) &&
target === current &&
!velocity) {
frame.update(() => value.set(target));
continue;
}
value.start(animateMotionValue(key, value, target, reduceMotion && positionalKeys.has(key)
? { type: false }
: transition, element));
value.animation &&
animations.push(value.animation);
}
const { transitionEnd } = keyframes;
if (transitionEnd) {
const applyTransitionEnd = () => frame.update(() => {
for (const key in transitionEnd) {
getValue(key).set(transitionEnd[key]);
}
});
animations.length
? Promise.all(animations).then(applyTransitionEnd)
: applyTransitionEnd();
}
return animations;
}
/**
* Animate the keys of `subject` via `effect`. Motion values are created on
* first animation and bound to the subject through the effect for the
* rest of its life.
*
* Without `element`, a new value is seeded synchronously from the first
* keyframe or `effect.read()`. With it, the value starts undefined and the
* keyframe resolver reads the subject (batched, with unit conversion by
* measurement) via `element`.
*/
function animateEffectSubject(effect, subject, keyframes, transition, element) {
return animateValues((key) => {
let value = effect.get(subject, key);
if (!value) {
let initial;
if (!element) {
const target = keyframes[key];
initial =
firstKeyframe(target) ??
effect.read(subject, key, target);
motionUtils.invariant(initial !== undefined, `"${key}" can't be read from the animated subject. Provide [from, to] keyframes.`, "effect-unreadable-value");
}
value = motionValue(initial, { owner: element });
effect(subject, { [key]: value });
}
return value;
}, keyframes, transition, element);
}
function firstKeyframe(target) {
const first = Array.isArray(target) ? target[0] : undefined;
return first === null ? undefined : first;
}
/**
* Checks if an element is an HTML element in a way
* that works across iframes
*/
function isHTMLElement(element) {
return (motionUtils.isObject(element) &&
"offsetHeight" in element &&
!("ownerSVGElement" in element));
}
/**
* Checks if an element is an SVG element in a way
* that works across iframes
*/
function isSVGElement(element) {
return motionUtils.isObject(element) && "ownerSVGElement" in element;
}
function resolveElements(elementOrSelector, scope, selectorCache) {
if (elementOrSelector == null) {
return [];
}
if (elementOrSelector instanceof EventTarget) {
return [elementOrSelector];
}
else if (typeof elementOrSelector === "string") {
let root = document;
if (scope) {
root = scope.current;
}
const elements = selectorCache?.[elementOrSelector] ??
root.querySelectorAll(elementOrSelector);
return elements ? Array.from(elements) : [];
}
return Array.from(elementOrSelector).filter((element) => element != null);
}
function createSelectorEffect(subjectEffect) {
const effect = (subject, values) => {
const elements = resolveElements(subject);
const subscriptions = [];
for (const element of elements) {
const remove = subjectEffect(element, values);
subscriptions.push(remove);
}
return () => {
for (const remove of subscriptions)
remove();
};
};
const { test, read, get, flush, state } = subjectEffect;
return Object.assign(effect, {
test,
read,
get: get,
flush,
state,
});
}
class MotionValueState {
/**
* @param step - The frameloop step renders are scheduled in. Defaults
* to `frame.render`. Effects that feed a render loop running in
* `frame.render` (GPU scenes) should write in `frame.preRender`.
*/
constructor(step = frame.render) {
this.step = step;
this.values = new Map();
/**
* Renders scheduled for the next flush, usually one or two (values
* bound to the same computed render, e.g. `x` and `y` to `transform`,
* share an entry). Tracked with a count rather than truncating the
* array so no backing store is reallocated every frame. Kept per
* state so pending writes can be flushed synchronously before the
* subject is measured.
*/
this.pending = [];
this.numPending = 0;
/**
* Run the pending renders. Resetting the count first means a render
* scheduled while flushing lands in the next frame, as with the
* frameloop itself.
*/
this.flush = () => {
const { pending, numPending } = this;
this.numPending = 0;
for (let i = 0; i < numPending; i++)
pending[i]();
};
}
/**
* @param render - Writes the value to the subject. Renders read the
* motion value directly rather than a cached copy, so there is one
* place a value lives.
* @param computed - A value already in this state (e.g. `transform`)
* whose render should run whenever `value` changes.
*/
set(name, value, render, computed) {
this.values.get(name)?.onRemove();
if (computed) {
for (const entry of this.values.values()) {
if (entry.value === computed)
render = entry.render;
}
}
const onChange = () => render && this.schedule(render);
/**
* Values created ahead of a DOM read start out undefined and
* have nothing to render until they're set.
*/
value.get() !== undefined && onChange();
const cancelOnChange = value.on("change", onChange);
const onRemove = () => {
cancelOnChange();
render && !computed && this.cancel(render);
/**
* A later set() of the same name has already removed this
* entry, so leave the one that replaced it.
*/
this.values.get(name)?.onRemove === onRemove &&
this.values.delete(name);
};
this.values.set(name, {
value,
render: computed ? undefined : render,
onRemove,
});
return onRemove;
}
get(name) {
return this.values.get(name)?.value;
}
/**
* Detach every value from this state and return them, so another
* renderer can take them over. The state stays cached by its effect,
* so the bound transforms are reset too rather than leaking into
* values bound later.
*/
release() {
const values = new Map();
this.values.forEach((entry, name) => {
values.set(name, entry.value);
entry.onRemove();
});
this.transformKeys = this.transformValues = undefined;
return values;
}
schedule(render) {
const { pending, numPending } = this;
for (let i = 0; i < numPending; i++) {
if (pending[i] === render)
return;
}
numPending || this.step(this.flush);
pending[this.numPending++] = render;
}
cancel(render) {
const { pending } = this;
for (let i = 0; i < this.numPending; i++) {
if (pending[i] === render) {
pending[i] = pending[--this.numPending];
return;
}
}
}
}
function createEffect(addValue, { step, ...options } = {}) {
const stateCache = new WeakMap();
const effect = (subject, values) => {
const state = stateCache.get(subject) ?? new MotionValueState(step);
stateCache.set(subject, state);
const subscriptions = [];
for (const key in values) {
const value = values[key];
const remove = addValue(subject, state, key, value);
subscriptions.push(remove);
}
return () => {
for (const cancel of subscriptions)
cancel();
};
};
return Object.assign(effect, options, {
get: (subject, key) => stateCache.get(subject)?.get(key),
flush: (subject) => stateCache.get(subject)?.flush(),
state: (subject) => stateCache.get(subject),
});
}
/**
* Cache of `translateX(`-style openers so each render is a few string
* concatenations rather than a template per transform.
*/
const openers = {};
function buildTransform(state) {
let transform = "";
const { transformKeys: keys = [], transformValues: values = {} } = state;
/**
* Loop over the bound transforms in order, adding the ones that
* aren't at their default value to the transform string.
*/
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
const value = values[key].getCurrent();
if (value === undefined)
continue;
const parsed = typeof value === "number" ? value : parseFloat(value);
if (parsed !== (key.startsWith("scale") ? 1 : 0)) {
transform +=
(transform && " ") +
(openers[key] ||
(openers[key] = (translateAlias[key] || key) + "(")) +
getValueAsType(value, transformValueTypes[key]) +
")";
}
}
// See build-transform.ts: additive `rotate()` so user `rotate` isn't
// clobbered. Not a `transformPropOrder` slot.
const pathRotation = state.get("pathRotation")?.get();
if (pathRotation) {
transform +=
(transform && " ") +
"rotate(" +
getValueAsType(pathRotation, transformValueTypes.pathRotation) +
")";
}
return transform || "none";
}
const originProps = new Set(["originX", "originY", "originZ"]);
/**
* A bound value in its default unit, e.g. `originX: 50` -> `"50%"`.
*/
const styleValue = (state, key) => getValueAsType(state.get(key)?.get(), numberValueTypes[key]);
const addStyleValue = (element, state, key, value) => {
let render = undefined;
let computed = undefined;
if (transformProps.has(key)) {
if (key !== "pathRotation") {
const keys = (state.transformKeys ?? (state.transformKeys = []));
(state.transformValues ?? (state.transformValues = {}))[key] = value;
if (!keys.includes(key)) {
keys.push(key);
keys.sort((a, b) => transformPropOrder.indexOf(a) -
transformPropOrder.indexOf(b));
}
}
if (!state.get("transform")) {
// If this is an HTML element, we need to set the transform-box to fill-box
// to normalise the transform relative to the element's bounding box
if (!isHTMLElement(element) && !state.get("transformBox")) {
addStyleValue(element, state, "transformBox", new MotionValue("fill-box"));
}
state.set("transform", new MotionValue("none"), () => {
transformGroups.get(element)?.check();
element.style.transform = buildTransform(state);
});
}
computed = state.get("transform");
}
else if (originProps.has(key)) {
if (!state.get("transformOrigin")) {
state.set("transformOrigin", new MotionValue(""), () => {
const originX = styleValue(state, "originX") ?? "50%";
const originY = styleValue(state, "originY") ?? "50%";
const originZ = styleValue(state, "originZ") ?? 0;
element.style.transformOrigin = `${originX} ${originY} ${originZ}`;
});
}
computed = state.get("transformOrigin");
}
else if (isCSSVar(key)) {
render = () => {
element.style.setProperty(key, value.getCurrent());
};
}
else {
render = () => {
element.style[key] = getValueAsType(value.getCurrent(), numberValueTypes[key]);
};
}
return state.set(key, value, render, computed);
};
const isStyleSubject = (subject) => isHTMLElement(subject) || isSVGElement(subject);
/**
* Reads the current value of a style from the element, as the initial
* keyframe when `animate()` targets an element via this effect. Transforms
* are parsed out of the computed matrix; everything else is the computed
* style. Units aren't converted to match the target keyframes. A style
* the browser can't report is 0, as a VisualElement reports it.
*/
const readStyleValue = (element, key) => {
if (transformProps.has(key)) {
return readTransformValue(element, key);
}
const computedStyle = getComputedStyle(element);
const value = isCSSVar(key)
? computedStyle.getPropertyValue(key)
: computedStyle[key];
return (typeof value === "string" && value.trim()) || 0;
};
/**
* The per-element effect `animate()` binds through, so HTML values share
* state with a direct `styleEffect()` call. The exported `styleEffect`
* is this wrapped to also accept selectors.
*/
const styleSubjectEffect = /*@__PURE__*/ createEffect(addStyleValue, {
test: isStyleSubject,
read: readStyleValue,
});
const styleEffect =
/*@__PURE__*/ createSelectorEffect(styleSubjectEffect);
function buildHTMLStyles(state, latestValues, transformTemplate) {
const { style, vars, transformOrigin } = state;
// Track whether we encounter any transform or transformOrigin values.
let hasTransform = false;
let hasTransformOrigin = false;
/**
* Loop over all our latest animated values and decide whether to handle them
* as a style or CSS variable.
*
* Transforms and transform origins are kept separately for further processing.
*/
for (const key in latestValues) {
const value = latestValues[key];
if (transformProps.has(key)) {
// If this is a transform, flag to enable further transform processing
hasTransform = true;
continue;
}
else if (isCSSVariableName(key)) {
vars[key] = value;
continue;
}
else {
// Convert the value to its default value type, ie 0 -> "0px"
const valueAsType = getValueAsType(value, numberValueTypes[key]);
if (key.startsWith("origin")) {
// If this is a transform origin, flag and enable further transform-origin processing
hasTransformOrigin = true;
transformOrigin[key] =
valueAsType;
}
else {
style[key] = valueAsType;
}
}
}
if (!latestValues.transform) {
if (hasTransform || transformTemplate) {
style.transform = buildTransform$1(latestValues, state.transform, transformTemplate);
}
else if (style.transform) {
/**
* If we have previously created a transform but currently don't have any,
* reset transform style to none.
*/
style.transform = "none";
}
}
/**
* Build a transformOrigin style. Uses the same defaults as the browser for
* undefined origins.
*/
if (hasTransformOrigin) {
const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin;
style.transformOrigin = `${originX} ${originY} ${originZ}`;
}
}
const dashKeys = {
offset: "stroke-dashoffset",
array: "stroke-dasharray",
};
const camelKeys = {
offset: "strokeDashoffset",
array: "strokeDasharray",
};
/**
* Build SVG path properties. Uses the path's measured length to convert
* our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
* and stroke-dasharray attributes.
*
* This function is mutative to reduce per-frame GC.
*
* Note: We use unitless values for stroke-dasharray and stroke-dashoffset
* because Safari incorrectly scales px values when the page is zoomed.
*/
function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
// Normalise path length by setting SVG attribute pathLength to 1
attrs.pathLength = 1;
// We use dash case when setting attributes directly to the DOM node and camel case
// when defining props on a React component.
const keys = useDashCase ? dashKeys : camelKeys;
// Build the dash offset (unitless to avoid Safari zoom bug)
attrs[keys.offset] = `${-offset}`;
// Build the dash array (unitless to avoid Safari zoom bug)
attrs[keys.array] = `${length} ${spacing}`;
}
/**
* Values rendered via style rather than as attributes. This must include
* every value WAAPI can accelerate, as WAAPI writes its final value to
* style, which would otherwise override later attribute writes.
*/
const cssStyleProperties = [
"transform",
"opacity",
"clipPath",
"filter",
"offsetDistance",
"offsetPath",
"offsetRotate",
"offsetAnchor",
];
/**
* Build SVG visual attributes, like cx and style.transform
*/
function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0,
// This is object creation, which we try to avoid per-frame.
...latest }, isSVGTag, transformTemplate, styleProp) {
buildHTMLStyles(state, latest, transformTemplate);
/**
* For svg tags we just want to make sure viewBox is animatable and treat all the styles
* as normal HTML tags.
*/
if (isSVGTag) {
if (state.style.viewBox) {
state.attrs.viewBox = state.style.viewBox;
}
return;
}
state.attrs = state.style;
state.style = {};
const { attrs, style } = state;
for (const key of cssStyleProperties) {
if (attrs[key] !== undefined) {
style[key] = attrs[key];
delete attrs[key];
}
}
if (style.transform || attrs.transformOrigin) {
style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
delete attrs.transformOrigin;
}
if (style.transform) {
/**
* SVG's element transform-origin uses its own median as a reference.
* Therefore, transformBox becomes a fill-box
*/
style.transformBox = styleProp?.transformBox ?? "fill-box";
delete attrs.transformBox;
}
// Render attrX/attrY/attrScale as attributes
if (attrX !== undefined)
attrs.x = attrX;
if (attrY !== undefined)
attrs.y = attrY;
if (attrScale !== undefined)
attrs.scale = attrScale;
// Build SVG path if one has been defined
if (pathLength !== undefined) {
buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
}
}
function canSetAsProperty(element, name) {
if (!(name in element))
return false;
const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), name) ||
Object.getOwnPropertyDescriptor(element, name);
// Check if it has a setter
return descriptor && typeof descriptor.set === "function";
}
/**
* `name` is the attribute written when it differs from the key the value
* is stored under, e.g. `attrX` -> `x`. Numbers take the attribute's
* default unit (`x: 100` -> `"100px"`), as they do when key and name match.
*/
const addAttrValue = (element, state, key, value, name = key) => {
const isProp = canSetAsProperty(element, name);
if (!isProp && (name.startsWith("data") || name.startsWith("aria"))) {
name = camelToDash(name);
}
const type = numberValueTypes[key] || numberValueTypes[name];
/**
* Set attribute directly via property if available
*/
const render = isProp
? () => {
element[name] = getValueAsType(value.get(), numberValueTypes[key]);
}
: () => {
const v = getValueAsType(value.get(), type);
if (v === null || v === undefined) {
element.removeAttribute(name);
}
else {
element.setAttribute(name, String(v));
}
};
return state.set(key, value, render);
};
const attrEffect = /*@__PURE__*/ createSelectorEffect(
/*@__PURE__*/ createEffect(addAttrValue));
function addSVGPathValue(element, state, key, value) {
frame.render(() => element.setAttribute("pathLength", "1"));
if (key === "pathOffset") {
return state.set(key, value, () => {
// Use unitless value to avoid Safari zoom bug
const offset = value.get();
element.setAttribute("stroke-dashoffset", `${-offset}`);
});
}
else {
if (!state.get("stroke-dasharray")) {
state.set("stroke-dasharray", new MotionValue("1 1"), () => {
const pathLength = state.get("pathLength")?.get() ?? 1;
const pathSpacing = state.get("pathSpacing")?.get();
// Use unitless values to avoid Safari zoom bug
element.setAttribute("stroke-dasharray", `${pathLength} ${pathSpacing ?? 1 - Number(pathLength)}`);
});
}
return state.set(key, value, undefined, state.get("stroke-dasharray"));
}
}
const addSVGValue = (element, state, key, value) => {
if (key.startsWith("path") && !transformProps.has(key)) {
return addSVGPathValue(element, state, key, value);
}
else if (key.startsWith("attr")) {
return addAttrValue(element, state, key, value, convertAttrKey(key));
}
/**
* Transforms and origins aren't CSS properties (bar `x`/`y` in some
* browsers), so check them by name rather than `key in element.style`.
*/
const handler = transformProps.has(key) ||
originProps.has(key) ||
isCSSVar(key) ||
key in element.style
? addStyleValue
: addAttrValue;
return handler(element, state, key, value);
};
/**
* Reads the current value of `key` from an SVG element as the origin of
* an animation, as the SVG VisualElement does: transforms start from
* their defaults, CSS variables and the few CSS-only properties come from
* computed style, falling back to the attribute when that's empty (e.g.
* the element isn't rendered), and everything else is read from the
* attribute, dash-cased (`strokeWidth` -> `stroke-width`) or, failing
* that, as written (`baseFrequency`).
*/
const readSVGValue = (element, key) => {
if (transformProps.has(key)) {
return numberValueTypes[key]?.default || 0;
}
if (isCSSVar(key) || cssStyleProperties.includes(key)) {
return (readStyleValue(element, key) ||
element.getAttribute(camelToDash(key)) ||
0);
}
key = convertAttrKey(key);
return (element.getAttribute(camelToDash(key)) ??
element.getAttribute(key) ??
undefined);
};
/**
* The per-element effect `animate()` binds through, so SVG values share
* state with a direct `svgEffect()` call.
*/
const svgSubjectEffect = /*@__PURE__*/ createEffect(addSVGValue, {
test: isSVGElement,
read: readSVGValue,
});
const svgEffect = /*@__PURE__*/ createSelectorEffect(svgSubjectEffect);
function convertAttrKey(key) {
return key.replace(/^attr([A-Z])/, (_, firstChar) => firstChar.toLowerCase());
}
/**
* Bounding boxes tend to be defined as top, left, right, bottom. For various operations
* it's easier to consider each axis individually. This function returns a bounding box
* as a map of single-axis min/max values.
*/
function convertBoundingBoxToBox({ top, left, right, bottom, }) {
return {
x: { min: left, max: right },
y: { min: top, max: bottom },
};
}
function convertBoxToBoundingBox({ x, y }) {
return { top: y.min, right: x.max, bottom: y.max, left: x.min };
}
/**
* Applies a TransformPoint function to a bounding box. TransformPoint is usually a function
* provided by Framer to allow measured points to be corrected for device scaling. This is used
* when measuring DOM elements and DOM event points.
*/
function transformBoxPoints(point, transformPoint) {
if (!transformPoint)
return point;
const topLeft = transformPoint({ x: point.left, y: point.top });
const bottomRight = transformPoint({ x: point.right, y: point.bottom });
return {
top: topLeft.y,
left: topLeft.x,
bottom: bottomRight.y,
right: bottomRight.x,
};
}
function isIdentityScale(scale) {
return scale === undefined || scale === 1;
}
function hasScale({ scale, scaleX, scaleY }) {
return (!isIdentityScale(scale) ||
!isIdentityScale(scaleX) ||
!isIdentityScale(scaleY));
}
function hasTransform(values) {
return (hasScale(values) ||
has2DTranslate(values) ||
values.z ||
values.rotate ||
values.rotateX ||
values.rotateY ||
values.rotateZ ||
values.skewX ||
values.skewY);
}
function has2DTranslate(values) {
return is2DTranslate(values.x) || is2DTranslate(values.y);
}
function is2DTranslate(value) {
return value && value !== "0%";
}
/**
* Scales a point based on a factor and an originPoint
*/
function scalePoint(point, scale, originPoint) {
const distanceFromOrigin = point - originPoint;
const scaled = scale * distanceFromOrigin;
return originPoint + scaled;
}
/**
* Applies a translate/scale delta to a point
*/
function applyPointDelta(point, translate, scale, originPoint, boxScale) {
if (boxScale !== undefined) {
point = scalePoint(point, boxScale, originPoint);
}
return scalePoint(point, scale, originPoint) + translate;
}
/**
* Applies a translate/scale delta to an axis
*/
function applyAxisDelta(axis, translate = 0, scale = 1, originPoint, boxScale) {
axis.min = applyPointDelta(axis.min, translate, scale, originPoint, boxScale);
axis.max = applyPointDelta(axis.max, translate, scale, originPoint, boxScale);
}
/**
* Applies a translate/scale delta to a box
*/
function applyBoxDelta(box, { x, y }) {
applyAxisDelta(box.x, x.translate, x.scale, x.originPoint);
applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);
}
const TREE_SCALE_SNAP_MIN = 0.999999999999;
const TREE_SCALE_SNAP_MAX = 1.0000000000001;
/**
* Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms
* in a tree upon our box before then calculating how to project it into our desired viewport-relative box
*
* This is the final nested loop within updateLayoutDelta for future refactoring
*/
function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
const treeLength = treePath.length;
if (!treeLength)
return;
// Reset the treeScale
treeScale.x = treeScale.y = 1;
let node;
let delta;
for (let i = 0; i < treeLength; i++) {
node = treePath[i];
delta = node.projectionDelta;
/**
* TODO: Prefer to remove this, but currently we have motion components with
* display: contents in Framer.
*/
const { visualElement } = node.options;
if (visualElement &&
visualElement.props.style &&
visualElement.props.style.display === "contents") {
continue;
}
if (isSharedTransition &&
node.options.layoutScroll &&
node.scroll &&
node !== node.root) {
translateAxis(box.x, -node.scroll.offset.x);
translateAxis(box.y, -node.scroll.offset.y);
}
if (delta) {
// Incorporate each ancestor's scale into a cumulative treeScale for this component
treeScale.x *= delta.x.scale;
treeScale.y *= delta.y.scale;
// Apply each ancestor's calculated delta into this component's recorded layout box
applyBoxDelta(box, delta);
}
if (isSharedTransition && hasTransform(node.latestValues)) {
transformBox(box, node.latestValues, node.layout?.layoutBox);
}
}
/**
* Snap tree scale back to 1 if it's within a non-perceivable threshold.
* This will help reduce useless scales getting rendered.
*/
if (treeScale.x < TREE_SCALE_SNAP_MAX &&
treeScale.x > TREE_SCALE_SNAP_MIN) {
treeScale.x = 1.0;
}
if (treeScale.y < TREE_SCALE_SNAP_MAX &&
treeScale.y > TREE_SCALE_SNAP_MIN) {
treeScale.y = 1.0;
}
}
function translateAxis(axis, distance) {
axis.min += distance;
axis.max += distance;
}
/**
* Apply a transform to an axis from the latest resolved motion values.
* This function basically acts as a bridge between a flat motion value map
* and applyAxisDelta
*/
function transformAxis(axis, axisTranslate, axisScale, boxScale, axisOrigin = 0.5) {
const originPoint = mixNumber$1(axis.min, axis.max, axisOrigin);
// Apply the axis delta to the final axis
applyAxisDelta(axis, axisTranslate, axisScale, originPoint, boxScale);
}
function resolveAxisTranslate(value, axis) {
if (typeof value === "string") {
return (parseFloat(value) / 100) * (axis.max - axis.min);
}
return value;
}
/**
* Apply a transform to a box from the latest resolved motion values.
*/
function transformBox(box, transform, sourceBox) {
const resolveBox = sourceBox ?? box;
transformAxis(box.x, resolveAxisTranslate(transform.x, resolveBox.x), transform.scaleX, transform.scale, transform.originX);
transformAxis(box.y, resolveAxisTranslate(transform.y, resolveBox.y), transform.scaleY, transform.scale, transform.originY);
}
function measureViewportBox(instance, transformPoint) {
return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));
}
function measurePageBox(element, rootProjectionNode, transformPagePoint) {
const viewportBox = measureViewportBox(element, transformPagePoint);
const { scroll } = rootProjectionNode;
if (scroll) {
translateAxis(viewportBox.x, scroll.offset.x);
translateAxis(viewportBox.y, scroll.offset.y);
}
return viewportBox;
}
const noProps = {};
const getElementEffect = (element) => (isSVGElement(element)
? svgSubjectEffect
: styleSubjectEffect);
/**
* Presents an effect bound to a DOM element in the shape the DOM keyframe
* resolver and WAAPI expect, which is that of a VisualElement. Holds no
* state: everything delegates to the effect. Goes once the resolver takes
* an effect and subject directly.
*/
class EffectSubject {
constructor(effect, current) {
this.effect = effect;
this.current = current;
this.KeyframeResolver = DOMKeyframesResolver;
}
getValue(key) {
return this.effect.get(this.current, key);
}
readValue(key, target) {
return this.effect.read(this.current, key, target);
}
render() {
this.effect.flush(this.current);
}
measureViewportBox() {
return measureViewportBox(this.current);
}
getProps() {
return noProps;
}
}
/**
* Animate a DOM element's styles. HTML elements are bound through
* styleEffect, SVG through svgEffect, and both are resolved with the DOM
* keyframe resolver so reads are batched, units are converted by
* measurement and eligible values run on WAAPI.
*
* Pass the element's VisualElement (a component or an
* animateLayout() node) to animate its values instead, so the two keep
* sharing values and a renderer.
*/
function animateElement(element, keyframes, transition, visualElement) {
if (visualElement) {
return animateValues((key) => visualElement.getValue(key, null), keyframes, transition, visualElement);
}
const effect = getElementEffect(element);
return animateEffectSubject(effect, element, keyframes, transition, new EffectSubject(effect, element));
}
/**
* Hand the values styleEffect/svgEffect are rendering on `element`,
* whether bound by animate() or directly, to a VisualElement that now
* owns the element (e.g. created by animateLayout()), so a single
* renderer drives them alongside its own values.
*/
function handOffElementState(element, visualElement) {
const state = getElementEffect(element).state(element);
if (!state)
return;
const { transformKeys } = state;
state.release().forEach((value, key) => {
/**
* The style effect derives transform (from the bound transform
* keys) and transformBox itself; a VisualElement builds its own.
*/
const derived = key === "transformBox" ||
(key === "transform" && transformKeys?.length);
derived || visualElement.addValue(key, value);
});
}
/**
* Writes motion values to the properties of any object. This is
* animate()'s fallback for subjects no registered effect claims.
*/
const propEffect = /*@__PURE__*/ createEffect((subject, state, key, value) => {
return state.set(key, value, () => {
subject[key] = value.get();
});
}, {
test: (subject) => motionUtils.isObject(subject),
read: (subject, key) => {
const value = subject[key];
return typeof value === "string" || typeof value === "number"
? value
: undefined;
},
});
const { schedule: microtask, cancel: cancelMicrotask } =
/* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
const isDragging = {
x: false,
y: false,
};
function isDragActive() {
return isDragging.x || isDragging.y;
}
function setDragLock(axis) {
if (axis === "x" || axis === "y") {
if (isDragging[axis]) {
return null;
}
else {
isDragging[axis] = true;
return () => {
isDragging[axis] = false;
};
}
}
else {
if (isDragging.x || isDragging.y) {
return null;
}
else {
isDragging.x = isDragging.y = true;
return () => {
isDragging.x = isDragging.y = false;
};
}
}
}
function setupGesture(elementOrSelector, options) {
const elements = resolveElements(elementOrSelector);
const gestureAbortController = new AbortController();
const eventOptions = {
passive: true,
...options,
signal: gestureAbortController.signal,
};
const cancel = () => gestureAbortController.abort();
return [elements, eventOptions, cancel];
}
function isValidHover(event) {
return !(event.pointerType === "touch" || isDragActive());
}
/**
* Create a hover gesture. hover() is different to .addEventListener("pointerenter")
* in that it has an easier syntax, filters out polyfilled touch events, interoperates
* with drag gestures, and automatically removes the "pointerleave" event listener when the hover ends.
*
* @public
*/
function hover(elementOrSelector, onHoverStart, options = {}) {
const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
elements.forEach((element) => {
let isPressed = false;
let deferredHoverEnd = false;
let hoverEndCallback;
const removePointerLeave = () => {
element.removeEventListener("pointerleave", onPointerLeave);
};
const endHover = (event) => {
if (hoverEndCallback) {
hoverEndCallback(event);
hoverEndCallback = undefined;
}
removePointerLeave();
};
const onPointerUp = (event) => {
isPressed = false;
window.removeEventListener("pointerup", onPointerUp);
window.removeEventListener("pointercancel", onPointerUp);
if (deferredHoverEnd) {
deferredHoverEnd = false;
endHover(event);
}
};
const onPointerDown = () => {
isPressed = true;
window.addEventListener("pointerup", onPointerUp, eventOptions);
window.addEventListener("pointercancel", onPointerUp, eventOptions);
};
const onPointerLeave = (leaveEvent) => {
if (leaveEvent.pointerType === "touch")
return;
if (isPressed) {
deferredHoverEnd = true;
return;
}
endHover(leaveEvent);
};
const onPointerEnter = (enterEvent) => {
if (!isValidHover(enterEvent))
return;
deferredHoverEnd = false;
const onHoverEnd = onHoverStart(element, enterEvent);
if (typeof onHoverEnd !== "function")
return;
hoverEndCallback = onHoverEnd;
element.addEventListener("pointerleave", onPointerLeave, eventOptions);
};
element.addEventListener("pointerenter", onPointerEnter, eventOptions);
element.addEventListener("pointerdown", onPointerDown, eventOptions);
});
return cancel;
}
/**
* Recursively traverse up the tree to check whether the provided child node
* is the parent or a descendant of it.
*
* @param parent - Element to find
* @param child - Element to test against parent
*/
const isNodeOrChild = (parent, child) => {
if (!child) {
return false;
}
else if (parent === child) {
return true;
}
else {
return isNodeOrChild(parent, child.parentElement);
}
};
const isPrimaryPointer = (event) => {
if (event.pointerType === "mouse") {
return typeof event.button !== "number" || event.button <= 0;
}
else {
/**
* isPrimary is true for all mice buttons, whereas every touch point
* is regarded as its own input. So subsequent concurrent touch points
* will be false.
*
* Specifically match against false here as incomplete versions of
* PointerEvents in very old browser might have it set as undefined.
*/
return event.isPrimary !== false;
}
};
const keyboardAccessibleElements = new Set([
"BUTTON",
"INPUT",
"SELECT",
"TEXTAREA",
"A",
]);
/**
* Checks if an element is natively keyboard accessible (focusable).
* Used by the press gesture to determine if we need to add tabIndex.
*/
function isElementKeyboardAccessible(element) {
return (keyboardAccessibleElements.has(element.tagName) ||
element.isContentEditable === true);
}
const textInputElements = new Set(["INPUT", "SELECT", "TEXTAREA"]);
/**
* Checks if an element has text selection or direct interaction behavior
* that should block drag gestures from starting.
*
* This specifically targets form controls where the user might want to select
* text or interact with the control (e.g., sliders, dropdowns).
*
* Buttons and links are NOT included because they don't have click-and-move
* actions of their own - they only respond to click events, so dragging
* should still work when initiated from these elements.
*/
function isElementTextInput(element) {
return (textInputElements.has(element.tagName) ||
element.isContentEditable === true);
}
const isPressing = new WeakSet();
/**
* Filter out events that are not "Enter" keys.
*/
function filterEvents(callback) {
return (event) => {
if (event.key !== "Enter")
return;
callback(event);
};
}
function firePointerEvent(target, type) {
target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
}
const enableKeyboardPress = (focusEvent, eventOptions) => {
const element = focusEvent.currentTarget;
if (!element)
return;
const handleKeydown = filterEvents(() => {
if (isPressing.has(element))
return;
firePointerEvent(element, "down");
const handleKeyup = filterEvents(() => {
firePointerEvent(element, "up");
});
const handleBlur = () => firePointerEvent(element, "cancel");
element.addEventListener("keyup", handleKeyup, eventOptions);
element.addEventListener("blur", handleBlur, eventOptions);
});
element.addEventListener("keydown", handleKeydown, eventOptions);
/**
* Add an event listener that fires on blur to remove the keydown events.
*/
element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
};
/**
* Filter out events that are not primary pointer events, or are triggering
* while a Motion gesture is active.
*/
function isValidPressEvent(event) {
return isPrimaryPointer(event) && !isDragActive();
}
const claimedPointerDownEvents = new WeakSet();
/**
* Create a press gesture.
*
* Press is different to `"pointerdown"`, `"pointerup"` in that it
* automatically filters out secondary pointer events like right
* click and multitouch.
*
* It also adds accessibility support for keyboards, where
* an element with a press gesture will receive focus and
* trigger on Enter `"keydown"` and `"keyup"` events.
*
* This is different to a browser's `"click"` event, which does
* respond to keyboards but only for the `"click"` itself, rather
* than the press start and end/cancel. The element also needs
* to be focusable for this to work, whereas a press gesture will
* make an element focusable by default.
*
* @public
*/
function press(targetOrSelector, onPressStart, options = {}) {
const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
const startPress = (startEvent) => {
const target = startEvent.currentTarget;
if (!isValidPressEvent(startEvent))
return;
if (claimedPointerDownEvents.has(startEvent))
return;
isPressing.add(target);
if (options.stopPropagation) {
claimedPointerDownEvents.add(startEvent);
}
const onPressEnd = onPressStart(target, startEvent);
/**
* End listeners run in the capture phase so a descendant calling
* stopPropagation() in its own pointerup handler can't prevent the
* press gesture from ending. This also keeps the gesture-end
* ordering consistent with the drag gesture. See #2794.
*/
const endEventOptions = { ...eventOptions, capture: true };
const onPointerEnd = (endEvent, success) => {
window.removeEventListener("pointerup", onPointerUp, endEventOptions);
window.removeEventListener("pointercancel", onPointerCancel, endEventOptions);
if (isPressing.has(target)) {
isPressing.delete(target);
}
if (!isValidPressEvent(endEvent)) {
return;
}
if (typeof onPressEnd === "function") {
onPressEnd(endEvent, { success });
}
};
const onPointerUp = (upEvent) => {
onPointerEnd(upEvent, target === window ||
target === document ||
options.useGlobalTarget ||
isNodeOrChild(target, upEvent.target));
};
const onPointerCancel = (cancelEvent) => {
onPointerEnd(cancelEvent, false);
};
window.addEventListener("pointerup", onPointerUp, endEventOptions);
window.addEventListener("pointercancel", onPointerCancel, endEventOptions);
};
targets.forEach((target) => {
const pointerDownTarget = options.useGlobalTarget ? window : target;
pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
if (isHTMLElement(target)) {
target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
if (!isElementKeyboardAccessible(target) &&
!target.hasAttribute("tabindex")) {
target.tabIndex = 0;
}
}
});
return cancelEvents;
}
function getComputedStyle$2(element, name) {
const computedStyle = window.getComputedStyle(element);
return isCSSVar(name)
? computedStyle.getPropertyValue(name)
: computedStyle[name];
}
const resizeHandlers = new WeakMap();
let observer;
const getSize = (borderBoxAxis, svgAxis, htmlAxis) => (target, borderBoxSize) => {
if (borderBoxSize && borderBoxSize[0]) {
return borderBoxSize[0][(borderBoxAxis + "Size")];
}
else if (isSVGElement(target) && "getBBox" in target) {
return target.getBBox()[svgAxis];
}
else {
return target[htmlAxis];
}
};
const getWidth = /*@__PURE__*/ getSize("inline", "width", "offsetWidth");
const getHeight = /*@__PURE__*/ getSize("block", "height", "offsetHeight");
function notifyTarget({ target, borderBoxSize }) {
resizeHandlers.get(target)?.forEach((handler) => {
handler(target, {
get width() {
return getWidth(target, borderBoxSize);
},
get height() {
return getHeight(target, borderBoxSize);
},
});
});
}
function notifyAll(entries) {
entries.forEach(notifyTarget);
}
function createResizeObserver() {
if (typeof ResizeObserver === "undefined")
return;
observer = new ResizeObserver(notifyAll);
}
function resizeElement(target, handler) {
if (!observer)
createResizeObserver();
const elements = resolveElements(target);
elements.forEach((element) => {
let elementHandlers = resizeHandlers.get(element);
if (!elementHandlers) {
elementHandlers = new Set();
resizeHandlers.set(element, elementHandlers);
}
elementHandlers.add(handler);
observer?.observe(element);
});
return () => {
elements.forEach((element) => {
const elementHandlers = resizeHandlers.get(element);
elementHandlers?.delete(handler);
if (!elementHandlers?.size) {
observer?.unobserve(element);
}
});
};
}
const windowCallbacks = new Set();
let windowResizeHandler;
function createWindowResizeHandler() {
windowResizeHandler = () => {
const info = {
get width() {
return window.innerWidth;
},
get height() {
return window.innerHeight;
},
};
windowCallbacks.forEach((callback) => callback(info));
};
window.addEventListener("resize", windowResizeHandler);
}
function resizeWindow(callback) {
windowCallbacks.add(callback);
if (!windowResizeHandler)
createWindowResizeHandler();
return () => {
windowCallbacks.delete(callback);
if (!windowCallbacks.size &&
typeof windowResizeHandler === "function") {
window.removeEventListener("resize", windowResizeHandler);
windowResizeHandler = undefined;
}
};
}
function resize(a, b) {
return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
}
const statsBuffer = {
value: null,
addProjectionMetrics: null,
};
function clearStatsBuffer() {
statsBuffer.value = null;
statsBuffer.addProjectionMetrics = null;
}
function recordStats() {
if (statsBuffer.value) {
clearStatsBuffer();
throw new Error("Stats are already being measured");
}
const buffer = statsBuffer;
buffer.value = {
layoutProjection: {
nodes: [],
calculatedTargetDeltas: [],
calculatedProjections: [],
},
};
buffer.addProjectionMetrics = (metrics) => {
const { layoutProjection } = buffer.value;
layoutProjection.nodes.push(metrics.nodes);
layoutProjection.calculatedTargetDeltas.push(metrics.calculatedTargetDeltas);
layoutProjection.calculatedProjections.push(metrics.calculatedProjections);
};
}
/**
* Checks if an element is specifically an SVGSVGElement (the root SVG element)
* in a way that works across iframes
*/
function isSVGSVGElement(element) {
return isSVGElement(element) && element.tagName === "svg";
}
function getOriginIndex(from, total) {
if (from === "first") {
return 0;
}
else {
const lastIndex = total - 1;
return from === "last" ? lastIndex : lastIndex / 2;
}
}
function stagger(duration = 0.1, { startDelay = 0, from = 0, ease, grid } = {}) {
/**
* Distances from the origin for each element count. The final entry
* holds the distance used to normalise easing.
*/
const cache = {};
return (i, total) => {
let distances = cache[total];
if (!distances) {
const [columns, rows] = grid || [Infinity, 1];
const lastX = Math.min(columns, total) - 1;
const lastY = Math.max(rows, Math.ceil(total / columns)) - 1;
const isIndex = typeof from === "number";
const scale = from === "first" ? 0 : from === "last" ? 1 : 0.5;
const originX = isIndex ? from % columns : lastX * scale;
const originY = isIndex ? Math.floor(from / columns) : lastY * scale;
distances = cache[total] = [];
for (let j = 0; j < total; j++) {
const x = j % columns;
const y = Math.floor(j / columns);
const edgeX = Math.min(x, lastX - x);
const edgeY = Math.min(y, lastY - y);
if (from === "random") {
// Inside-out shuffle, so each element gets a distinct step
const k = (Math.random() * (j + 1)) | 0;
distances[j] = distances[k];
distances[k] = j;
}
else {
distances[j] =
from === "edges"
? Math.min(lastX ? edgeX : edgeY, lastY ? edgeY : edgeX)
: Math.hypot(x - originX, y - originY);
}
}
distances.push(grid ? Math.max(...distances) : total);
}
let delay = duration * distances[i];
const maxDelay = duration * distances[total];
if (ease && maxDelay) {
const easingFunction = motionUtils.easingDefinitionToFunction(ease);
delay = easingFunction(delay / maxDelay) * maxDelay;
}
return startDelay + delay;
};
}
function transform(...args) {
const useImmediate = !Array.isArray(args[0]);
const argOffset = useImmediate ? 0 : -1;
const inputValue = args[0 + argOffset];
const inputRange = args[1 + argOffset];
const outputRange = args[2 + argOffset];
const options = args[3 + argOffset];
const interpolator = interpolate(inputRange, outputRange, options);
return useImmediate ? interpolator(inputValue) : interpolator;
}
/**
* Every running follower ticks from this one frame callback.
*/
const active = new Set();
const tickAll = ({ timestamp }) => {
active.forEach((animation) => animation.tick(timestamp));
};
/**
* A lean animation for values that follow a target (`followValue`,
* `springValue`): a single numeric generator, retargeted in place as
* the target moves and ticked from a frame callback shared by every
* follower. Only implements the controls `MotionValue.animation`
* exposes. Repeat options are ignored: a follower only ever heads for
* its latest target.
*/
class FollowAnimation extends WithPromise {
constructor(options) {
super();
this.state = "idle";
this.startTime = 0;
this.currentTime = 0;
/**
* Whether the first tick has fired `onPlay`.
*/
this.started = false;
/**
* A target set since the last tick, applied at the next one so any
* number of sets per frame cost one retarget.
*/
this.hasNextTarget = false;
this.nextTarget = 0;
/**
* Bound to the instance so `animation.stop` can be passed around.
*/
this.stop = () => {
if (this.state === "idle")
return;
this.teardown();
this.options.onStop?.();
};
this.options = options;
this.factory = options.type;
this.generator = this.factory(options);
const { driver } = options;
if (driver)
this.driver = driver((timestamp) => this.tick(timestamp));
this.startTime = this.now();
this.state = "running";
if (this.driver) {
this.driver.start();
}
else {
active.size || frame.update(tickAll, true);
active.add(this);
}
}
/**
* Aim at a new target from wherever the animation has reached by the
* next tick. `velocity` fixes the velocity to steer with, otherwise
* the generator's is used.
*/
setTarget(target, velocity) {
this.nextTarget = target;
this.nextVelocity = velocity;
this.hasNextTarget = true;
}
/**
* Steer towards new keyframes from the current position and velocity.
* Springs are updated in place; other generators are recreated.
*/
retarget(keyframes, velocity) {
const { options, generator } = this;
options.keyframes = keyframes;
options.velocity = velocity;
this.startTime = this.now();
this.currentTime = 0;
if (generator.retarget) {
generator.retarget(keyframes, velocity);
}
else {
this.generator = this.factory(options);
}
}
tick(timestamp) {
const { options, hasNextTarget: retargeted } = this;
const { delay = 0, onUpdate, onPlay } = options;
// Retargets happen on a tick, so only the first start can lag
if (!this.started) {
this.startTime = resolveStartTime(this.startTime, timestamp);
}
const elapsed = Math.round(timestamp - this.startTime) - delay;
const t = (this.currentTime = Math.max(0, elapsed));
const state = this.generator.next(t);
// Hold the origin through the delay, even if the generator is already at rest
const value = elapsed < 0 ? options.keyframes[0] : state.value;
if (retargeted) {
/**
* Steer from where the current trajectory has reached this
* frame, then render that position as the new origin.
*/
this.hasNextTarget = false;
const { keyframes } = options;
keyframes[0] = value;
keyframes[1] = this.nextTarget;
this.retarget(keyframes, this.nextVelocity ?? this.getGeneratorVelocity());
}
if (retargeted || !this.started) {
this.started = true;
onPlay?.();
}
/**
* Callbacks may stop this animation or set a new target, so check
* the live state rather than what was read at the top of the tick.
*/
if (this.state !== "running")
return;
onUpdate?.(value);
if (state.done &&
elapsed >= 0 &&
!retargeted &&
!this.hasNextTarget &&
this.state === "running") {
this.notifyFinished();
this.teardown();
this.state = "finished";
options.onComplete?.();
}
}
getGeneratorVelocity() {
return calcGeneratorVelocity(this.generator, this.currentTime, this.options.velocity);
}
now() {
return this.driver ? this.driver.now() : time.now();
}
teardown() {
this.state = "idle";
if (this.driver) {
this.driver.stop();
}
else {
active.delete(this);
active.size || cancelFrame(tickAll);
}
}
}
const asNumber = (v) => typeof v === "number" ? v : parseFloat(v);
/**
* Animate `value` to its latest value with the generator in
* `options.type`, tracking `source` if it's a `MotionValue`. Takes a
* generator rather than a type name, so spring-only callers don't
* bundle every generator.
*/
function follow(value, source, options) {
const initialValue = value.get();
let activeAnimation = null;
let set;
const unit = typeof initialValue === "string"
? initialValue.replace(/[\d.-]/g, "")
: undefined;
const onUpdate = (v) => set((unit ? v + unit : v));
const onPlay = () => value["events"].animationStart?.notify();
const stopAnimation = () => {
if (activeAnimation) {
activeAnimation.stop();
activeAnimation = null;
}
value.animation = undefined;
};
value.attach((v, safeSet) => {
set = safeSet;
const target = asNumber(v);
if (activeAnimation?.state === "running") {
/**
* Steer the running animation rather than replacing it. This
* keeps its completion promise and uses its analytical velocity
* for accuracy, preventing systematic velocity loss at high
* frame rates (240hz+).
*/
activeAnimation.setTarget(target, options.velocity);
return;
}
const current = asNumber(value.get());
const velocity = activeAnimation
? activeAnimation.getGeneratorVelocity()
: value.getVelocity();
stopAnimation();
// Don't animate if we're already at the target
if (current === target)
return;
const animationOptions = {
keyframes: [current, target],
velocity,
restDelta: 0.001,
restSpeed: 0.01,
...options,
onUpdate,
};
const animation = (activeAnimation = new FollowAnimation({
...animationOptions,
onPlay,
}));
value.animation = animation;
animation.then(() => {
// Ignore if this animation has since been replaced
if (activeAnimation !== animation)
return;
activeAnimation = null;
value.animation = undefined;
value["events"].animationComplete?.notify();
});
}, stopAnimation);
if (isMotionValue(source)) {
let skipNextAnimation = options.skipInitialAnimation === true;
const onSourceChange = (v) => {
if (skipNextAnimation) {
skipNextAnimation = false;
value.jump(parseValue(v, unit), false);
}
else {
value.set(parseValue(v, unit));
}
};
const removeSourceOnChange = source.on("change", onSourceChange);
/**
* Catch up on a change made before we subscribed, for instance
* between a React render reading the source and the effect
* attaching to it. Subtracting is falsy for equal or non-numeric
* (NaN) values.
*/
const latest = source.get();
if (asNumber(latest) - asNumber(value.get()))
onSourceChange(latest);
const removeValueOnDestroy = value.on("destroy", removeSourceOnChange);
/**
* Stop our animation on detach, otherwise a re-attach (new
* options, Strict Mode) starts a second animation that fights
* this orphaned one. The catch-up above resumes from the
* current value and velocity.
*/
return () => {
removeSourceOnChange();
removeValueOnDestroy();
stopAnimation();
};
}
return stopAnimation;
}
function parseValue(v, unit) {
return unit ? v + unit : v;
}
/**
* Create a `MotionValue` that animates to its latest value using any transition type.
* Can either be a value or track another `MotionValue`.
*
* ```jsx
* const x = motionValue(0)
* const y = followValue(x, { type: "spring", stiffness: 300 })
* // or with tween
* const z = followValue(x, { type: "tween", duration: 0.5, ease: "easeOut" })
* ```
*
* @param source - Initial value or MotionValue to track
* @param options - Animation transition options
* @returns `MotionValue`
*
* @public
*/
function followValue(source, options) {
const initialValue = isMotionValue(source) ? source.get() : source;
const value = motionValue(initialValue);
attachFollow(value, source, options);
return value;
}
/**
* Attach an animation to a MotionValue that will animate whenever the value changes.
* Similar to attachSpring but supports any transition type (spring, tween, inertia, etc.)
*
* @param value - The MotionValue to animate
* @param source - Initial value or MotionValue to track
* @param options - Animation transition options
* @returns Cleanup function
*
* @public
*/
function attachFollow(value, source, options = {}) {
// Default to spring if no type specified (matches useSpring behavior)
const transition = { type: "spring", ...options };
replaceTransitionType(transition);
transition.type = transition.type || keyframes;
return follow(value, source, transition);
}
function subscribeValue(inputValues, outputValue, getLatest) {
const update = () => outputValue.set(getLatest());
const scheduleUpdate = () => frame.preRender(update, false, true);
const subscriptions = inputValues.map((v) => v.on("change", scheduleUpdate));
outputValue.on("destroy", () => {
subscriptions.forEach((unsubscribe) => unsubscribe());
cancelFrame(update);
});
}
/**
* Create a `MotionValue` that transforms the output of other `MotionValue`s by
* passing their latest values through a transform function.
*
* Whenever a `MotionValue` referred to in the provided function is updated,
* it will be re-evaluated.
*
* ```jsx
* const x = motionValue(0)
* const y = transformValue(() => x.get() * 2) // double x
* ```
*
* @param transformer - A transform function. This function must be pure with no side-effects or conditional statements.
* @returns `MotionValue`
*
* @public
*/
function transformValue(transform) {
const collectedValues = [];
/**
* Open session of collectMotionValues. Any MotionValue that calls get()
* inside transform will be saved into this array.
*/
collectMotionValues.current = collectedValues;
const initialValue = transform();
collectMotionValues.current = undefined;
const value = motionValue(initialValue);
subscribeValue(collectedValues, value, transform);
return value;
}
/**
* Create a `MotionValue` that maps the output of another `MotionValue` by
* mapping it from one range of values into another.
*
* @remarks
*
* Given an input range of `[-200, -100, 100, 200]` and an output range of
* `[0, 1, 1, 0]`, the returned `MotionValue` will:
*
* - When provided a value between `-200` and `-100`, will return a value between `0` and `1`.
* - When provided a value between `-100` and `100`, will return `1`.
* - When provided a value between `100` and `200`, will return a value between `1` and `0`
*
* The input range must be a linear series of numbers. The output range
* can be any value type supported by Motion: numbers, colors, shadows, etc.
*
* Every value in the output range must be of the same type and in the same format.
*
* ```jsx
* const x = motionValue(0)
* const xRange = [-200, -100, 100, 200]
* const opacityRange = [0, 1, 1, 0]
* const opacity = mapValue(x, xRange, opacityRange)
* ```
*
* @param inputValue - `MotionValue`
* @param inputRange - A linear series of numbers (either all increasing or decreasing)
* @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.
* @param options -
*
* - clamp: boolean. Clamp values to within the given range. Defaults to `true`
* - ease: EasingFunction[]. Easing functions to use on the interpolations between each value in the input and output ranges. If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition between each.
*
* @returns `MotionValue`
*
* @public
*/
function mapValue(inputValue, inputRange, outputRange, options) {
const map = transform(inputRange, outputRange, options);
return transformValue(() => map(inputValue.get()));
}
/**
* Create a `MotionValue` that animates to its latest value using a spring.
* Can either be a value or track another `MotionValue`.
*
* ```jsx
* const x = motionValue(0)
* const y = springValue(x, { stiffness: 300 })
* ```
*
* @param source - Initial value or MotionValue to track
* @param options - Spring configuration options
* @returns `MotionValue`
*
* @public
*/
function springValue(source, options) {
const value = motionValue(isMotionValue(source) ? source.get() : source);
attachSpring(value, source, options);
return value;
}
/**
* Attach a spring animation to a MotionValue that will animate whenever the value changes.
*
* @param value - The MotionValue to animate
* @param source - Initial value or MotionValue to track
* @param options - Spring configuration options
* @returns Cleanup function
*
* @public
*/
function attachSpring(value, source, options) {
return follow(value, source, { ...options, type: spring });
}
/**
* A list of all ValueTypes
*/
const valueTypes = [...dimensionValueTypes, color, complex];
/**
* Tests a value against the list of ValueTypes
*/
const findValueType = (v) => valueTypes.find(testValueType(v));
let nameCount = 0;
/**
* Generated names live in their own namespace so we can tell a name we own
* (and must clean up) from an author-defined one - and so a stale generated
* name left behind by an interrupted transition is re-owned, not mistaken for
* the author's and leaked.
*/
const generatedName = () => `motion-view-${nameCount++}`;
const isGeneratedName = (name) => name.startsWith("motion-view-");
/**
* Tag a captured element with a `view-transition-class` so authors can target
* its generated layer from CSS (e.g. `::view-transition-group(.hero)`) without
* the opaque generated name. Tracked in `classed` - separate from the generated
* names in `assigned` - so cleanup removes the class without ever stripping an
* author's own inline `view-transition-name`.
*/
function tagClass(element, className, classed) {
if (!className)
return;
element.style?.setProperty("view-transition-class", className);
classed.push(element);
}
/**
* Set the element's `view-transition-group` so its layer reconstructs the DOM
* hierarchy in the pseudo-tree (`contain`) - or stays flat (`none`). Tracked in
* `grouped` for cleanup. When the element clips (any non-`visible` overflow) its
* name is recorded in `clipChildren` so the caller can clip the nested children
* (`::view-transition-group-children(name)`), mirroring the live clip through
* the whole transition rather than only at the live-DOM handoff.
*
* Ignored by browsers without nested view-transition groups, where it harmlessly
* degrades to the flat default.
*/
function applyGroup(element, name, group, grouped, clipChildren) {
if (!group)
return;
element.style?.setProperty("view-transition-group", group);
grouped.push(element);
if (group !== "none" && clipChildren) {
const style = getComputedStyle(element);
if (style.overflowX !== "visible" || style.overflowY !== "visible") {
clipChildren.add(name);
}
}
}
/**
* Resolve a selector/Element to elements and ensure each one carries a
* `view-transition-name` we can target from script.
*
* Author-defined names are reused as-is. Elements that are unnamed (or use
* the browser's `auto`/`match-element`, whose generated name is not exposed
* to script) are given a unique generated name, set inline so it's captured,
* and tracked in `assigned` for later cleanup.
*
* `registry` maps each Element to its name so the same element keeps its name
* across both captures (before and after the update), which is what allows a
* persistent element to animate as a single `group` layer.
*/
function assignViewTransitionNames(definition, registry, assigned, forcedNames, className, classed = [], group, grouped = [], clipChildren) {
const elements = resolveElements(definition);
/**
* The new end of a paired morph: give each element the matching name from
* the old end (by index) so the two share one layer and morph. If the new
* end resolves to *more* elements than the old end named, the extras have no
* counterpart - give them a fresh name so they animate as newcomers rather
* than being silently left unnamed. We return the names actually assigned
* (sized to the resolved elements), not the raw `forcedNames`, so stagger
* totals and the layer set stay in step with what's on the page.
*/
if (forcedNames) {
return elements.map((element, i) => {
const existing = registry.get(element);
if (existing)
return existing;
const name = forcedNames[i] ?? generatedName();
element.style?.setProperty("view-transition-name", name);
assigned.push(element);
registry.set(element, name);
tagClass(element, className, classed);
applyGroup(element, name, group, grouped, clipChildren);
return name;
});
}
/**
* Read every current name up front, before assigning any. Interleaving the
* reads with the inline `setProperty` writes below would dirty styles
* between reads and force a style recalc per element; batching the reads
* keeps it to one. Elements already in the registry keep their name and
* need no read.
*/
const currentNames = elements.map((element) => registry.has(element)
? undefined
: getComputedStyle(element).getPropertyValue("view-transition-name"));
return elements.map((element, i) => {
const existing = registry.get(element);
if (existing)
return existing;
const current = currentNames[i];
let name;
if (current &&
current !== "none" &&
current !== "auto" &&
current !== "match-element" &&
!isGeneratedName(current)) {
/**
* The author already named this layer - target it as-is and leave
* it to them to clean up. `auto`/`match-element` are overridden
* because their generated name is not exposed to script, and a
* stale `motion-view-*` (e.g. left by an interrupted transition) is
* re-owned rather than adopted as an author name and leaked.
*/
name = current;
}
else {
name = generatedName();
element.style?.setProperty("view-transition-name", name);
assigned.push(element);
}
registry.set(element, name);
tagClass(element, className, classed);
applyGroup(element, name, group, grouped, clipChildren);
return name;
});
}
/**
* Remove the `view-transition-name`s we generated and the
* `view-transition-class`es we applied. Author-defined names are never touched
* (they're not in `assigned`). Safe to call more than once (e.g. on both a
* finished and an interrupted transition).
*/
function releaseViewTransitionNames(assigned, classed = [], grouped = []) {
for (const element of assigned) {
element.style?.removeProperty("view-transition-name");
}
for (const element of classed) {
element.style?.removeProperty("view-transition-class");
}
for (const element of grouped) {
element.style?.removeProperty("view-transition-group");
}
}
function chooseLayerType(valueName) {
if (valueName === "layout")
return "group";
if (valueName === "enter" || valueName === "new")
return "new";
return "old";
}
let pendingRules = {};
let style = null;
const css = {
set: (selector, values) => {
pendingRules[selector] = values;
},
commit: () => {
if (!style) {
style = document.createElement("style");
style.id = "motion-view";
}
let cssText = "";
for (const selector in pendingRules) {
const rule = pendingRules[selector];
cssText += `${selector} {\n`;
for (const [property, value] of Object.entries(rule)) {
cssText += ` ${property}: ${value};\n`;
}
cssText += "}\n";
}
style.textContent = cssText;
document.head.appendChild(style);
pendingRules = {};
},
remove: () => {
if (style && style.parentElement) {
style.parentElement.removeChild(style);
}
},
};
function getViewAnimationLayerInfo(pseudoElement) {
const match = pseudoElement.match(
// `group-children` (nested transitions) before `group` so it wins.
/::view-transition-(old|new|group-children|group|image-pair)\((.*?)\)/);
if (!match)
return null;
return { layer: match[2], type: match[1] };
}
function getViewAnimations() {
return document.getAnimations().filter((animation) => {
const { effect } = animation;
return (!!effect &&
effect.target === document.documentElement &&
effect.pseudoElement?.startsWith("::view-transition"));
});
}
function hasTarget(target, targets) {
return targets.has(target) && Object.keys(targets.get(target)).length > 0;
}
const definitionNames = ["layout", "enter", "exit", "new", "old"];
/**
* Whether a computed border-radius is square (every component zero). Splitting
* on whitespace handles two-value/elliptical radii like "0px 20px" - a leading
* `parseFloat` alone would misread the non-zero vertical radius as square.
*/
const isSquareRadius = (radius) => radius.split(" ").every((value) => parseFloat(value) === 0);
/**
* The `ViewTransitionTarget` buckets driving each generated layer type, in
* priority order - the inverse of `chooseLayerType`. The new view is driven by
* `new`/`enter`, the old by `old`/`exit`. `group-children`/`image-pair` have no
* bucket; they follow the default layout timing.
*/
const typeBuckets = {
group: ["layout"],
new: ["new", "enter"],
old: ["old", "exit"],
};
/**
* Default "absent" origin for a single-value keyframe, by pseudo type, so e.g.
* `enter({ scale: 1 })` grows in from 0.85 and `exit({ opacity: 0 })` fades
* from 1. `enter` prefers the matching `exit` value over these (see below).
*/
const ORIGIN_DEFAULTS = {
new: { opacity: 0, scale: 0.85 },
old: { opacity: 1, scale: 1 },
};
/**
* How much two box aspect ratios must differ before a morph is treated as
* aspect-changing (and so worth cropping). Matches the projection engine's
* `preserve-aspect` threshold, so small layout jitter doesn't trigger a crop.
*/
const ASPECT_TOLERANCE = 0.2;
function startViewAnimation(builder) {
const { update, targets, resolveDefs, cropOverride, pairs, classNames, flatGroups, options: defaultOptions, } = builder;
if (!document.startViewTransition) {
// An async IIFE (not `new Promise(async …)`) so a throwing/rejecting
// update rejects this promise rather than leaving it unsettled.
return (async () => {
await update();
return new GroupAnimation([]);
})();
}
/**
* Resolve any selector/Element targets to layer names, assigning a
* `view-transition-name` to each element as we go. We run this before the
* update (so the elements are captured in the old snapshot) and again
* after it (for the new snapshot). An element present in both keeps the
* same name and animates as a single `group` layer.
*/
const nameRegistry = new Map();
const assigned = [];
/**
* Elements we tagged with a `view-transition-class` (via `.class()`),
* tracked separately from `assigned` so cleanup removes the class without
* ever stripping an author's own inline `view-transition-name`.
*/
const classed = [];
/**
* Elements we set a `view-transition-group` on (for nesting), tracked for
* cleanup. `clipChildren` collects the names of nested parents that clip in
* the live layout, so their `::view-transition-group-children` is clipped
* through the transition - not just once the live DOM takes back over.
*/
const grouped = [];
const clipChildren = new Set();
const layerTargets = new Map();
const croppedNames = new Set();
/**
* Each layer's explicit `.crop(true | false)` override (by resolved name),
* so `finalizeCrop` can let an author's choice win over the morph default.
*/
const cropForName = new Map();
/**
* Each layer's stagger position (index + total) within its subject, per
* snapshot. Resolving against the snapshot the layer belongs to keeps
* stagger correct when `update()` replaces the matched elements, and lets
* us skip a layer that's absent from a snapshot (e.g. an exited element
* has no `new` pseudo-element).
*/
const layerStagger = new Map();
/**
* Names allocated for a paired subject in the old snapshot, replayed onto
* its new-snapshot target so both ends share a layer and morph.
*/
const pairNames = new Map();
/**
* The old (`from`) elements of each paired subject, so their names can be
* transferred off before the new (`to`) elements inherit them.
*/
const pairFrom = new Map();
const resolveLayers = (phase) => {
targets.forEach((target, definition) => {
const className = classNames.get(definition);
/**
* Nest each resolved layer under its DOM-ancestor layer by default
* (`contain`), so an ancestor's clip/transform/opacity reach it
* through the transition; `.group(false)` opts a subject out (`none`)
* to stay flat and escape. Skipped for root / pre-named layers, which
* aren't elements we resolve and style.
*/
const group = definition === "root" || !resolveDefs.has(definition)
? undefined
: flatGroups.has(definition)
? "none"
: "contain";
let names;
if (definition === "root" || !resolveDefs.has(definition)) {
names = [definition];
}
else if (pairs.has(definition)) {
/**
* Paired morph: name the old target in the old snapshot, then
* force the same name(s) onto the new target in the new one, so
* two different elements morph as a single layer.
*/
if (phase === "old") {
pairFrom.set(definition, resolveElements(definition));
names = assignViewTransitionNames(definition, nameRegistry, assigned, undefined, className, classed, group, grouped, clipChildren);
pairNames.set(definition, names);
}
else {
/**
* Transfer the name(s) off the `from` elements before the
* `to` elements inherit them. A `from` that survives into
* the new snapshot (e.g. hidden with `visibility: hidden`
* rather than removed) would otherwise keep the name and
* collide - "duplicate view-transition-name".
*/
for (const el of pairFrom.get(definition) ?? []) {
el.style?.removeProperty("view-transition-name");
/**
* Drop the old end from the registry too, so the new
* end alone supplies this name's `new` crop radii - we
* neither re-measure nor get ordered by a stale element.
*/
nameRegistry.delete(el);
}
names = assignViewTransitionNames(pairs.get(definition), nameRegistry, assigned, pairNames.get(definition), className, classed, group, grouped, clipChildren);
}
}
else {
names = assignViewTransitionNames(definition, nameRegistry, assigned, undefined, className, classed, group, grouped, clipChildren);
}
// Record any explicit `.crop(true | false)` per resolved name; the
// crop set itself is computed later by `finalizeCrop` (it needs both
// snapshots to know which morphs change aspect ratio).
const override = cropOverride.get(definition);
names.forEach((name, index) => {
/**
* If two subjects resolve to the same element, merge their
* definitions so neither subject's animations are dropped.
*/
const existing = layerTargets.get(name);
layerTargets.set(name, existing && existing !== target
? { ...existing, ...target }
: target);
if (override !== undefined)
cropForName.set(name, override);
const stagger = layerStagger.get(name) ?? {};
stagger[phase] = [index, names.length];
layerStagger.set(name, stagger);
});
});
};
/**
* The stagger index/total for a layer, resolved against the snapshot it
* belongs to. Returns index -1 when the layer is absent from that snapshot
* so the caller can skip a pseudo-element that doesn't exist.
*/
const staggerPosition = (name, type) => {
const stagger = layerStagger.get(name);
const position = type === "old"
? stagger?.old
: type === "new"
? stagger?.new
: // group / group-children / image-pair persist across both.
stagger?.new ?? stagger?.old;
return position ?? [-1, 1];
};
/**
* Merge default + per-layer transition options for a generated layer and
* resolve any stagger/delay function against this element's position. Used
* by both the morph-retiming and crop corner-radius passes.
*/
const resolveLayerTransition = (target, type, transitionName, index, total) => {
const transition = mergeTransition(getValueTransition(defaultOptions, transitionName), getValueTransition((layerOptions(target, type) ?? {}), transitionName));
if (typeof transition.delay === "function") {
transition.delay = transition.delay(index, total);
}
return transition;
};
/**
* Resolve a layer's group (`layout`) timing to plain WAAPI values: native
* ms `delay`/`duration` and a baked `ease`. The single source of group
* timing, shared by the generated-group retiming and the crop corner-radius
* pass so the rounded clip animates on exactly the box's timing. It returns
* no generator `type` (the WAAPI-only `NativeAnimation` rejects a string
* type) nor `repeat`/`times` (which the group's `updateTiming` ignores), so
* none of them can leak into the radius animation and desync it.
*/
const resolveGroupTiming = (name) => {
const [index, total] = staggerPosition(name, "group");
const transition = resolveLayerTransition(layerTargets.get(name), "group", "layout", index === -1 ? 0 : index, total);
transition.duration && (transition.duration = motionUtils.secondsToMilliseconds(transition.duration));
const { delay = 0, duration, ease } = applyGeneratorOptions(transition);
return { delay: motionUtils.secondsToMilliseconds(delay), duration, ease };
};
/**
* Each layer's measured box + corner radii per snapshot. The box lets
* `finalizeCrop` tell whether a morph's aspect ratio changed (the only case
* worth cropping); the radii let a cropped morph's group clip animate each
* corner from the old element's radius to the new element's, keeping it
* rounded where `overflow: clip` would otherwise square the corners.
*
* We never flatten the source for capture (a snapshot is a paint of the live
* DOM, so squaring an element just for its capture would flash one real
* square frame). For an aspect-changing morph `object-fit: cover` crops each
* snapshot's own baked corners off-screen mid-morph, so the animated clip is
* the only visible corner; a near-same-aspect forced crop (`.crop(true)`)
* can't hide the outgoing snapshot's silhouette, but the endpoints coincide.
*/
const cropMeasurements = new Map();
const measureLayers = (phase) => nameRegistry.forEach((name, element) => {
const el = element;
const rect = el.getBoundingClientRect?.();
if (rect && rect.height) {
const style = getComputedStyle(el);
const radii = {};
for (const corner of cornerRadiusProps) {
radii[corner] = style[corner];
}
const entry = cropMeasurements.get(name) ?? {};
entry[phase] = { width: rect.width, height: rect.height, radii };
cropMeasurements.set(name, entry);
}
});
/**
* With both snapshots measured, settle which layers crop. The default crops
* only a morph whose aspect ratio *changes* between snapshots - the one case
* where `object-fit: cover` does real work. A same-aspect morph or a
* fade-only layer is left uncropped: its corners scale naturally (no flash
* from squaring, no `overflow: clip` eating its shadow) and a backdrop can't
* be clipped to nothing. An explicit `.crop(true | false)` overrides either
* way. Runs after both snapshots are measured, since aspect needs both.
*/
const finalizeCrop = () => {
croppedNames.clear();
for (const name of layerStagger.keys()) {
if (name === "root")
continue;
// An explicit `.crop(true | false)` wins; otherwise crop a morph
// whose aspect ratio changed.
if (cropForName.get(name) ?? aspectChanged(name)) {
croppedNames.add(name);
}
}
};
/**
* Whether a layer is a morph whose box aspect ratio changed between
* snapshots (beyond a small tolerance). Fade-only layers (one snapshot) are
* never "changed".
*/
const aspectChanged = (name) => {
const box = cropMeasurements.get(name);
if (!box?.old || !box?.new || !box.old.height || !box.new.height) {
return false;
}
return (Math.abs(box.old.width / box.old.height -
box.new.width / box.new.height) > ASPECT_TOLERANCE);
};
/**
* Write the persistent view-transition CSS: suppress root capture when the
* root has no animations of its own; force linear timing (baked into the
* keyframes, so we can retime later via updateTiming); and clip +
* object-fit: cover every cropped morph (the UA default overflows on
* aspect-ratio change).
*
* `css.commit` replaces rather than appends, so we re-set the full rule set
* each call - the crop rules are only known after `finalizeCrop` runs in the
* update callback, so the second call writes them.
*/
const commitViewCSS = () => {
if (!hasTarget("root", targets)) {
css.set(":root", { "view-transition-name": "none" });
}
css.set("::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*)", { "animation-timing-function": "linear !important" });
croppedNames.forEach((name) => {
css.set(`::view-transition-group(${name})`, { overflow: "clip" });
css.set(`::view-transition-old(${name}), ::view-transition-new(${name})`, { width: "100%", height: "100%", "object-fit": "cover" });
});
/**
* Clip the nested children of any layer that clips in the live layout,
* so a wrapper crops its child for the whole morph (mirroring the DOM)
* rather than only at the live-DOM handoff. No-op on browsers without
* nested view-transition groups.
*/
clipChildren.forEach((name) => {
css.set(`::view-transition-group-children(${name})`, {
overflow: "clip",
});
});
css.commit(); // Write
};
const cleanup = () => {
releaseViewTransitionNames(assigned, classed, grouped);
css.remove(); // Write
};
const callback = async () => {
await update();
/**
* Re-resolve so elements created by the update are named for the new
* snapshot, then measure them. With both snapshots measured we can
* settle the crop set (aspect-changing morphs + forced).
*/
resolveLayers("new");
measureLayers("new");
finalizeCrop();
/**
* Re-commit the crop CSS unconditionally: `finalizeCrop` is computed
* here (after both snapshots are measured), so the clip rules must be
* (re)written to match the settled set.
*/
commitViewCSS();
};
let transition;
try {
resolveLayers("old");
/**
* Measure the old snapshot against the optimistic crop set (the new
* snapshot doesn't exist yet, so aspect change can't be known here;
* `finalizeCrop` settles it post-update).
*/
measureLayers("old");
commitViewCSS();
transition = document.startViewTransition(callback);
}
catch (error) {
/**
* The prelude writes inline names before the transition exists. If it
* throws (e.g. startViewTransition rejects in a bad UA state), release
* them so we neither leak DOM state nor stall the queue on a promise
* that never settles - hand back a rejection it can advance past.
*/
cleanup();
return Promise.reject(error);
}
transition.finished.finally(cleanup);
return new Promise((resolve, reject) => {
transition.ready
.then(() => {
const generatedViewAnimations = getViewAnimations();
const animations = [];
/**
* Create animations for each of our explicitly-defined subjects.
* `opacityAnimated` additionally tracks which `${name}:${type}`
* we faded, so we can keep the UA `plus-lighter` blend only for a
* genuine opacity crossfade (both sides fading) and drop it for a
* slide/transform, where additive compositing would flash bright.
*/
const explicitlyAnimated = new Set();
const opacityAnimated = new Set();
layerTargets.forEach((target, name) => {
const stagger = layerStagger.get(name);
/**
* Presence: `enter` only fires for a pure newcomer (a new
* view with no old), `exit` only for a pure leaver. A
* survivor (both) gets neither - it just morphs.
*/
const enterApplies = !!stagger?.new && !stagger?.old;
const exitApplies = !!stagger?.old && !stagger?.new;
for (const key of definitionNames) {
if (!target[key])
continue;
if (key === "enter" && !enterApplies)
continue;
if (key === "exit" && !exitApplies)
continue;
const type = chooseLayerType(key);
const [index, total] = staggerPosition(name, type);
// Skip a layer absent from its snapshot.
if (index === -1)
continue;
const { keyframes, options } = target[key];
for (let [valueName, valueKeyframes] of Object.entries(keyframes)) {
// Skip only missing values - `0` (e.g. opacity: 0)
// is valid and must reach the from-value inference.
if (valueKeyframes == null)
continue;
/**
* The view path hands keyframes straight to WAAPI,
* so Motion's `x`/`y` shorthands (compiled to
* `transform` only via the value pipeline) have no
* effect. Warn and skip - use `transform`/`translate`.
*/
if (valueName === "x" || valueName === "y") {
motionUtils.warnOnce(false, `animateView() animates view-transition layers with CSS properties; the "${valueName}" shorthand has no effect - use transform, e.g. { transform: "translateX(40px)" }.`);
continue;
}
/**
* enter/exit win over new/old on a shared property -
* skip it here when the gated bucket also defines it.
*/
if (key === "new" &&
enterApplies &&
target.enter?.keyframes[valueName] != null) {
continue;
}
if (key === "old" &&
exitApplies &&
target.exit?.keyframes[valueName] != null) {
continue;
}
const valueOptions = mergeTransition(getValueTransition(defaultOptions, valueName), getValueTransition(options, valueName));
/**
* Infer an origin for a single-value keyframe. An
* `enter` mirrors the matching `exit` value (a
* defined exit reverses into the enter for free);
* otherwise the per-type default (opacity 0/1, scale
* 0.85). No default -> left as-is (animates from the
* live value).
*
* `new`/`old` fire for survivors too, where only the
* opacity crossfade default applies - a transform
* default like scale 0.85 would pop a persisting
* element, so gate it on the layer actually
* entering/leaving.
*/
if (!Array.isArray(valueKeyframes)) {
const exitValue = key === "enter"
? target.exit?.keyframes[valueName]
: undefined;
const allowDefault = valueName === "opacity" ||
(type === "new" ? enterApplies : exitApplies);
const from = exitValue != null
? Array.isArray(exitValue)
? exitValue[exitValue.length - 1]
: exitValue
: allowDefault
? ORIGIN_DEFAULTS[type]?.[valueName]
: undefined;
if (from !== undefined) {
valueKeyframes = [from, valueKeyframes];
}
}
/**
* Resolve stagger function if provided, per element
* across this subject's resolved layers.
*/
if (typeof valueOptions.delay === "function") {
valueOptions.delay = valueOptions.delay(index, total);
}
valueOptions.duration && (valueOptions.duration = motionUtils.secondsToMilliseconds(valueOptions.duration));
valueOptions.delay && (valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay));
animations.push(new NativeAnimation({
...valueOptions,
element: document.documentElement,
name: valueName,
pseudoElement: `::view-transition-${type}(${name})`,
keyframes: valueKeyframes,
}));
explicitlyAnimated.add(`${name}:${type}`);
if (valueName === "opacity") {
opacityAnimated.add(`${name}:${type}`);
}
}
}
});
/**
* Handle browser generated animations
*/
for (const animation of generatedViewAnimations) {
if (animation.playState === "finished")
continue;
const { effect } = animation;
if (!effect || !(effect instanceof KeyframeEffect))
continue;
const { pseudoElement } = effect;
if (!pseudoElement)
continue;
const name = getViewAnimationLayerInfo(pseudoElement);
if (!name)
continue;
const targetDefinition = layerTargets.get(name.layer);
/**
* We built our own animation for this layer, so drop the
* browser-generated fade we're replacing. The UA
* `plus-lighter` blend is a *separate* generated animation on
* the same pseudo (it sets `mix-blend-mode` in its keyframes):
* keep it *only* for a true opacity crossfade - both sides
* fading - so a symmetric crossfade composites without
* darkening, but a slide/transform (where both layers stay
* opaque and overlap) doesn't flash bright from the addition.
*/
if (explicitlyAnimated.has(`${name.layer}:${name.type}`)) {
const isCrossfade = opacityAnimated.has(`${name.layer}:new`) &&
opacityAnimated.has(`${name.layer}:old`);
if (isCrossfade &&
effect
.getKeyframes()
.some((keyframe) => keyframe.mixBlendMode)) {
animations.push(new NativeAnimationWrapper(animation));
}
else {
animation.cancel();
}
continue;
}
/**
* Drop the orphaned half of the default crossfade. The UA
* fades old out and new in as a *pair*; if the opposing half
* was explicitly overridden with something other than an
* opacity fade (a clip or transform reveal), this side's
* default opacity fade has no partner - left to run it would
* dissolve what should be a static backdrop (e.g.
* `.new({ clipPath })` should reveal over a still old view,
* not fade the old out around the growing clip). Cancel it -
* and its `plus-lighter` sibling on the same pseudo, which
* would otherwise flash bright where the two opaque layers
* overlap. A genuine crossfade (the opposing side also fading
* opacity) keeps both halves and is handled above.
*/
const opposite = name.type === "old"
? "new"
: name.type === "new"
? "old"
: undefined;
if (opposite &&
explicitlyAnimated.has(`${name.layer}:${opposite}`) &&
!opacityAnimated.has(`${name.layer}:${opposite}`)) {
animation.cancel();
continue;
}
/**
* Otherwise retime the browser-generated animation to
* Motion's timing. This auto-enables the layout (group)
* morph for any resolved/named target, and applies the
* default timing to old/new layers we haven't explicitly
* overridden.
*
* group + group-children both follow the layout timing so
* the nesting container stays in sync with the morph.
*/
/**
* A survivor's old + new are the two halves of one
* `plus-lighter` crossfade. They must share identical timing
* (so their opacities stay mirrored and sum to 1 - else the
* additive blend flashes bright wherever both are partly
* visible) and fade linearly (the bounce belongs on the
* group's geometry, not the opacity). So time them as the
* group, rather than via their own - potentially staggered,
* or enter/exit-derived - old/new options.
*/
const stagger = layerStagger.get(name.layer);
const isMorphCrossfade = (name.type === "old" || name.type === "new") &&
!!stagger?.old &&
!!stagger?.new;
let timing;
if (name.type.startsWith("group")) {
// group + group-children follow the resolved group
// timing - the single source shared with the crop
// corner-radius pass below.
const { delay, duration, ease } = resolveGroupTiming(name.layer);
timing = {
delay,
duration,
easing: mapEasingToNativeEasing(ease, duration),
};
}
else {
const timingType = isMorphCrossfade ? "group" : name.type;
const [index, total] = staggerPosition(name.layer, timingType);
const transitionName = timingType === "group" ? "layout" : "";
let animationTransition = resolveLayerTransition(targetDefinition, timingType, transitionName, index === -1 ? 0 : index, total);
/**
* The crossfade should resolve at the spring's
* *perceptual* (visual) duration - the geometry can keep
* bouncing, but the opacity shouldn't drag through the
* settle. So capture `visualDuration` before
* `applyGeneratorOptions` replaces it with the full
* overshoot duration, and use it for the fade.
*/
const visualDuration = animationTransition.visualDuration;
animationTransition.duration && (animationTransition.duration = motionUtils.secondsToMilliseconds(animationTransition.duration));
animationTransition =
applyGeneratorOptions(animationTransition);
timing = {
delay: motionUtils.secondsToMilliseconds(animationTransition.delay ?? 0),
duration: isMorphCrossfade && visualDuration !== undefined
? motionUtils.secondsToMilliseconds(visualDuration)
: animationTransition.duration,
easing: isMorphCrossfade
? "linear"
: mapEasingToNativeEasing(animationTransition.ease, animationTransition.duration),
};
}
effect.updateTiming(timing);
animations.push(new NativeAnimationWrapper(animation));
}
/**
* Round each cropped layer's clip. Its `::view-transition-group`
* has `overflow: clip`, which would otherwise square the corners
* mid-morph; animate each corner from the old element's radius to
* the new element's so the crop stays rounded. Timed as the group
* (`layout`) so the radius tracks the morphing box.
*/
cropMeasurements.forEach((entry, name) => {
if (!croppedNames.has(name))
return;
// Reuse the group's resolved timing - native ms delay/
// duration + a baked ease, with no generator `type` or
// repeat/times to leak into (or throw inside) NativeAnimation.
const { delay, duration, ease } = resolveGroupTiming(name);
for (const corner of cornerRadiusProps) {
// `||` (not `??`) so an empty measurement falls back to
// the other snapshot rather than an invalid keyframe.
const from = entry.old?.radii[corner] ||
entry.new?.radii[corner] ||
"0px";
const to = entry.new?.radii[corner] ||
entry.old?.radii[corner] ||
"0px";
// Nothing to round if the corner is square at both ends.
if (isSquareRadius(from) && isSquareRadius(to))
continue;
animations.push(new NativeAnimation({
element: document.documentElement,
name: corner,
pseudoElement: `::view-transition-group(${name})`,
keyframes: [from, to],
delay,
duration,
ease,
}));
}
});
resolve(new GroupAnimation(animations));
})
.catch(() =>
/**
* `ready` rejects when the transition is skipped - no visual
* change, or superseded by an interrupting transition. The DOM
* update still applied, so settle with no animations rather than
* surfacing it as an error to an awaiting caller. A genuine
* failure in `update()` rejects `updateCallbackDone` (already
* settled by now), so propagate that instead.
*/
transition.updateCallbackDone.then(() => resolve(new GroupAnimation([])), reject));
});
}
/**
* The options that should time a given generated layer type, so a retimed
* group/old/new picks up any per-target transition the user provided. Checks
* the type's buckets in priority order (e.g. `new` before `enter`).
*/
function layerOptions(target, type) {
for (const bucket of typeBuckets[type] ?? []) {
const options = target?.[bucket]?.options;
if (options)
return options;
}
}
/**
* Merge a base transition (e.g. the default `options`) with a per-layer/value
* override. An explicit `duration` on the override must win over an inherited
* generator's own timing: a spring prefers `visualDuration`, and
* `spring.applyToOptions` overwrites `duration` with the computed settle time -
* so without this the override is silently discarded. Dropping the inherited
* `type`/`visualDuration` makes the layer a plain tween of that duration, unless
* it asked for its own generator `type`/`visualDuration`.
*/
function mergeTransition(base, override) {
const merged = { ...base, ...override };
if (override.duration !== undefined) {
if (override.visualDuration === undefined)
delete merged.visualDuration;
if (override.type === undefined)
delete merged.type;
}
return merged;
}
let builders = [];
let current = null;
function next() {
current = null;
const [nextBuilder] = builders;
if (nextBuilder)
start(nextBuilder);
}
function start(builder) {
motionUtils.removeItem(builders, builder);
current = builder;
startViewAnimation(builder)
.then((animation) => {
builder.notifyReady(animation);
return animation.finished;
})
// A genuinely failed transition (a throwing update) rejects the
// builder; a skipped/interrupted one resolves with no animations (see
// start.ts). Either way, advance the queue - else later transitions hang.
.catch((error) => builder.notifyReject(error))
.finally(next);
}
function processQueue() {
/**
* Iterate backwards over the builders array. We can ignore the
* "wait" animations. If we have an interrupting animation in the
* queue then we need to batch all preceding animations into it.
* Currently this only batches the update functions but will also
* need to batch the targets.
*/
for (let i = builders.length - 1; i >= 0; i--) {
const builder = builders[i];
const { interrupt } = builder.options;
if (interrupt === "immediate") {
const batchedUpdates = builders.slice(0, i + 1).map((b) => b.update);
const remaining = builders.slice(i + 1);
builder.update = () => {
batchedUpdates.forEach((update) => update());
};
// Put the current builder at the front, followed by any "wait" builders
builders = [builder, ...remaining];
break;
}
}
if (!current || builders[0]?.options.interrupt === "immediate") {
next();
}
}
function addToQueue(builder) {
builders.push(builder);
microtask.render(processQueue);
}
class ViewTransitionBuilder {
constructor(update, options = {}) {
this.currentSubject = "root";
this.targets = new Map();
/**
* Definitions that must be resolved to elements (and assigned a
* `view-transition-name`) rather than treated as pre-named layers.
*/
this.resolveDefs = new Set();
/**
* Per-subject crop override: `true` forces the crop (clip + object-fit:
* cover + animated corner radii) on, `false` forces it off. A subject with
* no entry uses the default - crop only a genuine morph (a layer present in
* both snapshots), so a fade-only enter/exit isn't clipped to nothing.
*/
this.cropOverride = new Map();
/**
* Subjects paired with a different new-snapshot target (the second `.add()`
* argument), so two distinct elements share one name and morph into each
* other - a shared-element transition.
*/
this.pairs = new Map();
/**
* A `view-transition-class` to apply to each subject's resolved elements,
* so authors can target the generated layers from CSS by class rather than
* the opaque generated name.
*/
this.classNames = new Map();
/**
* Subjects opted out of automatic group nesting via `.group(false)`. Their
* layer stays a flat top-level group (`view-transition-group: none`) instead
* of nesting under its DOM-ancestor layer - so it animates independently and
* escapes an ancestor's clip/transform (e.g. an element that lifts out of a
* card and flies across, which nesting would clip to the card).
*/
this.flatGroups = new Set();
this.notifyReady = motionUtils.noop;
this.notifyReject = motionUtils.noop;
this.readyPromise = new Promise((resolve, reject) => {
this.notifyReady = resolve;
this.notifyReject = reject;
});
this.update = update;
this.options = {
interrupt: "wait",
...options,
};
// Avoid an unhandled rejection when a failed transition has no
// `.then(_, reject)` handler attached (e.g. fire-and-forget).
this.readyPromise.catch(motionUtils.noop);
addToQueue(this);
}
/**
* Target elements resolved from a selector or Element, each assigned a
* `view-transition-name` automatically.
*
* Passing a second target pairs them: the first is resolved in the old
* snapshot and the second in the new, sharing one name so two *different*
* elements morph into each other (e.g. `.add(card, ".modal")`). Symmetric -
* pass them the other way round to morph back.
*/
add(subject, newSubject) {
this.currentSubject = subject;
this.resolveDefs.add(subject);
if (newSubject !== undefined)
this.pairs.set(subject, newSubject);
// Register the subject so it participates (and gets an automatic
// layout/morph animation) even without an explicit enter/exit/layout.
if (!this.targets.has(subject))
this.targets.set(subject, {});
return this;
}
/**
* Control this subject's crop (clip + `object-fit: cover` + animated
* corners). By default a subject auto-crops only when it actually morphs -
* present in both snapshots (a survivor, or an `.add(a, b)` pair). A
* fade-only enter/exit has no second box to crop against, so it's left to
* the browser default; in particular the `overflow: clip` a crop adds would
* otherwise clip a mis-sized enter/exit layer to nothing.
*
* `.crop(false)` forces the crop off (e.g. a text morph, where
* `object-fit: cover` clips glyphs as the box grows); `.crop(true)` forces
* it on for a non-morph the default wouldn't otherwise crop.
*/
crop(enabled = true) {
this.cropOverride.set(this.currentSubject, enabled);
return this;
}
/**
* By default a subject's layer nests under its nearest DOM-ancestor layer
* (`view-transition-group: contain`), so the ancestor's clip/transform/opacity
* apply to it through the transition - mirroring how the DOM actually paints,
* and letting a wrapper crop its child for the whole morph rather than only
* once the live DOM takes back over. (Needs a browser that supports nested
* view-transition groups; elsewhere it degrades to the flat default.)
*
* Call `.group(false)` to opt out: the layer stays flat and top-level, so it
* animates independently and escapes an ancestor's clip - e.g. an element
* that should lift out of a card and fly across, which nesting would clip.
*/
group(enabled = true) {
enabled
? this.flatGroups.delete(this.currentSubject)
: this.flatGroups.add(this.currentSubject);
return this;
}
/**
* Tag this subject's generated layers with a `view-transition-class`, so
* they can be targeted from CSS - `::view-transition-group(.name)`,
* `::view-transition-old/new(.name)`, `::view-transition-image-pair(.name)`
* - without the opaque generated `view-transition-name`. Because `.add()`
* can match many elements, a shared class targets them all at once (and,
* for a pair, both ends). The escape hatch for z-index / custom keyframes
* on a morph layer.
*/
class(name) {
this.classNames.set(this.currentSubject, name);
return this;
}
/**
* Set the transition for this subject's morph. The morph is enabled
* automatically by `.add()`; this just customises its timing (duration,
* easing, a `delay`/`stagger`, …). On the implicit `root` subject it also
* opts the page into the transition (the root crossfade).
*/
layout(options = {}) {
this.updateTarget("layout", {}, options);
return this;
}
enter(keyframes, options) {
this.updateTarget("enter", keyframes, options);
return this;
}
exit(keyframes, options) {
this.updateTarget("exit", keyframes, options);
return this;
}
/**
* Animate the new view directly, whether the element is appearing or
* persisting (unlike `.enter()`, which only fires for a pure newcomer).
* Pair with `.old()` for a crossfade or slide-through.
*/
new(keyframes, options) {
this.updateTarget("new", keyframes, options);
return this;
}
/**
* Animate the old view directly, whether the element is leaving or
* persisting (unlike `.exit()`, which only fires for a pure leaver).
*/
old(keyframes, options) {
this.updateTarget("old", keyframes, options);
return this;
}
updateTarget(target, keyframes, options = {}) {
const { currentSubject, targets } = this;
if (!targets.has(currentSubject)) {
targets.set(currentSubject, {});
}
const targetData = targets.get(currentSubject);
targetData[target] = { keyframes, options };
}
then(resolve, reject) {
return this.readyPromise.then(resolve, reject);
}
}
function animateView(update, options = {}) {
return new ViewTransitionBuilder(update, options);
}
const createAxisDelta = () => ({
translate: 0,
scale: 1,
origin: 0,
originPoint: 0,
});
const createDelta = () => ({
x: createAxisDelta(),
y: createAxisDelta(),
});
const createAxis = () => ({ min: 0, max: 0 });
const createBox = () => ({
x: createAxis(),
y: createAxis(),
});
const visualElementStore = new WeakMap();
function isAnimationControls(v) {
return (v !== null &&
typeof v === "object" &&
typeof v.start === "function");
}
/**
* Decides if the supplied variable is variant label
*/
function isVariantLabel(v) {
return typeof v === "string" || Array.isArray(v);
}
const variantPriorityOrder = [
"animate",
"whileInView",
"whileFocus",
"whileHover",
"whileTap",
"whileDrag",
"exit",
];
const variantProps = ["initial", ...variantPriorityOrder];
function isControllingVariants(props) {
if (isAnimationControls(props.animate))
return true;
for (let i = 0; i < variantProps.length; i++) {
if (isVariantLabel(props[variantProps[i]])) {
return true;
}
}
return false;
}
function isVariantNode(props) {
return Boolean(isControllingVariants(props) || props.variants);
}
/**
* Updates motion values from props changes.
* Uses `any` type for element to avoid circular dependencies with VisualElement.
*/
function updateMotionValuesFromProps(element, next, prev) {
for (const key in next) {
const nextValue = next[key];
const prevValue = prev[key];
if (isMotionValue(nextValue)) {
/**
* If this is a motion value found in props or style, we want to add it
* to our visual element's motion value map.
*/
element.addValue(key, nextValue);
}
else if (isMotionValue(prevValue)) {
/**
* If we're swapping from a motion value to a static value,
* create a new motion value from that
*/
element.addValue(key, motionValue(nextValue, { owner: element }));
}
else if (prevValue !== nextValue) {
/**
* If this is a flat value that has changed, update the motion value
* or create one if it doesn't exist. We only want to do this if we're
* not handling the value with our animation state.
*/
if (element.hasValue(key)) {
const existingValue = element.getValue(key);
if (existingValue.liveStyle === true) {
existingValue.jump(nextValue);
}
else if (!existingValue.hasAnimated) {
existingValue.set(nextValue);
}
}
else {
const latestValue = element.getStaticValue(key);
element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));
}
}
}
// Handle removed values
for (const key in prev) {
if (next[key] === undefined)
element.removeValue(key);
}
return next;
}
// Does this device prefer reduced motion? Returns `null` server-side.
const prefersReducedMotion = { current: null };
const hasReducedMotionListener = { current: false };
const isBrowser = typeof window !== "undefined";
function initPrefersReducedMotion() {
hasReducedMotionListener.current = true;
if (!isBrowser)
return;
if (window.matchMedia) {
const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
motionMediaQuery.addEventListener("change", setReducedMotionPreferences);
setReducedMotionPreferences();
}
else {
prefersReducedMotion.current = false;
}
}
const propEventHandlers = [
"AnimationStart",
"AnimationComplete",
"Update",
"BeforeLayoutMeasure",
"LayoutMeasure",
"LayoutAnimationStart",
"LayoutAnimationComplete",
];
/**
* Static feature definitions - can be injected by framework layer
*/
let featureDefinitions = {};
/**
* Set feature definitions for all VisualElements.
* This should be called by the framework layer (e.g., framer-motion) during initialization.
*/
function setFeatureDefinitions(definitions) {
featureDefinitions = definitions;
}
/**
* Get the current feature definitions
*/
function getFeatureDefinitions() {
return featureDefinitions;
}
/**
* A VisualElement is an imperative abstraction around UI elements such as
* HTMLElement, SVGElement, Three.Object3D etc.
*/
class VisualElement {
/**
* This method takes React props and returns found MotionValues. For example, HTML
* MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
*
* This isn't an abstract method as it needs calling in the constructor, but it is
* intended to be one.
*/
scrapeMotionValuesFromProps(_props, _prevProps, _visualElement) {
return {};
}
constructor({ parent, props, presenceContext, reducedMotionConfig, skipAnimations, blockInitialAnimation, visualState, }, options = {}) {
/**
* A reference to the current underlying Instance, e.g. a HTMLElement
* or Three.Mesh etc.
*/
this.current = null;
/**
* A set containing references to this VisualElement's children.
*/
this.children = new Set();
/**
* Determine what role this visual element should take in the variant tree.
*/
this.isVariantNode = false;
this.isControllingVariants = false;
/**
* Decides whether this VisualElement should animate in reduced motion
* mode.
*
* TODO: This is currently set on every individual VisualElement but feels
* like it could be set globally.
*/
this.shouldReduceMotion = null;
/**
* Decides whether animations should be skipped for this VisualElement.
* Useful for E2E tests and visual regression testing.
*/
this.shouldSkipAnimations = false;
/**
* A map of all motion values attached to this visual element. Motion
* values are source of truth for any given animated value. A motion
* value might be provided externally by the component via props.
*/
this.values = new Map();
this.KeyframeResolver = KeyframeResolver;
/**
* Cleanup functions for active features (hover/tap/exit etc)
*/
this.features = {};
/**
* A map of every subscription that binds the provided or generated
* motion values onChange listeners to this visual element.
*/
this.valueSubscriptions = new Map();
/**
* A reference to the previously-provided motion values as returned
* from scrapeMotionValuesFromProps. We use the keys in here to determine
* if any motion values need to be removed after props are updated.
*/
this.prevMotionValues = {};
/**
* Track whether this element has been mounted before, to detect
* remounts after Suspense unmount/remount cycles.
*/
this.hasBeenMounted = false;
/**
* An object containing a SubscriptionManager for each active event.
*/
this.events = {};
/**
* An object containing an unsubscribe function for each prop event subscription.
* For example, every "Update" event can have multiple subscribers via
* VisualElement.on(), but only one of those can be defined via the onUpdate prop.
*/
this.propEventSubscriptions = {};
this.notifyUpdate = () => this.notify("Update", this.latestValues);
this.render = () => {
if (!this.current)
return;
this.triggerBuild();
this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
};
this.renderScheduledAt = 0.0;
this.scheduleRender = () => {
const now = time.now();
if (this.renderScheduledAt < now) {
this.renderScheduledAt = now;
frame.render(this.render, false, true);
}
};
const { latestValues, renderState } = visualState;
this.latestValues = latestValues;
this.baseTarget = { ...latestValues };
this.initialValues = props.initial ? { ...latestValues } : {};
this.renderState = renderState;
this.parent = parent;
this.props = props;
this.presenceContext = presenceContext;
this.depth = parent ? parent.depth + 1 : 0;
this.reducedMotionConfig = reducedMotionConfig;
this.skipAnimationsConfig = skipAnimations;
this.options = options;
this.blockInitialAnimation = Boolean(blockInitialAnimation);
this.isControllingVariants = isControllingVariants(props);
this.isVariantNode = isVariantNode(props);
if (this.isVariantNode) {
this.variantChildren = new Set();
}
this.manuallyAnimateOnMount = Boolean(parent && parent.current);
/**
* Any motion values that are provided to the element when created
* aren't yet bound to the element, as this would technically be impure.
* However, we iterate through the motion values and set them to the
* initial values for this component.
*
* TODO: This is impure and we should look at changing this to run on mount.
* Doing so will break some tests but this isn't necessarily a breaking change,
* more a reflection of the test.
*/
const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this);
for (const key in initialMotionValues) {
const value = initialMotionValues[key];
if (latestValues[key] !== undefined && isMotionValue(value)) {
value.set(latestValues[key]);
}
}
}
mount(instance) {
/**
* If this element has been mounted before (e.g. after a Suspense
* unmount/remount), reset motion values to their initial state
* so animations replay correctly from initial → animate.
*/
if (this.hasBeenMounted) {
for (const key in this.initialValues) {
this.values.get(key)?.jump(this.initialValues[key]);
this.latestValues[key] = this.initialValues[key];
}
}
this.current = instance;
visualElementStore.set(instance, this);
if (this.projection && !this.projection.instance) {
this.projection.mount(instance);
}
/**
* Join the closest variant node above, so its variant changes
* propagate here, unless inherit={false} cuts the chain.
*/
if (this.isVariantNode && !this.isControllingVariants) {
let node = this;
do
node = node.props.inherit !== false && node.parent;
while (node && !node.isVariantNode);
if (node) {
const { variantChildren } = node;
variantChildren.add(this);
this.removeFromVariantTree = () => variantChildren.delete(this);
}
}
this.values.forEach((value, key) => this.bindToMotionValue(key, value));
/**
* Determine reduced motion preference. Only initialize the matchMedia
* listener if we actually need the dynamic value (i.e., when config
* is neither "never" nor "always").
*/
if (this.reducedMotionConfig === "never") {
this.shouldReduceMotion = false;
}
else if (this.reducedMotionConfig === "always") {
this.shouldReduceMotion = true;
}
else {
if (!hasReducedMotionListener.current) {
initPrefersReducedMotion();
}
this.shouldReduceMotion = prefersReducedMotion.current;
}
if (process.env.NODE_ENV !== "production") {
motionUtils.warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
}
/**
* Set whether animations should be skipped based on the config.
*/
this.shouldSkipAnimations = this.skipAnimationsConfig ?? false;
this.parent?.addChild(this);
this.update(this.props, this.presenceContext);
this.hasBeenMounted = true;
}
unmount() {
this.projection && this.projection.unmount();
cancelFrame(this.notifyUpdate);
cancelFrame(this.render);
this.valueSubscriptions.forEach((remove) => remove());
this.valueSubscriptions.clear();
this.removeFromVariantTree && this.removeFromVariantTree();
this.parent?.removeChild(this);
for (const key in this.events) {
this.events[key].clear();
}
for (const key in this.features) {
const feature = this.features[key];
if (feature) {
feature.unmount();
feature.isMounted = false;
}
}
this.current = null;
}
addChild(child) {
this.children.add(child);
this.enteringChildren ?? (this.enteringChildren = new Set());
this.enteringChildren.add(child);
}
removeChild(child) {
this.children.delete(child);
this.enteringChildren && this.enteringChildren.delete(child);
}
bindToMotionValue(key, value) {
if (this.valueSubscriptions.has(key)) {
this.valueSubscriptions.get(key)();
}
if (value.accelerate &&
acceleratedValues.has(key) &&
this.current instanceof HTMLElement) {
const { factory, keyframes, times, ease, duration } = value.accelerate;
const animation = new NativeAnimation({
element: this.current,
name: key,
keyframes,
times,
ease,
duration: motionUtils.secondsToMilliseconds(duration),
});
const cleanup = factory(animation);
this.valueSubscriptions.set(key, () => {
cleanup();
animation.cancel();
});
return;
}
const valueIsTransform = transformProps.has(key);
if (valueIsTransform && this.onBindTransform) {
this.onBindTransform();
}
const removeOnChange = value.on("change", (latestValue) => {
this.latestValues[key] = latestValue;
this.props.onUpdate && frame.preRender(this.notifyUpdate);
if (valueIsTransform) {
if (this.projection) {
this.projection.isTransformDirty = true;
}
transformGroups.get(this.current)?.check();
}
this.scheduleRender();
});
let removeSyncCheck;
if (typeof window !== "undefined" &&
window.MotionCheckAppearSync) {
removeSyncCheck = window.MotionCheckAppearSync(this, key, value);
}
this.valueSubscriptions.set(key, () => {
removeOnChange();
if (removeSyncCheck)
removeSyncCheck();
// Defer to MotionValue.on("change") auto-stop so React 19 remounts
// can resubscribe before the animation is cancelled (#3315).
});
}
sortNodePosition(other) {
/**
* If either node isn't mounted, or they aren't even of the same type,
* we can't compare their document order.
*/
if (!this.current ||
!other.current ||
!this.sortInstanceNodePosition ||
this.type !== other.type) {
return 0;
}
return this.sortInstanceNodePosition(this.current, other.current);
}
updateFeatures() {
let key = "animation";
for (key in featureDefinitions) {
const featureDefinition = featureDefinitions[key];
if (!featureDefinition)
continue;
const { isEnabled, Feature: FeatureConstructor } = featureDefinition;
/**
* If this feature is enabled but not active, make a new instance.
*/
if (!this.features[key] &&
FeatureConstructor &&
isEnabled(this.props)) {
this.features[key] = new FeatureConstructor(this);
}
/**
* If we have a feature, mount or update it.
*/
if (this.features[key]) {
const feature = this.features[key];
if (feature.isMounted) {
feature.update();
}
else {
feature.mount();
feature.isMounted = true;
}
}
}
}
triggerBuild() {
this.build(this.renderState, this.latestValues, this.props);
}
/**
* Measure the current viewport box with or without transforms.
* Only measures axis-aligned boxes, rotate and skew must be manually
* removed with a re-render to work.
*/
measureViewportBox() {
return this.current
? this.measureInstanceViewportBox(this.current, this.props)
: createBox();
}
getStaticValue(key) {
return this.latestValues[key];
}
setStaticValue(key, value) {
this.latestValues[key] = value;
}
/**
* Update the provided props. Ensure any newly-added motion values are
* added to our map, old ones removed, and listeners updated.
*/
update(props, presenceContext) {
const { transformTemplate, onUpdate } = this.props;
if (props.transformTemplate || transformTemplate) {
this.scheduleRender();
}
/**
* Transforms on the compositor can't use a new transformTemplate
* or onUpdate, so move them to the main thread.
*/
if ((props.transformTemplate && !transformTemplate) ||
(props.onUpdate && !onUpdate)) {
transformGroups.get(this.current)?.demote();
}
this.prevProps = this.props;
this.props = props;
this.prevPresenceContext = this.presenceContext;
this.presenceContext = presenceContext;
/**
* Update prop event handlers ie onAnimationStart, onAnimationComplete
*/
for (let i = 0; i < propEventHandlers.length; i++) {
const key = propEventHandlers[i];
if (this.propEventSubscriptions[key]) {
this.propEventSubscriptions[key]();
delete this.propEventSubscriptions[key];
}
const listenerName = ("on" + key);
const listener = props[listenerName];
if (listener) {
this.propEventSubscriptions[key] = this.on(key, listener);
}
}
this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps || {}, this), this.prevMotionValues);
if (this.handleChildMotionValue) {
this.handleChildMotionValue();
}
}
getProps() {
return this.props;
}
/**
* Returns the variant definition with a given name.
*/
getVariant(name) {
return this.props.variants ? this.props.variants[name] : undefined;
}
/**
* Returns the defined default transition on this component.
*/
getDefaultTransition() {
return this.props.transition;
}
getTransformPagePoint() {
return this.props.transformPagePoint;
}
/**
* Add a motion value and bind it to this visual element.
*/
addValue(key, value) {
// Remove existing value if it exists
const existingValue = this.values.get(key);
if (value !== existingValue) {
if (existingValue)
this.removeValue(key);
this.bindToMotionValue(key, value);
this.values.set(key, value);
/**
* An animated value with no base value is undefined until the
* keyframe resolver reads its origin. Rendering it before then
* writes an invalid placeholder (e.g. points="undefined") that
* the resolver can read back from the DOM as the origin.
*/
const latest = value.get();
if (latest !== undefined)
this.latestValues[key] = latest;
}
}
/**
* Remove a motion value and unbind any active subscriptions.
*/
removeValue(key) {
this.values.delete(key);
const unsubscribe = this.valueSubscriptions.get(key);
if (unsubscribe) {
unsubscribe();
this.valueSubscriptions.delete(key);
}
delete this.latestValues[key];
this.removeValueFromRenderState(key, this.renderState);
}
/**
* Check whether we have a motion value for this key
*/
hasValue(key) {
return this.values.has(key);
}
getValue(key, defaultValue) {
if (this.props.values && this.props.values[key]) {
return this.props.values[key];
}
let value = this.values.get(key);
if (value === undefined && defaultValue !== undefined) {
value = motionValue(defaultValue ?? this.getDefaultValue?.(key), {
owner: this,
});
this.addValue(key, value);
}
return value;
}
/**
* If we're trying to animate to a previously unencountered value,
* we need to check for it in our state and as a last resort read it
* directly from the instance (which might have performance implications).
*/
readValue(key, target) {
let value = this.latestValues[key] !== undefined || !this.current
? this.latestValues[key]
: this.getBaseTargetFromProps(this.props, key) ??
this.readValueFromInstance(this.current, key, this.options);
if (value !== undefined && value !== null) {
if (typeof value === "string" &&
(motionUtils.isNumericalString(value) || motionUtils.isZeroValueString(value))) {
// If this is a number read as a string, ie "0" or "200", convert it to a number
value = parseFloat(value);
}
else if (
/**
* If the value as read isn't animatable (e.g. "none") but
* the target is, derive an animatable none from the target.
* A value is animatable if it's a number or contains a
* number or color, which is cheaper to check than trying
* every value type in turn.
*/
typeof value !== "number" &&
!complex.test(value) &&
complex.test(target)) {
value = getAnimatableNone(key, target);
}
this.setBaseTarget(key, isMotionValue(value) ? value.get() : value);
}
return isMotionValue(value) ? value.get() : value;
}
/**
* Set the base target to later animate back to. This is currently
* only hydrated on creation and when we first read a value.
*/
setBaseTarget(key, value) {
this.baseTarget[key] = value;
}
on(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = new motionUtils.SubscriptionManager();
}
return this.events[eventName].add(callback);
}
notify(eventName, ...args) {
if (this.events[eventName]) {
this.events[eventName].notify(...args);
}
}
scheduleRenderMicrotask() {
microtask.render(this.render);
}
}
class DOMVisualElement extends VisualElement {
constructor() {
super(...arguments);
this.KeyframeResolver = DOMKeyframesResolver;
}
sortInstanceNodePosition(a, b) {
/**
* compareDocumentPosition returns a bitmask, by using the bitwise &
* we're returning true if 2 in that bitmask is set to true. 2 is set
* to true if b precedes a.
*/
return a.compareDocumentPosition(b) & 2 ? 1 : -1;
}
getBaseTargetFromProps(props, key) {
const style = props.style;
return style ? style[key] : undefined;
}
removeValueFromRenderState(key, { vars, style }) {
delete vars[key];
delete style[key];
}
handleChildMotionValue() {
if (this.childSubscription) {
this.childSubscription();
delete this.childSubscription;
}
const { children } = this.props;
if (isMotionValue(children)) {
this.childSubscription = children.on("change", (latest) => {
if (this.current) {
this.current.textContent = `${latest}`;
}
});
}
}
}
/**
* Feature base class for extending VisualElement functionality.
* Features are plugins that can be mounted/unmounted to add behavior
* like gestures, animations, or layout tracking.
*/
class Feature {
constructor(node) {
this.isMounted = false;
this.node = node;
}
update() { }
}
function renderHTML(element, { style, vars }, styleProp, projection) {
const elementStyle = element.style;
let key;
for (key in style) {
// CSSStyleDeclaration has [index: number]: string; in the types, so we use that as key type.
elementStyle[key] = style[key];
}
// Write projection styles directly to element style
projection?.applyProjectionStyles(elementStyle, styleProp);
for (key in vars) {
// Loop over any CSS variables and assign those.
// They can only be assigned using `setProperty`.
elementStyle.setProperty(key, vars[key]);
}
}
const scaleCorrectors = {};
function addScaleCorrector(correctors) {
for (const key in correctors) {
scaleCorrectors[key] = correctors[key];
if (isCSSVariableName(key)) {
scaleCorrectors[key].isCSSVariable = true;
}
}
}
function isForcedMotionValue(key, { layout, layoutId }) {
return (transformProps.has(key) ||
key.startsWith("origin") ||
((layout || layoutId !== undefined) &&
(!!scaleCorrectors[key] || key === "opacity")));
}
function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
const style = props.style;
const prevStyle = prevProps?.style;
const newValues = {};
if (!style)
return newValues;
for (const key in style) {
if (isMotionValue(style[key]) ||
(prevStyle && isMotionValue(prevStyle[key])) ||
isForcedMotionValue(key, props) ||
visualElement?.getValue(key)?.liveStyle !== undefined) {
newValues[key] = style[key];
}
}
return newValues;
}
function getComputedStyle$1(element) {
return window.getComputedStyle(element);
}
class HTMLVisualElement extends DOMVisualElement {
constructor() {
super(...arguments);
this.type = "html";
this.renderInstance = renderHTML;
}
mount(instance) {
/**
* If a custom component forwards its ref to something other than a
* HTML/SVG element (a class instance, an imperative handle) there's
* nothing for Motion to style, measure or attach gestures to. #2777
*/
motionUtils.invariant(Boolean(instance.style), "motion.create() components must forward their ref to a HTML or SVG element", "custom-component-ref");
super.mount(instance);
}
readValueFromInstance(instance, key) {
if (transformProps.has(key)) {
return this.projection?.isProjecting
? defaultTransformValue(key)
: readTransformValue(instance, key);
}
else {
const computedStyle = getComputedStyle$1(instance);
const value = (isCSSVariableName(key)
? computedStyle.getPropertyValue(key)
: computedStyle[key]) || 0;
return typeof value === "string" ? value.trim() : value;
}
}
measureInstanceViewportBox(instance, { transformPagePoint }) {
return measureViewportBox(instance, transformPagePoint);
}
build(renderState, latestValues, props) {
buildHTMLStyles(renderState, latestValues, props.transformTemplate);
}
scrapeMotionValuesFromProps(props, prevProps, visualElement) {
return scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
}
}
function isObjectKey(key, object) {
return key in object;
}
class ObjectVisualElement extends VisualElement {
constructor() {
super(...arguments);
this.type = "object";
}
readValueFromInstance(instance, key) {
if (isObjectKey(key, instance)) {
const value = instance[key];
if (typeof value === "string" || typeof value === "number") {
return value;
}
}
return undefined;
}
getBaseTargetFromProps() {
return undefined;
}
removeValueFromRenderState(key, renderState) {
delete renderState.output[key];
}
measureInstanceViewportBox() {
return createBox();
}
build(renderState, latestValues) {
Object.assign(renderState.output, latestValues);
}
renderInstance(instance, { output }) {
Object.assign(instance, output);
}
sortInstanceNodePosition() {
return 0;
}
}
/**
* A set of attribute names that are always read/written as camel case.
*/
const camelCaseAttributes = new Set([
"baseFrequency",
"diffuseConstant",
"kernelMatrix",
"kernelUnitLength",
"keySplines",
"keyTimes",
"limitingConeAngle",
"markerHeight",
"markerWidth",
"numOctaves",
"targetX",
"targetY",
"surfaceScale",
"specularConstant",
"specularExponent",
"stdDeviation",
"tableValues",
"viewBox",
"gradientTransform",
"pathLength",
"startOffset",
"textLength",
"lengthAdjust",
]);
const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
function renderSVG(element, renderState, _styleProp, projection) {
renderHTML(element, renderState, undefined, projection);
for (const key in renderState.attrs) {
element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
}
}
function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
for (const key in props) {
/**
* A MotionValue child is rendered as text content by
* DOMVisualElement, so it mustn't also be written as an attribute.
*/
if (key !== "children" &&
(isMotionValue(props[key]) ||
isMotionValue(prevProps[key]))) {
const targetKey = transformPropOrder.indexOf(key) !== -1
? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
: key;
newValues[targetKey] = props[key];
}
}
return newValues;
}
class SVGVisualElement extends DOMVisualElement {
constructor() {
super(...arguments);
this.type = "svg";
this.isSVGTag = false;
this.measureInstanceViewportBox = createBox;
}
getBaseTargetFromProps(props, key) {
/**
* An independent transform's base is never an attribute of the same
* name, e.g. is a position, not a translate. Like HTML it
* comes from style, falling back to the transform's default.
*/
return transformProps.has(key)
? super.getBaseTargetFromProps(props, key) ??
defaultTransformValue(key)
: props[key];
}
/**
* An independent transform's origin is never read from the DOM, so it
* starts from its latest or default value and renders on mount.
*/
getDefaultValue(key) {
return transformProps.has(key)
? this.latestValues[key] ?? defaultTransformValue(key)
: undefined;
}
readValueFromInstance(instance, key) {
if (transformProps.has(key)) {
const defaultType = getDefaultValueType(key);
return defaultType ? defaultType.default || 0 : 0;
}
if (cssStyleProperties.includes(key)) {
const computedStyle = getComputedStyle(instance);
const value = computedStyle[key];
if (typeof value === "string" && value)
return value.trim();
}
key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
return instance.getAttribute(key);
}
scrapeMotionValuesFromProps(props, prevProps, visualElement) {
return scrapeMotionValuesFromProps(props, prevProps, visualElement);
}
build(renderState, latestValues, props) {
buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate, props.style);
}
renderInstance(instance, renderState, styleProp, projection) {
renderSVG(instance, renderState, styleProp, projection);
}
mount(instance) {
this.isSVGTag = isSVGTag(instance.tagName);
super.mount(instance);
}
}
function shallowCompare(next, prev) {
if (!Array.isArray(prev))
return false;
const prevLength = prev.length;
if (prevLength !== next.length)
return false;
for (let i = 0; i < prevLength; i++) {
if (prev[i] !== next[i])
return false;
}
return true;
}
const reversePriorityOrder = [...variantPriorityOrder].reverse();
/**
* Diffs the element's animation props (one layer per AnimationType, highest
* priority wins each value) against the previous call and starts animations
* for what changed.
*
* Uses `any` type for visualElement to avoid circular dependencies. It reads
* props, parent, presenceContext, variantChildren, enteringChildren,
* manuallyAnimateOnMount, blockInitialAnimation, getValue(),
* getBaseTargetFromProps(), baseTarget and initialValues.
*/
function createAnimationState(visualElement) {
let animate = (animations) => Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));
let state = createState();
let isInitialRender = true;
/**
* After a reset (StrictMode, Suspense, AnimatePresence re-entry) the next
* animateChanges() mounts again, but initial={false} no longer applies.
*/
let wasReset = false;
function animateChanges(changedActiveType) {
const { props, parent, manuallyAnimateOnMount } = visualElement;
const isMounting = isInitialRender || wasReset;
const animations = [];
/**
* Values removed from a type. A lower-priority type that defines
* them animates them back, otherwise they fall back to a base target.
*/
const removedKeys = new Set();
/**
* Values claimed by active, higher-priority types.
*/
let encounteredKeys = {};
/**
* Once a type has been deactivated, lower-priority variant labels
* re-animate so variant children animate back too.
*/
let removedVariantIndex = Infinity;
/**
* Variant labels are inherited from the closest variant-controlling
* ancestor, unless an element on the way has inherit={false}.
*/
let source = visualElement;
do
source = source.props.inherit !== false && source.parent;
while (source && !source.isControllingVariants);
reversePriorityOrder.forEach((type, i) => {
const typeState = state[type];
const ownProp = props[type];
const inheritedProp = source && source.props[type];
const prop = ownProp !== undefined
? ownProp
: isVariantLabel(inheritedProp) || inheritedProp === false
? inheritedProp
: undefined;
const propIsVariant = isVariantLabel(prop);
const activeDelta = type === changedActiveType ? typeState.isActive : null;
if (activeDelta === false)
removedVariantIndex = i;
/**
* Inherited labels are animated by the parent through
* variantChildren, unless this element mounted after its parent.
*/
const isInherited = propIsVariant &&
ownProp === undefined &&
!(isMounting && manuallyAnimateOnMount);
typeState.protectedKeys = { ...encounteredKeys };
if ((!typeState.isActive && activeDelta === null) ||
(!prop && !typeState.prevProp) ||
isAnimationControls(prop) ||
typeof prop === "boolean") {
return;
}
/**
* Don't re-resolve a running exit: a changed custom would start
* new value animations that stop the originals, leaving the exit
* promise unresolved and the element stuck in the DOM.
*/
if (type === "exit" && typeState.isActive && activeDelta !== true) {
encounteredKeys = {
...encounteredKeys,
...typeState.prevResolvedValues,
};
return;
}
const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
let shouldAnimateType = variantDidChange ||
(propIsVariant &&
((activeDelta && !isInherited) || i > removedVariantIndex));
let handledRemovedValues = false;
const definitionList = Array.isArray(prop) ? prop : [prop];
let resolvedValues = {};
if (activeDelta !== false) {
for (const definition of definitionList) {
const { transition, transitionEnd, ...target } = resolveVariant(visualElement, definition, getTypeCustom(visualElement, type)) || {};
resolvedValues = {
...resolvedValues,
...target,
...transitionEnd,
};
}
}
const { prevResolvedValues } = typeState;
for (const key in { ...prevResolvedValues, ...resolvedValues }) {
if (key in encounteredKeys)
continue;
const next = resolvedValues[key];
const prev = prevResolvedValues[key];
/**
* Keyframes compare by value, but replay whenever the
* variant label changed.
*/
const valueHasChanged = Array.isArray(next) && Array.isArray(prev)
? !shallowCompare(next, prev) || variantDidChange
: next !== prev;
if (valueHasChanged &&
(next === undefined || next === null)) {
removedKeys.add(key);
}
else if (valueHasChanged ||
(next !== undefined && removedKeys.has(key))) {
shouldAnimateType = true;
if (removedKeys.delete(key))
handledRemovedValues = true;
typeState.needsAnimating[key] = true;
const motionValue = visualElement.getValue(key);
if (motionValue)
motionValue.liveStyle = false;
}
else {
typeState.protectedKeys[key] = true;
}
}
typeState.prevProp = prop;
typeState.prevResolvedValues = resolvedValues;
if (typeState.isActive) {
encounteredKeys = { ...encounteredKeys, ...resolvedValues };
}
if (shouldAnimateType &&
(!(isInherited && variantDidChange) || handledRemovedValues)) {
for (const animation of definitionList) {
const options = { type };
/**
* Elements that mount into an already-mounted parent
* animate themselves, staggered by the parent variant's
* delayChildren.
*/
if (typeof animation === "string" &&
isMounting &&
manuallyAnimateOnMount &&
parent?.enteringChildren) {
const delayChildren = resolveVariant(parent, animation)
?.transition?.delayChildren;
options.delay = calcChildStagger(parent.enteringChildren, visualElement, delayChildren);
}
animations.push({ animation, options });
}
}
});
/**
* Removed values that no lower-priority type defines animate back to
* initial, then style, then the value as first read. If initial no
* longer defines a value it once did, it stays where it is.
*/
if (removedKeys.size) {
const { initial } = props;
const fallbackAnimation = {};
const resolvedInitial = typeof initial !== "boolean" &&
resolveVariant(visualElement, Array.isArray(initial) ? initial[0] : initial, visualElement.presenceContext?.custom);
if (resolvedInitial && resolvedInitial.transition) {
fallbackAnimation.transition = resolvedInitial.transition;
}
removedKeys.forEach((key) => {
const motionValue = visualElement.getValue(key);
if (motionValue)
motionValue.liveStyle = true;
const fromInitial = resolvedInitial && !Array.isArray(initial)
? resolvedInitial[key]
: undefined;
const fromProps = visualElement.getBaseTargetFromProps(props, key);
fallbackAnimation[key] =
(fromInitial !== undefined
? fromInitial
: fromProps !== undefined && !isMotionValue(fromProps)
? fromProps
: visualElement.initialValues[key] === undefined
? visualElement.baseTarget[key]
: undefined) ?? null;
/**
* If it stays where it is, that's now its base. Otherwise a
* later removal (like a gesture ending) would also stay,
* leaving the value stuck. Stop first so accelerated
* animations sync the value they reached. In practice initial
* only changes like this with Fast Refresh, so this is
* dev-only (#3787).
*/
if (process.env.NODE_ENV !== "production" &&
fallbackAnimation[key] === null &&
visualElement.initialValues[key] !== undefined) {
delete visualElement.initialValues[key];
motionValue?.stop();
visualElement.baseTarget[key] = motionValue?.get();
}
});
animations.push({ animation: fallbackAnimation });
}
const blockAnimation = (isMounting && visualElement.blockInitialAnimation) ||
(isInitialRender &&
!manuallyAnimateOnMount &&
(props.initial === false || props.initial === props.animate));
isInitialRender = wasReset = false;
return !blockAnimation && animations.length
? animate(animations)
: Promise.resolve();
}
/**
* Change whether a certain animation type is active.
*/
function setActive(type, isActive) {
if (state[type].isActive === isActive)
return Promise.resolve();
visualElement.variantChildren?.forEach((child) => child.animationState?.setActive(type, isActive));
state[type].isActive = isActive;
const animations = animateChanges(type);
for (const key in state) {
state[key].protectedKeys = {};
}
return animations;
}
return {
animateChanges,
setActive,
/**
* Allows tests to inject a mocked animate function.
* @internal
*/
setAnimateFunction: (makeAnimator) => {
animate = makeAnimator(visualElement);
},
getState: () => state,
reset: () => {
state = createState();
wasReset = true;
},
};
}
function checkVariantsDidChange(prev, next) {
if (typeof next === "string") {
return next !== prev;
}
else if (Array.isArray(next)) {
return !shallowCompare(next, prev);
}
return false;
}
function createState() {
const state = {};
for (const type of variantPriorityOrder) {
state[type] = {
isActive: type === "animate",
protectedKeys: {},
needsAnimating: {},
prevResolvedValues: {},
};
}
return state;
}
const numVariantProps = variantProps.length;
/**
* Get variant context from a visual element's parent chain.
* Uses `any` type for visualElement to avoid circular dependencies.
*/
function getVariantContext(visualElement) {
if (!visualElement)
return undefined;
if (!visualElement.isControllingVariants) {
const context = visualElement.parent
? getVariantContext(visualElement.parent) || {}
: {};
if (visualElement.props.initial !== undefined) {
context.initial = visualElement.props.initial;
}
return context;
}
const context = {};
for (let i = 0; i < numVariantProps; i++) {
const name = variantProps[i];
const prop = visualElement.props[name];
if (isVariantLabel(prop) || prop === false) {
context[name] = prop;
}
}
return context;
}
/**
* Reset an axis to the provided origin box.
*
* This is a mutative operation.
*/
function copyAxisInto(axis, originAxis) {
axis.min = originAxis.min;
axis.max = originAxis.max;
}
/**
* Reset a box to the provided origin box.
*
* This is a mutative operation.
*/
function copyBoxInto(box, originBox) {
copyAxisInto(box.x, originBox.x);
copyAxisInto(box.y, originBox.y);
}
/**
* Reset a delta to the provided origin box.
*
* This is a mutative operation.
*/
function copyAxisDeltaInto(delta, originDelta) {
delta.translate = originDelta.translate;
delta.scale = originDelta.scale;
delta.originPoint = originDelta.originPoint;
delta.origin = originDelta.origin;
}
const SCALE_PRECISION = 0.0001;
const SCALE_MIN = 1 - SCALE_PRECISION;
const SCALE_MAX = 1 + SCALE_PRECISION;
const TRANSLATE_PRECISION = 0.01;
const TRANSLATE_MIN = 0 - TRANSLATE_PRECISION;
const TRANSLATE_MAX = 0 + TRANSLATE_PRECISION;
function calcLength(axis) {
return axis.max - axis.min;
}
function isNear(value, target, maxDistance) {
return Math.abs(value - target) <= maxDistance;
}
function calcAxisDelta(delta, source, target, origin = 0.5) {
delta.origin = origin;
delta.originPoint = mixNumber$1(source.min, source.max, delta.origin);
delta.scale = calcLength(target) / calcLength(source);
delta.translate =
mixNumber$1(target.min, target.max, delta.origin) - delta.originPoint;
if ((delta.scale >= SCALE_MIN && delta.scale <= SCALE_MAX) ||
isNaN(delta.scale)) {
delta.scale = 1.0;
}
if ((delta.translate >= TRANSLATE_MIN &&
delta.translate <= TRANSLATE_MAX) ||
isNaN(delta.translate)) {
delta.translate = 0.0;
}
}
function calcBoxDelta(delta, source, target, origin) {
calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : undefined);
calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : undefined);
}
function calcRelativeAxis(target, relative, parent, anchor = 0) {
const anchorPoint = anchor
? mixNumber$1(parent.min, parent.max, anchor)
: parent.min;
target.min = anchorPoint + relative.min;
target.max = target.min + calcLength(relative);
}
function calcRelativeBox(target, relative, parent, anchor) {
calcRelativeAxis(target.x, relative.x, parent.x, anchor?.x);
calcRelativeAxis(target.y, relative.y, parent.y, anchor?.y);
}
function calcRelativeAxisPosition(target, layout, parent, anchor = 0) {
const anchorPoint = anchor
? mixNumber$1(parent.min, parent.max, anchor)
: parent.min;
target.min = layout.min - anchorPoint;
target.max = target.min + calcLength(layout);
}
function calcRelativePosition(target, layout, parent, anchor) {
calcRelativeAxisPosition(target.x, layout.x, parent.x, anchor?.x);
calcRelativeAxisPosition(target.y, layout.y, parent.y, anchor?.y);
}
/**
* Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse
*/
function removePointDelta(point, translate, scale, originPoint, boxScale) {
point -= translate;
point = scalePoint(point, 1 / scale, originPoint);
if (boxScale !== undefined) {
point = scalePoint(point, 1 / boxScale, originPoint);
}
return point;
}
/**
* Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse
*/
function removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {
if (percent.test(translate)) {
translate = parseFloat(translate);
const relativeProgress = mixNumber$1(sourceAxis.min, sourceAxis.max, translate / 100);
translate = relativeProgress - sourceAxis.min;
}
if (typeof translate !== "number")
return;
let originPoint = mixNumber$1(originAxis.min, originAxis.max, origin);
if (axis === originAxis)
originPoint -= translate;
axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale);
axis.max = removePointDelta(axis.max, translate, scale, originPoint, boxScale);
}
/**
* Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse
* and acts as a bridge between motion values and removeAxisDelta
*/
function removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) {
removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis);
}
/**
* The names of the motion values we want to apply as translation, scale and origin.
*/
const xKeys = ["x", "scaleX", "originX"];
const yKeys = ["y", "scaleY", "originY"];
/**
* Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse
* and acts as a bridge between motion values and removeAxisDelta
*/
function removeBoxTransforms(box, transforms, originBox, sourceBox) {
removeAxisTransforms(box.x, transforms, xKeys, originBox ? originBox.x : undefined, sourceBox ? sourceBox.x : undefined);
removeAxisTransforms(box.y, transforms, yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined);
}
function isAxisDeltaZero(delta) {
return delta.translate === 0 && delta.scale === 1;
}
function isDeltaZero(delta) {
return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y);
}
function axisEquals(a, b) {
return a.min === b.min && a.max === b.max;
}
function boxEquals(a, b) {
return axisEquals(a.x, b.x) && axisEquals(a.y, b.y);
}
function axisEqualsRounded(a, b) {
return (Math.round(a.min) === Math.round(b.min) &&
Math.round(a.max) === Math.round(b.max));
}
function boxEqualsRounded(a, b) {
return axisEqualsRounded(a.x, b.x) && axisEqualsRounded(a.y, b.y);
}
function aspectRatio(box) {
return calcLength(box.x) / calcLength(box.y);
}
function axisDeltaEquals(a, b) {
return (a.translate === b.translate &&
a.scale === b.scale &&
a.originPoint === b.originPoint);
}
function eachAxis(callback) {
return [callback("x"), callback("y")];
}
function pixelsToPercent(pixels, axis) {
if (axis.max === axis.min)
return 0;
return (pixels / (axis.max - axis.min)) * 100;
}
/**
* We always correct borderRadius as a percentage rather than pixels to reduce paints.
* For example, if you are projecting a box that is 100px wide with a 10px borderRadius
* into a box that is 200px wide with a 20px borderRadius, that is actually a 10%
* borderRadius in both states. If we animate between the two in pixels that will trigger
* a paint each time. If we animate between the two in percentage we'll avoid a paint.
*/
const correctBorderRadius = {
correct: (latest, node) => {
if (!node.target)
return latest;
/**
* If latest is a string, if it's a percentage we can return immediately as it's
* going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
*/
if (typeof latest === "string") {
if (px.test(latest)) {
latest = parseFloat(latest);
}
else {
return latest;
}
}
/**
* If latest is a number, it's a pixel value. We use the current viewportBox to calculate that
* pixel value as a percentage of each axis
*/
const x = pixelsToPercent(latest, node.target.x);
const y = pixelsToPercent(latest, node.target.y);
return `${x}% ${y}%`;
},
};
const correctBoxShadow = {
correct: (latest, { treeScale, projectionDelta }) => {
const original = latest;
const shadow = complex.parse(latest);
// TODO: Doesn't support multiple shadows
if (shadow.length > 5)
return original;
const template = complex.createTransformer(latest);
const offset = typeof shadow[0] !== "number" ? 1 : 0;
// Calculate the overall context scale
const xScale = projectionDelta.x.scale * treeScale.x;
const yScale = projectionDelta.y.scale * treeScale.y;
shadow[0 + offset] /= xScale;
shadow[1 + offset] /= yScale;
/**
* Ideally we'd correct x and y scales individually, but because blur and
* spread apply to both we have to take a scale average and apply that instead.
* We could potentially improve the outcome of this by incorporating the ratio between
* the two scales.
*/
const averageScale = mixNumber$1(xScale, yScale, 0.5);
// Blur
if (typeof shadow[2 + offset] === "number")
shadow[2 + offset] /= averageScale;
// Spread
if (typeof shadow[3 + offset] === "number")
shadow[3 + offset] /= averageScale;
return template(shadow);
},
};
function buildProjectionTransform(delta, treeScale, latestTransform) {
let transform = "";
/**
* The translations we use to calculate are always relative to the viewport coordinate space.
* But when we apply scales, we also scale the coordinate space of an element and its children.
* For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need
* to move an element 100 pixels, we actually need to move it 200 in within that scaled space.
*/
const xTranslate = delta.x.translate / treeScale.x;
const yTranslate = delta.y.translate / treeScale.y;
const zTranslate = latestTransform?.z || 0;
if (xTranslate || yTranslate || zTranslate) {
transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `;
}
/**
* Apply scale correction for the tree transform.
* This will apply scale to the screen-orientated axes.
*/
if (treeScale.x !== 1 || treeScale.y !== 1) {
transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
}
if (latestTransform) {
const { transformPerspective, rotate, pathRotation, rotateX, rotateY, rotateZ, skewX, skewY, } = latestTransform;
if (transformPerspective)
transform = `perspective(${transformPerspective}px) ${transform}`;
if (rotate)
transform += `rotate(${rotate}deg) `;
// Additive `rotate()` so user `rotate` isn't clobbered.
if (pathRotation)
transform += `rotate(${pathRotation}deg) `;
if (rotateX)
transform += `rotateX(${rotateX}deg) `;
if (rotateY)
transform += `rotateY(${rotateY}deg) `;
if (rotateZ)
transform += `rotateZ(${rotateZ}deg) `;
if (skewX)
transform += `skewX(${skewX}deg) `;
if (skewY)
transform += `skewY(${skewY}deg) `;
}
/**
* Apply scale to match the size of the element to the size we want it.
* This will apply scale to the element-orientated axes.
*/
const elementScaleX = delta.x.scale * treeScale.x;
const elementScaleY = delta.y.scale * treeScale.y;
if (elementScaleX !== 1 || elementScaleY !== 1) {
transform += `scale(${elementScaleX}, ${elementScaleY})`;
}
return transform || "none";
}
const numBorders = cornerRadiusProps.length;
const mixedTransforms = [
"rotate",
"rotateX",
"rotateY",
"rotateZ",
"skewX",
"skewY",
];
const numMixedTransforms = mixedTransforms.length;
const isPx = (value) => typeof value === "number" || px.test(value);
function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
if (shouldCrossfadeOpacity) {
target.opacity = mixNumber$1(0, lead.opacity ?? 1, easeCrossfadeIn(progress));
target.opacityExit = mixNumber$1(follow.opacity ?? 1, 0, easeCrossfadeOut(progress));
}
else if (isOnlyMember) {
target.opacity = mixNumber$1(follow.opacity ?? 1, lead.opacity ?? 1, progress);
}
/**
* Mix border radius
*/
for (let i = 0; i < numBorders; i++) {
const borderLabel = cornerRadiusProps[i];
let followRadius = getRadius(follow, borderLabel);
let leadRadius = getRadius(lead, borderLabel);
if (followRadius === undefined && leadRadius === undefined)
continue;
followRadius || (followRadius = 0);
leadRadius || (leadRadius = 0);
const canMix = followRadius === 0 ||
leadRadius === 0 ||
isPx(followRadius) === isPx(leadRadius);
if (canMix) {
target[borderLabel] = Math.max(mixNumber$1(asNumber(followRadius), asNumber(leadRadius), progress), 0);
if (percent.test(leadRadius) || percent.test(followRadius)) {
target[borderLabel] += "%";
}
}
else {
target[borderLabel] = leadRadius;
}
}
/**
* Mix rotation and skew. These can't be projected, so mix them every
* frame rather than leaving them frozen at the animation-start snapshot.
*/
for (let i = 0; i < numMixedTransforms; i++) {
const key = mixedTransforms[i];
if (follow[key] || lead[key]) {
target[key] = mixNumber$1(follow[key] || 0, lead[key] || 0, progress);
}
}
}
function getRadius(values, radiusName) {
return values[radiusName] !== undefined
? values[radiusName]
: values.borderRadius;
}
const easeCrossfadeIn = /*@__PURE__*/ compress(0, 0.5, motionUtils.circOut);
const easeCrossfadeOut = /*@__PURE__*/ compress(0.5, 0.95, motionUtils.noop);
function compress(min, max, easing) {
return (p) => {
// Could replace ifs with clamp
if (p < min)
return 0;
if (p > max)
return 1;
return easing(motionUtils.progress(min, max, p));
};
}
function animateSingleValue(value, keyframes, options) {
const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
return motionValue$1.animation;
}
function addDomEvent(target, eventName, handler, options = { passive: true }) {
target.addEventListener(eventName, handler, options);
return () => target.removeEventListener(eventName, handler, options);
}
const compareByDepth = (a, b) => a.depth - b.depth;
class FlatTree {
constructor() {
this.children = [];
this.isDirty = false;
}
add(child) {
motionUtils.addUniqueItem(this.children, child);
this.isDirty = true;
}
remove(child) {
motionUtils.removeItem(this.children, child);
this.isDirty = true;
}
forEach(callback) {
this.isDirty && this.children.sort(compareByDepth);
this.isDirty = false;
this.children.forEach(callback);
}
}
/**
* Timeout defined in ms
*/
function delay(callback, timeout) {
const start = time.now();
const checkElapsed = ({ timestamp }) => {
const elapsed = timestamp - start;
if (elapsed >= timeout) {
cancelFrame(checkElapsed);
callback(elapsed - timeout);
}
};
frame.setup(checkElapsed, true);
return () => cancelFrame(checkElapsed);
}
function delayInSeconds(callback, timeout) {
return delay(callback, motionUtils.secondsToMilliseconds(timeout));
}
/**
* If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
*/
function resolveMotionValue(value) {
return isMotionValue(value) ? value.get() : value;
}
class NodeStack {
constructor() {
this.members = [];
}
add(node) {
motionUtils.addUniqueItem(this.members, node);
for (let i = this.members.length - 1; i >= 0; i--) {
const member = this.members[i];
if (member === node || member === this.lead || member === this.prevLead)
continue;
const inst = member.instance;
if ((!inst || inst.isConnected === false) && !member.snapshot) {
motionUtils.removeItem(this.members, member);
member.unmount();
}
}
node.scheduleRender();
}
remove(node) {
motionUtils.removeItem(this.members, node);
if (node === this.prevLead)
this.prevLead = undefined;
if (node === this.lead) {
const prevLead = this.members[this.members.length - 1];
if (prevLead)
this.promote(prevLead);
}
}
relegate(node) {
for (let i = this.members.indexOf(node) - 1; i >= 0; i--) {
const member = this.members[i];
if (member.isPresent !== false && member.instance?.isConnected !== false) {
this.promote(member);
return true;
}
}
return false;
}
promote(node, preserveFollowOpacity) {
const prevLead = this.lead;
if (node === prevLead)
return;
this.prevLead = prevLead;
this.lead = node;
node.show();
if (prevLead) {
prevLead.updateSnapshot();
node.scheduleRender();
const { layoutDependency: prevDep } = prevLead.options;
const { layoutDependency: nextDep } = node.options;
if (prevDep === undefined || prevDep !== nextDep) {
node.resumeFrom = prevLead;
if (preserveFollowOpacity)
prevLead.preserveOpacity = true;
if (prevLead.snapshot) {
node.snapshot = prevLead.snapshot;
node.snapshot.latestValues =
prevLead.animationValues || prevLead.latestValues;
}
if (node.root?.isUpdating)
node.isLayoutDirty = true;
}
if (node.options.crossfade === false)
prevLead.hide();
}
}
exitAnimationComplete() {
this.members.forEach((member) => {
member.options.onExitComplete?.();
member.resumingFrom?.options.onExitComplete?.();
});
}
scheduleRender() {
this.members.forEach((member) => member.instance && member.scheduleRender(false));
}
removeLeadSnapshot() {
if (this.lead?.snapshot)
this.lead.snapshot = undefined;
}
}
const defaultScaleCorrectors = {
borderRadius: {
...correctBorderRadius,
applyTo: [...cornerRadiusProps],
},
borderTopLeftRadius: correctBorderRadius,
borderTopRightRadius: correctBorderRadius,
borderBottomLeftRadius: correctBorderRadius,
borderBottomRightRadius: correctBorderRadius,
boxShadow: correctBoxShadow,
};
/**
* This should only ever be modified on the client otherwise it'll
* persist through server requests. If we need instanced states we
* could lazy-init via root.
*/
const globalProjectionState = {
/**
* Global flag as to whether the tree has animated since the last time
* we resized the window
*/
hasAnimatedSinceResize: true,
/**
* We set this to true once, on the first update. Any nodes added to the tree beyond that
* update will be given a `data-projection-id` attribute.
*/
hasEverUpdated: false,
};
/**
* Correctors registered via addScaleCorrector before projection loaded
* (e.g. with an async LazyMotion bundle) take precedence over the defaults.
*/
Object.assign(scaleCorrectors, {
...defaultScaleCorrectors,
...scaleCorrectors,
});
const metrics = {
nodes: 0,
calculatedTargetDeltas: 0,
calculatedProjections: 0,
};
const transformAxes = ["", "X", "Y", "Z"];
/**
* We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
* which has a noticeable difference in spring animations
*/
const animationTarget = 1000;
let id = 0;
function resetDistortingTransform(key, visualElement, values, sharedAnimationValues) {
const { latestValues } = visualElement;
// Record the distorting transform and then temporarily set it to 0
if (latestValues[key]) {
values[key] = latestValues[key];
visualElement.setStaticValue(key, 0);
if (sharedAnimationValues) {
sharedAnimationValues[key] = 0;
}
}
}
const demoteTransforms = ({ instance }) => instance && transformGroups.get(instance)?.demote();
function cancelTreeOptimisedTransformAnimations(projectionNode) {
projectionNode.hasCheckedOptimisedAppear = true;
if (projectionNode.root === projectionNode)
return;
const { visualElement } = projectionNode.options;
if (!visualElement)
return;
const appearId = getOptimisedAppearId(visualElement);
if (window.MotionHasOptimisedAnimation(appearId, "transform")) {
const { layout, layoutId } = projectionNode.options;
window.MotionCancelOptimisedAnimation(appearId, "transform", frame, !(layout || layoutId));
}
const { parent } = projectionNode;
if (parent && !parent.hasCheckedOptimisedAppear) {
cancelTreeOptimisedTransformAnimations(parent);
}
}
function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
return class ProjectionNode {
constructor(latestValues = {}, parent = defaultParent?.()) {
/**
* A unique ID generated for every projection node.
*/
this.id = id++;
/**
* An id that represents a unique session instigated by startUpdate.
*/
this.animationId = 0;
this.animationCommitId = 0;
/**
* A Set containing all this component's children. This is used to iterate
* through the children.
*
* TODO: This could be faster to iterate as a flat array stored on the root node.
*/
this.children = new Set();
/**
* Options for the node. We use this to configure what kind of layout animations
* we should perform (if any).
*/
this.options = {};
/**
* We use this to detect when its safe to shut down part of a projection tree.
* We have to keep projecting children for scale correction and relative projection
* until all their parents stop performing layout animations.
*/
this.isTreeAnimating = false;
this.isAnimationBlocked = false;
/**
* Flag to true if we think this layout has been changed. We can't always know this,
* currently we set it to true every time a component renders, or if it has a layoutDependency
* if that has changed between renders. Additionally, components can be grouped by LayoutGroup
* and if one node is dirtied, they all are.
*/
this.isLayoutDirty = false;
/**
* Flag to true if we think the projection calculations for this node needs
* recalculating as a result of an updated transform or layout animation.
*/
this.isProjectionDirty = false;
/**
* Flag to true if the layout *or* transform has changed. This then gets propagated
* throughout the projection tree, forcing any element below to recalculate on the next frame.
*/
this.isSharedProjectionDirty = false;
/**
* Flag transform dirty. This gets propagated throughout the whole tree but is only
* respected by shared nodes.
*/
this.isTransformDirty = false;
/**
* Block layout updates for instant layout transitions throughout the tree.
*/
this.updateManuallyBlocked = false;
this.updateBlockedByResize = false;
/**
* Set to true between the start of the first `willUpdate` call and the end of the `didUpdate`
* call.
*/
this.isUpdating = false;
/**
* If this is an SVG element we currently disable projection transforms
*/
this.isSVG = false;
/**
* Flag to true (during promotion) if a node doing an instant layout transition needs to reset
* its projection styles.
*/
this.needsReset = false;
/**
* Flags whether this node should have its transform reset prior to measuring.
*/
this.shouldResetTransform = false;
/**
* Store whether this node has been checked for optimised appear animations. As
* effects fire bottom-up, and we want to look up the tree for appear animations,
* this makes sure we only check each path once, stopping at nodes that
* have already been checked.
*/
this.hasCheckedOptimisedAppear = false;
/**
* An object representing the calculated contextual/accumulated/tree scale.
* This will be used to scale calculated projection transforms, as these are
* calculated in screen-space but need to be scaled for elements to visually
* make it to their calculated destinations.
*
* TODO: Lazy-init
*/
this.treeScale = { x: 1, y: 1 };
/**
*
*/
this.eventHandlers = new Map();
this.hasTreeAnimated = false;
// Note: Currently only running on root node
this.updateScheduled = false;
this.scheduleUpdate = () => this.update();
this.projectionUpdateScheduled = false;
this.checkUpdateFailed = () => {
if (this.isUpdating) {
this.isUpdating = false;
this.clearAllSnapshots();
}
};
/**
* This is a multi-step process as shared nodes might be of different depths. Nodes
* are sorted by depth order, so we need to resolve the entire tree before moving to
* the next step.
*/
this.updateProjection = () => {
this.projectionUpdateScheduled = false;
/**
* Reset debug counts. Manually resetting rather than creating a new
* object each frame.
*/
if (statsBuffer.value) {
metrics.nodes =
metrics.calculatedTargetDeltas =
metrics.calculatedProjections =
0;
}
this.nodes.forEach(propagateDirtyNodes);
this.nodes.forEach(resolveTargetDelta);
this.nodes.forEach(calcProjection);
this.nodes.forEach(cleanDirtyNodes);
if (statsBuffer.addProjectionMetrics) {
statsBuffer.addProjectionMetrics(metrics);
}
};
/**
* Frame calculations
*/
this.resolvedRelativeTargetAt = 0.0;
this.hasProjected = false;
this.isVisible = true;
this.animationProgress = 0;
/**
* Shared layout
*/
// TODO Only running on root node
this.sharedNodes = new Map();
this.latestValues = latestValues;
this.root = parent ? parent.root || parent : this;
this.path = parent ? [...parent.path, parent] : [];
this.parent = parent;
this.depth = parent ? parent.depth + 1 : 0;
for (let i = 0; i < this.path.length; i++) {
this.path[i].shouldResetTransform = true;
}
if (this.root === this)
this.nodes = new FlatTree();
}
addEventListener(name, handler) {
if (!this.eventHandlers.has(name)) {
this.eventHandlers.set(name, new motionUtils.SubscriptionManager());
}
return this.eventHandlers.get(name).add(handler);
}
notifyListeners(name, ...args) {
const subscriptionManager = this.eventHandlers.get(name);
subscriptionManager && subscriptionManager.notify(...args);
}
hasListeners(name) {
return this.eventHandlers.has(name);
}
/**
* Lifecycles
*/
mount(instance) {
if (this.instance)
return;
this.isSVG = isSVGElement(instance) && !isSVGSVGElement(instance);
this.instance = instance;
const { layoutId, layout, visualElement } = this.options;
if (visualElement && !visualElement.current) {
visualElement.mount(instance);
}
this.root.nodes.add(this);
this.parent && this.parent.children.add(this);
if (this.root.hasTreeAnimated && (layout || layoutId)) {
this.isLayoutDirty = true;
}
if (attachResizeListener) {
let cancelDelay;
let innerWidth = 0;
const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);
// Set initial innerWidth in a frame.read callback to batch the read
frame.read(() => {
innerWidth = window.innerWidth;
});
attachResizeListener(instance, () => {
const newInnerWidth = window.innerWidth;
if (newInnerWidth === innerWidth)
return;
innerWidth = newInnerWidth;
this.root.updateBlockedByResize = true;
cancelDelay && cancelDelay();
cancelDelay = delay(resizeUnblockUpdate, 250);
if (globalProjectionState.hasAnimatedSinceResize) {
globalProjectionState.hasAnimatedSinceResize = false;
this.nodes.forEach(finishAnimation);
}
});
}
if (layoutId) {
this.root.registerSharedNode(layoutId, this);
}
this.addLayoutListener();
}
/**
* Only register the layout animation handler if this node requires
* layout animation. This is called on mount, and again whenever options
* change, as `layout` or `layoutId` may be enabled after mount.
*/
addLayoutListener() {
const { layoutId, layout, visualElement, animate } = this.options;
if (!this.instance ||
this.hasLayoutListener ||
animate === false ||
!visualElement ||
!(layoutId || layout))
return;
this.hasLayoutListener = true;
this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeLayoutChanged, layout: newLayout, }) => {
if (this.isAnimationBlocked) {
this.target = undefined;
this.relativeTarget = undefined;
return;
}
// TODO: Check here if an animation exists
const layoutTransition = this.options.transition ||
visualElement.getDefaultTransition() ||
defaultLayoutTransition;
const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();
/**
* The target layout of the element might stay the same,
* but its position relative to its parent has changed.
*/
const hasTargetChanged = !this.targetLayout ||
!boxEqualsRounded(this.targetLayout, newLayout);
/*
* Note: Disabled to fix relative animations always triggering new
* layout animations. If this causes further issues, we can try
* a different approach to detecting relative target changes.
*/
// || hasRelativeLayoutChanged
/**
* If the layout hasn't seemed to have changed, it might be that the
* element is visually in the same place in the document but its position
* relative to its parent has indeed changed. So here we check for that.
*/
const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeLayoutChanged;
if (this.options.layoutRoot ||
this.resumeFrom ||
hasOnlyRelativeTargetChanged ||
(hasLayoutChanged &&
(hasTargetChanged || !this.currentAnimation))) {
if (this.resumeFrom) {
this.resumingFrom = this.resumeFrom;
this.resumingFrom.resumingFrom = undefined;
}
const animationOptions = {
...getValueTransition(layoutTransition, "layout"),
onPlay: onLayoutAnimationStart,
onComplete: onLayoutAnimationComplete,
};
if (visualElement.shouldReduceMotion ||
this.options.layoutRoot) {
animationOptions.delay = 0;
animationOptions.type = false;
}
this.startAnimation(animationOptions);
/**
* Set animation origin after starting animation to avoid layout jump
* caused by stopping previous layout animation
*/
this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged, animationOptions.path);
}
else {
/**
* If the layout hasn't changed and we have an animation that hasn't started yet,
* finish it immediately. Otherwise it will be animating from a location
* that was probably never committed to screen and look like a jumpy box.
*/
if (!hasLayoutChanged) {
finishAnimation(this);
}
if (this.isLead() && this.options.onExitComplete) {
this.options.onExitComplete();
}
}
this.targetLayout = newLayout;
});
}
unmount() {
this.options.layoutId && this.willUpdate();
this.root.nodes.remove(this);
const stack = this.getStack();
stack && stack.remove(this);
this.parent && this.parent.children.delete(this);
this.instance = undefined;
this.eventHandlers.clear();
this.hasLayoutListener = false;
cancelFrame(this.updateProjection);
}
// only on the root
blockUpdate() {
this.updateManuallyBlocked = true;
}
unblockUpdate() {
this.updateManuallyBlocked = false;
}
isUpdateBlocked() {
return this.updateManuallyBlocked || this.updateBlockedByResize;
}
// Note: currently only running on root node
startUpdate() {
if (this.isUpdateBlocked())
return;
this.isUpdating = true;
this.nodes && this.nodes.forEach(resetSkewAndRotation);
this.animationId++;
}
getTransformTemplate() {
const { visualElement } = this.options;
return visualElement && visualElement.getProps().transformTemplate;
}
willUpdate(shouldNotifyListeners = true) {
this.root.hasTreeAnimated = true;
if (this.root.isUpdateBlocked()) {
this.options.onExitComplete && this.options.onExitComplete();
return;
}
/**
* If we're running optimised appear animations then these must be
* cancelled before measuring the DOM. This is so we can measure
* the true layout of the element rather than the WAAPI animation
* which will be unaffected by the resetSkewAndRotate step.
*
* Note: This is a DOM write. Worst case scenario is this is sandwiched
* between other snapshot reads which will cause unnecessary style recalculations.
* This has to happen here though, as we don't yet know which nodes will need
* snapshots in startUpdate(), but we only want to cancel optimised animations
* if a layout animation measurement is actually going to be affected by them.
*/
if (window.MotionCancelOptimisedAnimation &&
!this.hasCheckedOptimisedAppear) {
cancelTreeOptimisedTransformAnimations(this);
}
!this.root.isUpdating && this.root.startUpdate();
if (this.isLayoutDirty)
return;
/**
* Accelerated transforms aren't reflected in latestValues or
* removed by resetTransform, so move them back to the main
* thread before this node, or its ancestors, are measured.
*/
demoteTransforms(this);
this.isLayoutDirty = true;
for (let i = 0; i < this.path.length; i++) {
const node = this.path[i];
node.shouldResetTransform = true;
demoteTransforms(node);
/**
* Percentage translates resolve against layoutBox dimensions,
* so ancestors with them must be re-measured after transform reset.
*/
if (typeof node.latestValues.x === "string" ||
typeof node.latestValues.y === "string") {
node.isLayoutDirty = true;
}
node.updateScroll("snapshot");
if (node.options.layoutRoot) {
node.willUpdate(false);
}
/**
* Measure the nearest dragged ancestor before the DOM
* changes, so this node can follow its layout change.
*/
if (node.isAnimationBlocked) {
node.dragSnapshot || (node.dragSnapshot = node.measure());
this.dragAncestor = node;
}
}
const { layoutId, layout } = this.options;
if (layoutId === undefined && !layout)
return;
const transformTemplate = this.getTransformTemplate();
this.prevTransformTemplateValue = transformTemplate
? transformTemplate(this.latestValues, "")
: undefined;
this.updateSnapshot();
shouldNotifyListeners && this.notifyListeners("willUpdate");
}
update() {
this.updateScheduled = false;
const updateWasBlocked = this.isUpdateBlocked();
// When doing an instant transition, we skip the layout update,
// but should still clean up the measurements so that the next
// snapshot could be taken correctly.
if (updateWasBlocked) {
const wasBlockedByResize = this.updateBlockedByResize;
this.unblockUpdate();
this.updateBlockedByResize = false;
this.clearAllSnapshots();
/**
* When blocked by resize, still measure layouts so
* callbacks like onLayoutMeasure fire (e.g. Reorder).
* Skip notifyLayoutUpdate to prevent animations.
*/
if (wasBlockedByResize) {
this.nodes.forEach(forceLayoutMeasure);
}
this.nodes.forEach(clearMeasurements);
return;
}
/**
* If this is a repeat of didUpdate then ignore the animation.
*/
if (this.animationId <= this.animationCommitId) {
this.nodes.forEach(clearIsLayoutDirty);
return;
}
this.animationCommitId = this.animationId;
if (!this.isUpdating) {
this.nodes.forEach(clearIsLayoutDirty);
}
else {
this.isUpdating = false;
/**
* Ensure animation-blocked nodes (e.g. during drag)
* get measured even when memoized (willUpdate skipped).
*/
this.nodes.forEach(ensureDraggedNodesSnapshotted);
this.nodes.forEach(syncRelativeLayout);
/**
* Write
*/
this.nodes.forEach(resetTransformStyle);
/**
* Read ==================
*/
// Update layout measurements of updated children
this.nodes.forEach(updateLayout);
/**
* Write
*/
// Notify listeners that the layout is updated
this.nodes.forEach(notifyLayoutUpdate);
}
this.clearAllSnapshots();
/**
* Manually flush any pending updates. Ideally
* we could leave this to the following requestAnimationFrame but this seems
* to leave a flash of incorrectly styled content.
*/
const now = time.now();
frameData.delta = motionUtils.clamp(0, 1000 / 60, now - frameData.timestamp);
frameData.timestamp = now;
frameData.isProcessing = true;
frameSteps.update.process(frameData);
frameSteps.preRender.process(frameData);
frameSteps.render.process(frameData);
frameData.isProcessing = false;
}
didUpdate() {
if (!this.updateScheduled) {
this.updateScheduled = true;
microtask.read(this.scheduleUpdate);
}
}
clearAllSnapshots() {
this.nodes.forEach(clearSnapshot);
/**
* A stack's last member can unmount while a replacement with the
* same layoutId mounts in the same commit, so the stack (and its
* lead) must outlive the unmount for the replacement to resume
* from it. By now that handoff has happened, so stacks that are
* still empty only retain unmounted nodes and can be released.
*/
this.sharedNodes.forEach((stack, layoutId) => stack.members.length
? stack.removeLeadSnapshot()
: this.sharedNodes.delete(layoutId));
}
scheduleUpdateProjection() {
if (!this.projectionUpdateScheduled) {
this.projectionUpdateScheduled = true;
frame.preRender(this.updateProjection, false, true);
}
}
scheduleCheckAfterUnmount() {
/**
* If the unmounting node is in a layoutGroup and did trigger a willUpdate,
* we manually call didUpdate to give a chance to the siblings to animate.
* Otherwise, cleanup all snapshots to prevents future nodes from reusing them.
*/
frame.postRender(() => {
if (this.isLayoutDirty) {
this.root.didUpdate();
}
else {
this.root.checkUpdateFailed();
}
});
}
/**
* Update measurements
*/
updateSnapshot() {
if (this.snapshot || !this.instance)
return;
this.snapshot = this.measure();
if (this.snapshot &&
!calcLength(this.snapshot.measuredBox.x) &&
!calcLength(this.snapshot.measuredBox.y)) {
this.snapshot = undefined;
}
}
updateLayout() {
if (!this.instance)
return;
this.updateScroll();
if (!(this.options.alwaysMeasureLayout && this.isLead()) &&
!this.isLayoutDirty) {
return;
}
/**
* When a node is mounted, it simply resumes from the prevLead's
* snapshot instead of taking a new one, but the ancestors scroll
* might have updated while the prevLead is unmounted. We need to
* update the scroll again to make sure the layout we measure is
* up to date.
*/
if (this.resumeFrom && !this.resumeFrom.instance) {
for (let i = 0; i < this.path.length; i++) {
const node = this.path[i];
node.updateScroll();
}
}
const prevLayout = this.layout;
this.layout = this.measure(false);
if (!this.layoutCorrected)
this.layoutCorrected = createBox();
this.isLayoutDirty = false;
this.projectionDelta = undefined;
this.notifyListeners("measure", this.layout.layoutBox);
const { visualElement } = this.options;
visualElement &&
visualElement.notify("LayoutMeasure", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : undefined);
}
updateScroll(phase = "measure") {
let needsMeasurement = Boolean(this.options.layoutScroll && this.instance);
if (this.scroll &&
this.scroll.animationId === this.root.animationId &&
this.scroll.phase === phase) {
needsMeasurement = false;
}
if (needsMeasurement && this.instance) {
const isRoot = checkIsScrollRoot(this.instance);
this.scroll = {
animationId: this.root.animationId,
phase,
isRoot,
offset: measureScroll(this.instance),
wasRoot: this.scroll ? this.scroll.isRoot : isRoot,
};
}
}
resetTransform() {
if (!resetTransform)
return;
const isResetRequested = this.isLayoutDirty ||
this.shouldResetTransform ||
this.options.alwaysMeasureLayout;
isResetRequested && demoteTransforms(this);
const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
const transformTemplate = this.getTransformTemplate();
const transformTemplateValue = transformTemplate
? transformTemplate(this.latestValues, "")
: undefined;
const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
if (isResetRequested &&
this.instance &&
(hasProjection ||
hasTransform(this.latestValues) ||
transformTemplateHasChanged)) {
resetTransform(this.instance, transformTemplateValue);
this.shouldResetTransform = false;
this.scheduleRender();
}
}
measure(removeTransform = true) {
const pageBox = this.measurePageBox();
let layoutBox = this.removeElementScroll(pageBox);
/**
* Measurements taken during the pre-render stage
* still have transforms applied so we remove them
* via calculation.
*/
if (removeTransform) {
layoutBox = this.removeTransform(layoutBox);
}
roundBox(layoutBox);
return {
animationId: this.root.animationId,
measuredBox: pageBox,
layoutBox,
latestValues: {},
source: this.id,
};
}
measurePageBox() {
const { visualElement } = this.options;
if (!visualElement)
return createBox();
const box = visualElement.measureViewportBox();
const wasInScrollRoot = this.scroll?.wasRoot || this.path.some(checkNodeWasScrollRoot);
if (!wasInScrollRoot) {
// Remove viewport scroll to give page-relative coordinates
const { scroll } = this.root;
if (scroll) {
translateAxis(box.x, scroll.offset.x);
translateAxis(box.y, scroll.offset.y);
}
}
return box;
}
removeElementScroll(box) {
const boxWithoutScroll = createBox();
copyBoxInto(boxWithoutScroll, box);
if (this.scroll?.wasRoot) {
return boxWithoutScroll;
}
/**
* Performance TODO: Keep a cumulative scroll offset down the tree
* rather than loop back up the path.
*/
for (let i = 0; i < this.path.length; i++) {
const node = this.path[i];
const { scroll, options } = node;
if (node !== this.root && scroll && options.layoutScroll) {
/**
* If this is a new scroll root, we want to remove all previous scrolls
* from the viewport box.
*/
if (scroll.wasRoot) {
copyBoxInto(boxWithoutScroll, box);
}
translateAxis(boxWithoutScroll.x, scroll.offset.x);
translateAxis(boxWithoutScroll.y, scroll.offset.y);
}
}
return boxWithoutScroll;
}
applyTransform(box, transformOnly = false, output) {
const withTransforms = output || createBox();
copyBoxInto(withTransforms, box);
for (let i = 0; i < this.path.length; i++) {
const node = this.path[i];
if (!transformOnly &&
node.options.layoutScroll &&
node.scroll &&
node !== node.root) {
translateAxis(withTransforms.x, -node.scroll.offset.x);
translateAxis(withTransforms.y, -node.scroll.offset.y);
}
if (!hasTransform(node.latestValues))
continue;
transformBox(withTransforms, node.latestValues, node.layout?.layoutBox);
}
if (hasTransform(this.latestValues)) {
transformBox(withTransforms, this.latestValues, this.layout?.layoutBox);
}
return withTransforms;
}
removeTransform(box) {
const boxWithoutTransform = createBox();
copyBoxInto(boxWithoutTransform, box);
for (let i = 0; i < this.path.length; i++) {
const node = this.path[i];
if (!hasTransform(node.latestValues))
continue;
let sourceBox;
if (node.instance) {
hasScale(node.latestValues) && node.updateSnapshot();
sourceBox = createBox();
copyBoxInto(sourceBox, node.measurePageBox());
}
removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot?.layoutBox, sourceBox);
}
if (hasTransform(this.latestValues)) {
removeBoxTransforms(boxWithoutTransform, this.latestValues);
}
return boxWithoutTransform;
}
setTargetDelta(delta) {
this.targetDelta = delta;
this.root.scheduleUpdateProjection();
this.isProjectionDirty = true;
}
setOptions(options) {
this.options = {
...this.options,
...options,
crossfade: options.crossfade !== undefined ? options.crossfade : true,
};
this.addLayoutListener();
}
clearMeasurements() {
this.scroll = undefined;
this.layout = undefined;
this.snapshot = undefined;
this.prevTransformTemplateValue = undefined;
this.targetDelta = undefined;
this.target = undefined;
this.isLayoutDirty = false;
}
forceRelativeParentToResolveTarget() {
if (!this.relativeParent)
return;
/**
* If the parent target isn't up-to-date, force it to update.
* This is an unfortunate de-optimisation as it means any updating relative
* projection will cause all the relative parents to recalculate back
* up the tree.
*/
if (this.relativeParent.resolvedRelativeTargetAt !==
frameData.timestamp) {
this.relativeParent.resolveTargetDelta(true);
}
}
resolveTargetDelta(forceRecalculation = false) {
/**
* Once the dirty status of nodes has been spread through the tree, we also
* need to check if we have a shared node of a different depth that has itself
* been dirtied.
*/
const lead = this.getLead();
this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty);
this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);
this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);
const isShared = Boolean(this.resumingFrom) || this !== lead;
/**
* We don't use transform for this step of processing so we don't
* need to check whether any nodes have changed transform.
*/
const canSkip = !(forceRecalculation ||
(isShared && this.isSharedProjectionDirty) ||
this.isProjectionDirty ||
this.parent?.isProjectionDirty ||
this.attemptToResolveRelativeTarget ||
this.root.updateBlockedByResize);
if (canSkip)
return;
const { layout, layoutId } = this.options;
/**
* If we have no layout, we can't perform projection, so early return
*/
if (!this.layout || !(layout || layoutId))
return;
this.resolvedRelativeTargetAt = frameData.timestamp;
const relativeParent = this.getClosestProjectingParent();
/**
* If we don't have a targetDelta but do have a layout, we can attempt to resolve
* a relativeParent. This will allow a component to perform scale correction
* even if no animation has started.
*/
if (!this.targetDelta && !this.relativeTarget) {
if (this.options.layoutAnchor !== false &&
relativeParent &&
relativeParent.layout) {
this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox);
}
else {
this.removeRelativeTarget();
}
}
/**
* If we have no relative target or no target delta our target isn't valid
* for this frame.
*/
if (!this.relativeTarget && !this.targetDelta)
return;
/**
* Lazy-init target data structure
*/
if (!this.target) {
this.target = createBox();
this.targetWithTransforms = createBox();
}
/**
* If we've got a relative box for this component, resolve it into a target relative to the parent.
*/
if (this.relativeTarget &&
this.relativeTargetOrigin &&
this.relativeParent &&
this.relativeParent.target) {
this.forceRelativeParentToResolveTarget();
calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target, this.options.layoutAnchor || undefined);
/**
* If we've only got a targetDelta, resolve it into a target
*/
}
else if (this.targetDelta) {
if (Boolean(this.resumingFrom)) {
this.applyTransform(this.layout.layoutBox, false, this.target);
}
else {
copyBoxInto(this.target, this.layout.layoutBox);
}
applyBoxDelta(this.target, this.targetDelta);
}
else {
/**
* If no target, use own layout as target
*/
copyBoxInto(this.target, this.layout.layoutBox);
}
/**
* If we've been told to attempt to resolve a relative target, do so.
*/
if (this.attemptToResolveRelativeTarget) {
this.attemptToResolveRelativeTarget = false;
if (this.options.layoutAnchor !== false &&
relativeParent &&
Boolean(relativeParent.resumingFrom) ===
Boolean(this.resumingFrom) &&
!relativeParent.options.layoutScroll &&
relativeParent.target &&
this.animationProgress !== 1) {
this.createRelativeTarget(relativeParent, this.target, relativeParent.target);
}
else {
this.relativeParent = this.relativeTarget = undefined;
}
}
/**
* Increase debug counter for resolved target deltas
*/
if (statsBuffer.value) {
metrics.calculatedTargetDeltas++;
}
}
getClosestProjectingParent() {
if (!this.parent ||
hasScale(this.parent.latestValues) ||
has2DTranslate(this.parent.latestValues)) {
return undefined;
}
if (this.parent.isProjecting()) {
return this.parent;
}
else {
return this.parent.getClosestProjectingParent();
}
}
isProjecting() {
return Boolean((this.relativeTarget ||
this.targetDelta ||
this.options.layoutRoot) &&
this.layout);
}
createRelativeTarget(relativeParent, layout, parentLayout) {
this.relativeParent = relativeParent;
this.forceRelativeParentToResolveTarget();
this.relativeTarget = createBox();
this.relativeTargetOrigin = createBox();
calcRelativePosition(this.relativeTargetOrigin, layout, parentLayout, this.options.layoutAnchor || undefined);
copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
}
removeRelativeTarget() {
this.relativeParent = this.relativeTarget = undefined;
}
calcProjection() {
const lead = this.getLead();
const isShared = Boolean(this.resumingFrom) || this !== lead;
let canSkip = true;
/**
* If this is a normal layout animation and neither this node nor its nearest projecting
* is dirty then we can't skip.
*/
if (this.isProjectionDirty || this.parent?.isProjectionDirty) {
canSkip = false;
}
/**
* If this is a shared layout animation and this node's shared projection is dirty then
* we can't skip.
*/
if (isShared &&
(this.isSharedProjectionDirty || this.isTransformDirty)) {
canSkip = false;
}
/**
* If we have resolved the target this frame we must recalculate the
* projection to ensure it visually represents the internal calculations.
*/
if (this.resolvedRelativeTargetAt === frameData.timestamp) {
canSkip = false;
}
if (canSkip)
return;
const { layout, layoutId } = this.options;
/**
* If this section of the tree isn't animating we can
* delete our target sources for the following frame.
*/
this.isTreeAnimating = Boolean((this.parent && this.parent.isTreeAnimating) ||
this.currentAnimation ||
this.pendingAnimation);
if (!this.isTreeAnimating) {
this.targetDelta = this.relativeTarget = undefined;
}
if (!this.layout || !(layout || layoutId))
return;
/**
* Reset the corrected box with the latest values from box, as we're then going
* to perform mutative operations on it.
*/
copyBoxInto(this.layoutCorrected, this.layout.layoutBox);
/**
* Record previous tree scales before updating.
*/
const prevTreeScaleX = this.treeScale.x;
const prevTreeScaleY = this.treeScale.y;
/**
* Apply all the parent deltas to this box to produce the corrected box. This
* is the layout box, as it will appear on screen as a result of the transforms of its parents.
*/
applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared);
/**
* If this layer needs to perform scale correction but doesn't have a target,
* use the layout as the target.
*/
if (lead.layout &&
!lead.target &&
(this.treeScale.x !== 1 || this.treeScale.y !== 1)) {
lead.target = lead.layout.layoutBox;
lead.targetWithTransforms = createBox();
}
const { target } = lead;
if (!target) {
/**
* If we don't have a target to project into, but we were previously
* projecting, we want to remove the stored transform and schedule
* a render to ensure the elements reflect the removed transform.
*/
if (this.prevProjectionDelta) {
this.createProjectionDeltas();
this.scheduleRender();
}
return;
}
if (!this.projectionDelta || !this.prevProjectionDelta) {
this.createProjectionDeltas();
}
else {
copyAxisDeltaInto(this.prevProjectionDelta.x, this.projectionDelta.x);
copyAxisDeltaInto(this.prevProjectionDelta.y, this.projectionDelta.y);
}
/**
* Update the delta between the corrected box and the target box before user-set transforms were applied.
* This will allow us to calculate the corrected borderRadius and boxShadow to compensate
* for our layout reprojection, but still allow them to be scaled correctly by the user.
* It might be that to simplify this we may want to accept that user-set scale is also corrected
* and we wouldn't have to keep and calc both deltas, OR we could support a user setting
* to allow people to choose whether these styles are corrected based on just the
* layout reprojection or the final bounding box.
*/
calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues);
if (this.treeScale.x !== prevTreeScaleX ||
this.treeScale.y !== prevTreeScaleY ||
!axisDeltaEquals(this.projectionDelta.x, this.prevProjectionDelta.x) ||
!axisDeltaEquals(this.projectionDelta.y, this.prevProjectionDelta.y)) {
this.hasProjected = true;
this.scheduleRender();
this.notifyListeners("projectionUpdate", target);
}
/**
* Increase debug counter for recalculated projections
*/
if (statsBuffer.value) {
metrics.calculatedProjections++;
}
}
hide() {
this.isVisible = false;
// TODO: Schedule render
}
show() {
this.isVisible = true;
// TODO: Schedule render
}
scheduleRender(notifyAll = true) {
this.options.visualElement?.scheduleRender();
if (notifyAll) {
const stack = this.getStack();
stack && stack.scheduleRender();
}
if (this.resumingFrom && !this.resumingFrom.instance) {
this.resumingFrom = undefined;
}
}
createProjectionDeltas() {
this.prevProjectionDelta = createDelta();
this.projectionDelta = createDelta();
this.projectionDeltaWithTransform = createDelta();
}
setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false, pathFn) {
const snapshot = this.snapshot;
const snapshotLatestValues = snapshot ? snapshot.latestValues : {};
const mixedValues = { ...this.latestValues };
const targetDelta = createDelta();
if (!this.relativeParent ||
!this.relativeParent.options.layoutRoot) {
this.relativeTarget = this.relativeTargetOrigin = undefined;
}
this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
const relativeLayout = createBox();
const snapshotSource = snapshot ? snapshot.source : undefined;
const layoutSource = this.layout ? this.layout.source : undefined;
const isSharedLayoutAnimation = snapshotSource !== layoutSource;
const stack = this.getStack();
const isOnlyMember = !stack || stack.members.length <= 1;
const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&
!isOnlyMember &&
this.options.crossfade === true &&
!this.path.some(hasOpacityCrossfade));
this.animationProgress = 0;
let prevRelativeTarget;
// The path decides whether the layout shift is worth curving
// (distance floor) and resolves the interpolator from the delta.
const interpolate = pathFn?.interpolateProjection(delta);
this.mixTargetDelta = (latest) => {
const progress = latest / 1000;
const point = interpolate?.(progress);
if (point) {
targetDelta.x.translate = point.x;
targetDelta.x.scale = mixNumber$1(delta.x.scale, 1, progress);
targetDelta.x.origin = delta.x.origin;
targetDelta.x.originPoint = delta.x.originPoint;
targetDelta.y.translate = point.y;
targetDelta.y.scale = mixNumber$1(delta.y.scale, 1, progress);
targetDelta.y.origin = delta.y.origin;
targetDelta.y.originPoint = delta.y.originPoint;
}
else {
mixAxisDeltaLinear(targetDelta.x, delta.x, progress);
mixAxisDeltaLinear(targetDelta.y, delta.y, progress);
}
this.setTargetDelta(targetDelta);
if (this.relativeTarget &&
this.relativeTargetOrigin &&
this.layout &&
this.relativeParent &&
this.relativeParent.layout) {
calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox, this.options.layoutAnchor || undefined);
mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
/**
* If this is an unchanged relative target we can consider the
* projection not dirty.
*/
if (prevRelativeTarget &&
boxEquals(this.relativeTarget, prevRelativeTarget)) {
this.isProjectionDirty = false;
}
if (!prevRelativeTarget)
prevRelativeTarget = createBox();
copyBoxInto(prevRelativeTarget, this.relativeTarget);
}
if (isSharedLayoutAnimation) {
this.animationValues = mixedValues;
mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember);
}
if (point && point.rotate !== undefined) {
// Dedicated `pathRotation` channel, not `rotate`, so an
// animating `rotate` is composed with, never clobbered.
if (!this.animationValues)
this.animationValues = mixedValues;
this.animationValues.pathRotation = point.rotate;
}
this.root.scheduleUpdateProjection();
this.scheduleRender();
this.animationProgress = progress;
};
this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0);
}
startAnimation(options) {
this.notifyListeners("animationStart");
this.currentAnimation?.stop();
this.resumingFrom?.currentAnimation?.stop();
if (this.pendingAnimation) {
cancelFrame(this.pendingAnimation);
this.pendingAnimation = undefined;
}
/**
* Start the animation in the next frame to have a frame with progress 0,
* where the target is the same as when the animation started, so we can
* calculate the relative positions correctly for instant transitions.
*/
this.pendingAnimation = frame.update(() => {
globalProjectionState.hasAnimatedSinceResize = true;
this.motionValue || (this.motionValue = motionValue(0));
this.motionValue.jump(0, false);
this.currentAnimation = animateSingleValue(this.motionValue, [0, 1000], {
...options,
velocity: 0,
isSync: true,
onUpdate: (latest) => {
this.mixTargetDelta(latest);
options.onUpdate && options.onUpdate(latest);
},
onComplete: () => {
options.onComplete && options.onComplete();
this.completeAnimation();
},
});
notifyLayoutAnimationStart(this.currentAnimation, this);
if (this.resumingFrom) {
this.resumingFrom.currentAnimation = this.currentAnimation;
}
this.pendingAnimation = undefined;
});
}
completeAnimation() {
if (this.resumingFrom) {
this.resumingFrom.currentAnimation = undefined;
this.resumingFrom.preserveOpacity = undefined;
}
const stack = this.getStack();
stack && stack.exitAnimationComplete();
this.resumingFrom =
this.currentAnimation =
this.animationValues =
undefined;
this.notifyListeners("animationComplete");
}
finishAnimation() {
if (this.currentAnimation) {
this.mixTargetDelta && this.mixTargetDelta(animationTarget);
this.currentAnimation.stop();
}
this.completeAnimation();
}
applyTransformsToTarget() {
const lead = this.getLead();
const { targetWithTransforms, layout, latestValues } = lead;
let { target } = lead;
if (!targetWithTransforms || !target || !layout)
return;
/**
* If we're only animating position, and this element isn't the lead element,
* then instead of projecting into the lead box we instead want to calculate
* a new target that aligns the two boxes but maintains the layout shape.
*/
if (this !== lead &&
this.layout &&
layout &&
shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {
target = this.target || createBox();
const xLength = calcLength(this.layout.layoutBox.x);
target.x.min = lead.target.x.min;
target.x.max = target.x.min + xLength;
const yLength = calcLength(this.layout.layoutBox.y);
target.y.min = lead.target.y.min;
target.y.max = target.y.min + yLength;
}
copyBoxInto(targetWithTransforms, target);
/**
* Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
* This is the final box that we will then project into by calculating a transform delta and
* applying it to the corrected box.
*/
transformBox(targetWithTransforms, latestValues);
/**
* Update the delta between the corrected box and the final target box, after
* user-set transforms are applied to it. This will be used by the renderer to
* create a transform style that will reproject the element from its layout layout
* into the desired bounding box.
*/
calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
}
registerSharedNode(layoutId, node) {
if (!this.sharedNodes.has(layoutId)) {
this.sharedNodes.set(layoutId, new NodeStack());
}
const stack = this.sharedNodes.get(layoutId);
stack.add(node);
const config = node.options.initialPromotionConfig;
node.promote({
transition: config ? config.transition : undefined,
preserveFollowOpacity: config && config.shouldPreserveFollowOpacity
? config.shouldPreserveFollowOpacity(node)
: undefined,
});
}
isLead() {
const stack = this.getStack();
return stack ? stack.lead === this : true;
}
getLead() {
const { layoutId } = this.options;
return layoutId ? this.getStack()?.lead || this : this;
}
getPrevLead() {
const { layoutId } = this.options;
return layoutId ? this.getStack()?.prevLead : undefined;
}
getStack() {
const { layoutId } = this.options;
if (layoutId)
return this.root.sharedNodes.get(layoutId);
}
promote({ needsReset, transition, preserveFollowOpacity, } = {}) {
const stack = this.getStack();
if (stack)
stack.promote(this, preserveFollowOpacity);
if (needsReset) {
this.projectionDelta = undefined;
this.needsReset = true;
}
if (transition)
this.setOptions({ transition });
}
relegate() {
const stack = this.getStack();
if (stack) {
return stack.relegate(this);
}
else {
return false;
}
}
resetSkewAndRotation() {
const { visualElement } = this.options;
if (!visualElement)
return;
// If there's no detected skew or rotation values, we can early return without a forced render.
let hasDistortingTransform = false;
/**
* An unrolled check for rotation values. Most elements don't have any rotation and
* skipping the nested loop and new object creation is 50% faster.
*/
const { latestValues } = visualElement;
if (latestValues.z ||
latestValues.rotate ||
latestValues.rotateX ||
latestValues.rotateY ||
latestValues.rotateZ ||
latestValues.skewX ||
latestValues.skewY) {
hasDistortingTransform = true;
}
// If there's no distorting values, we don't need to do any more.
if (!hasDistortingTransform)
return;
const resetValues = {};
if (latestValues.z) {
resetDistortingTransform("z", visualElement, resetValues, this.animationValues);
}
// Check the skew and rotate value of all axes and reset to 0
for (let i = 0; i < transformAxes.length; i++) {
resetDistortingTransform(`rotate${transformAxes[i]}`, visualElement, resetValues, this.animationValues);
resetDistortingTransform(`skew${transformAxes[i]}`, visualElement, resetValues, this.animationValues);
}
// Force a render of this element to apply the transform with all skews and rotations
// set to 0.
visualElement.render();
// Put back all the values we reset
for (const key in resetValues) {
visualElement.setStaticValue(key, resetValues[key]);
if (this.animationValues) {
this.animationValues[key] = resetValues[key];
}
}
// Schedule a render for the next frame. This ensures we won't visually
// see the element with the reset rotate value applied.
visualElement.scheduleRender();
}
applyProjectionStyles(targetStyle, // CSSStyleDeclaration - doesn't allow numbers to be assigned to properties
styleProp) {
if (!this.instance || this.isSVG)
return;
if (!this.isVisible) {
targetStyle.visibility = "hidden";
return;
}
const transformTemplate = this.getTransformTemplate();
if (this.needsReset) {
this.needsReset = false;
targetStyle.visibility = "";
targetStyle.opacity = "";
targetStyle.pointerEvents =
resolveMotionValue(styleProp?.pointerEvents) || "";
targetStyle.transform = transformTemplate
? transformTemplate(this.latestValues, "")
: "none";
return;
}
const lead = this.getLead();
if (!this.projectionDelta || !this.layout || !lead.target) {
if (this.options.layoutId) {
targetStyle.opacity =
this.latestValues.opacity !== undefined
? this.latestValues.opacity
: 1;
targetStyle.pointerEvents =
resolveMotionValue(styleProp?.pointerEvents) || "";
}
if (this.hasProjected && !hasTransform(this.latestValues)) {
targetStyle.transform = transformTemplate
? transformTemplate({}, "")
: "none";
this.hasProjected = false;
}
return;
}
targetStyle.visibility = "";
const valuesToRender = lead.animationValues || lead.latestValues;
this.applyTransformsToTarget();
let transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
if (transformTemplate) {
transform = transformTemplate(valuesToRender, transform);
}
targetStyle.transform = transform;
const { x, y } = this.projectionDelta;
targetStyle.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
if (lead.animationValues) {
/**
* If the lead component is animating, assign this either the entering/leaving
* opacity
*/
targetStyle.opacity =
lead === this
? valuesToRender.opacity ??
this.latestValues.opacity ??
1
: this.preserveOpacity
? this.latestValues.opacity
: valuesToRender.opacityExit;
}
else {
/**
* Or we're not animating at all, set the lead component to its layout
* opacity and other components to hidden.
*/
targetStyle.opacity =
lead === this
? valuesToRender.opacity !== undefined
? valuesToRender.opacity
: ""
: valuesToRender.opacityExit !== undefined
? valuesToRender.opacityExit
: 0;
}
/**
* Apply scale correction
*/
for (const key in scaleCorrectors) {
if (valuesToRender[key] === undefined)
continue;
const { correct, applyTo, isCSSVariable } = scaleCorrectors[key];
/**
* Only apply scale correction to the value if we have an
* active projection transform. Otherwise these values become
* vulnerable to distortion if the element changes size without
* a corresponding layout animation.
*/
const corrected = transform === "none"
? valuesToRender[key]
: correct(valuesToRender[key], lead);
if (applyTo) {
const num = applyTo.length;
for (let i = 0; i < num; i++) {
targetStyle[applyTo[i]] = corrected;
}
}
else {
// If this is a CSS variable, set it directly on the instance.
// Replacing this function from creating styles to setting them
// would be a good place to remove per frame object creation
if (isCSSVariable) {
this.options.visualElement.renderState.vars[key] = corrected;
}
else {
targetStyle[key] = corrected;
}
}
}
/**
* Disable pointer events on follow components. This is to ensure
* that if a follow component covers a lead component it doesn't block
* pointer events on the lead.
*/
if (this.options.layoutId) {
targetStyle.pointerEvents =
lead === this
? resolveMotionValue(styleProp?.pointerEvents) || ""
: "none";
}
}
clearSnapshot() {
this.resumeFrom =
this.snapshot =
this.dragSnapshot =
this.dragAncestor =
undefined;
}
// Only run on root
resetTree() {
this.root.nodes.forEach((node) => node.currentAnimation?.stop());
this.root.nodes.forEach(clearMeasurements);
this.root.sharedNodes.clear();
}
};
}
/**
* Nodes are depth-ordered, so a dragged ancestor's layout is updated before
* its descendants'.
*/
function updateLayout(node) {
node.updateLayout();
followDraggedAncestor(node);
}
function notifyLayoutUpdate(node) {
const snapshot = node.resumeFrom?.snapshot || node.snapshot;
if (node.isLead() &&
node.layout &&
snapshot &&
node.hasListeners("didUpdate")) {
const { layoutBox: layout, measuredBox: measuredLayout } = node.layout;
const { animationType } = node.options;
const isShared = snapshot.source !== node.layout.source;
// TODO Maybe we want to also resize the layout snapshot so we don't trigger
// animations for instance if layout="size" and an element has only changed position
if (animationType === "size") {
eachAxis((axis) => {
const axisSnapshot = isShared
? snapshot.measuredBox[axis]
: snapshot.layoutBox[axis];
const length = calcLength(axisSnapshot);
axisSnapshot.min = layout[axis].min;
axisSnapshot.max = axisSnapshot.min + length;
});
}
else if (animationType === "x" || animationType === "y") {
const snapAxis = animationType === "x" ? "y" : "x";
copyAxisInto(isShared
? snapshot.measuredBox[snapAxis]
: snapshot.layoutBox[snapAxis], layout[snapAxis]);
}
else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {
eachAxis((axis) => {
const axisSnapshot = isShared
? snapshot.measuredBox[axis]
: snapshot.layoutBox[axis];
const length = calcLength(layout[axis]);
axisSnapshot.max = axisSnapshot.min + length;
/**
* Ensure relative target gets resized and rerendererd
*/
if (node.relativeTarget && !node.currentAnimation) {
node.isProjectionDirty = true;
node.relativeTarget[axis].max =
node.relativeTarget[axis].min + length;
}
});
}
const layoutDelta = createDelta();
calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);
const visualDelta = createDelta();
if (isShared) {
calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);
}
else {
calcBoxDelta(visualDelta, layout, snapshot.layoutBox);
}
const hasLayoutChanged = !isDeltaZero(layoutDelta);
let hasRelativeLayoutChanged = false;
if (!node.resumeFrom) {
const relativeParent = node.getClosestProjectingParent();
/**
* If the relativeParent is itself resuming from a different element then
* the relative snapshot is not relavent
*/
if (relativeParent && !relativeParent.resumeFrom) {
const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
if (parentSnapshot && parentLayout) {
const anchor = node.options.layoutAnchor || undefined;
const relativeSnapshot = createBox();
calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox, anchor);
const relativeLayout = createBox();
calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox, anchor);
if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {
hasRelativeLayoutChanged = true;
}
if (relativeParent.options.layoutRoot) {
node.relativeTarget = relativeLayout;
node.relativeTargetOrigin = relativeSnapshot;
node.relativeParent = relativeParent;
}
}
}
}
node.notifyListeners("didUpdate", {
layout,
snapshot,
delta: visualDelta,
layoutDelta,
hasLayoutChanged,
hasRelativeLayoutChanged,
});
}
else if (node.isLead()) {
const { onExitComplete } = node.options;
onExitComplete && onExitComplete();
}
/**
* Clearing transition
* TODO: Investigate why this transition is being passed in as {type: false } from Framer
* and why we need it at all
*/
node.options.transition = undefined;
}
function propagateDirtyNodes(node) {
/**
* Increase debug counter for nodes encountered this frame
*/
if (statsBuffer.value) {
metrics.nodes++;
}
if (!node.parent)
return;
/**
* If this node isn't projecting, propagate isProjectionDirty. It will have
* no performance impact but it will allow the next child that *is* projecting
* but *isn't* dirty to just check its parent to see if *any* ancestor needs
* correcting.
*/
if (!node.isProjecting()) {
node.isProjectionDirty = node.parent.isProjectionDirty;
}
/**
* Propagate isSharedProjectionDirty and isTransformDirty
* throughout the whole tree. A future revision can take another look at
* this but for safety we still recalcualte shared nodes.
*/
node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty ||
node.parent.isProjectionDirty ||
node.parent.isSharedProjectionDirty));
node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty);
}
function cleanDirtyNodes(node) {
node.isProjectionDirty =
node.isSharedProjectionDirty =
node.isTransformDirty =
false;
}
function clearSnapshot(node) {
node.clearSnapshot();
}
function clearMeasurements(node) {
node.clearMeasurements();
}
function forceLayoutMeasure(node) {
node.isLayoutDirty = true;
node.updateLayout();
}
function clearIsLayoutDirty(node) {
node.isLayoutDirty = false;
}
/**
* A dragged node doesn't layout animate, so it jumps to its new layout. Shift
* its descendants' snapshots by the same amount, so they only animate layout
* changes relative to it, rather than lagging behind.
*/
function followDraggedAncestor(node) {
const { snapshot, dragAncestor } = node;
const to = dragAncestor?.layout;
if (!snapshot || !to || node.resumeFrom || node.isAnimationBlocked)
return;
const from = dragAncestor.dragSnapshot;
eachAxis((axis) => translateAxis(snapshot.layoutBox[axis], to.layoutBox[axis].min - from.layoutBox[axis].min));
}
/**
* When a node is animation-blocked (e.g. during drag) and its component
* didn't re-render (memoized), willUpdate() is never called so there's
* no snapshot. Use the previous layout as a snapshot and mark dirty so
* resetTransform/updateLayout/notifyLayoutUpdate process it normally.
*/
function ensureDraggedNodesSnapshotted(node) {
if (node.isAnimationBlocked && node.layout && !node.isLayoutDirty) {
node.snapshot = node.dragSnapshot || node.layout;
node.isLayoutDirty = true;
}
}
/**
* If a node's relative parent is about to be re-measured but the node isn't
* (e.g. it's in another LayoutGroup), its relative target is out of date.
* If it's layout animating, re-measure it too, so its relative target keeps
* resolving against current layouts. Otherwise its layout is still valid
* relative to its parent, so drop the relative target, and any targetDelta
* left over from a finished animation while an ancestor still animates, to be
* rebuilt from its layout.
*/
function syncRelativeLayout(node) {
if (node.relativeTarget && node.relativeParent?.isLayoutDirty) {
if (node.currentAnimation) {
node.isLayoutDirty = true;
}
else {
node.targetDelta = undefined;
node.removeRelativeTarget();
}
}
}
function resetTransformStyle(node) {
const { visualElement } = node.options;
if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {
visualElement.notify("BeforeLayoutMeasure");
}
node.resetTransform();
}
function finishAnimation(node) {
node.finishAnimation();
node.targetDelta = node.relativeTarget = node.target = undefined;
node.isProjectionDirty = true;
}
function resolveTargetDelta(node) {
node.resolveTargetDelta();
}
function calcProjection(node) {
node.calcProjection();
}
function resetSkewAndRotation(node) {
node.resetSkewAndRotation();
}
function mixAxisDeltaLinear(output, delta, p) {
output.translate = mixNumber$1(delta.translate, 0, p);
output.scale = mixNumber$1(delta.scale, 1, p);
output.origin = delta.origin;
output.originPoint = delta.originPoint;
}
function mixAxis(output, from, to, p) {
output.min = mixNumber$1(from.min, to.min, p);
output.max = mixNumber$1(from.max, to.max, p);
}
function mixBox(output, from, to, p) {
mixAxis(output.x, from.x, to.x, p);
mixAxis(output.y, from.y, to.y, p);
}
function hasOpacityCrossfade(node) {
return (node.animationValues && node.animationValues.opacityExit !== undefined);
}
const defaultLayoutTransition = {
duration: 0.45,
ease: [0.4, 0, 0.1, 1],
};
const userAgentContains = (string) => typeof navigator !== "undefined" &&
navigator.userAgent &&
navigator.userAgent.toLowerCase().includes(string);
/**
* Measured bounding boxes must be rounded in Safari and
* left untouched in Chrome, otherwise non-integer layouts within scaled-up elements
* can appear to jump.
*/
const roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/")
? Math.round
: motionUtils.noop;
function roundAxis(axis) {
// Round to the nearest .5 pixels to support subpixel layouts
axis.min = roundPoint(axis.min);
axis.max = roundPoint(axis.max);
}
function roundBox(box) {
roundAxis(box.x);
roundAxis(box.y);
}
function shouldAnimatePositionOnly(animationType, snapshot, layout) {
return (animationType === "position" ||
(animationType === "preserve-aspect" &&
!isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2)));
}
function checkNodeWasScrollRoot(node) {
return node !== node.root && node.scroll?.wasRoot;
}
const DocumentProjectionNode = createProjectionNode({
attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
measureScroll: () => ({
x: document.documentElement.scrollLeft || document.body?.scrollLeft || 0,
y: document.documentElement.scrollTop || document.body?.scrollTop || 0,
}),
checkIsScrollRoot: () => true,
});
const notify = (node) => !node.isLayoutDirty && node.willUpdate(false);
function nodeGroup() {
const nodes = new Set();
const subscriptions = new WeakMap();
const dirtyAll = () => nodes.forEach(notify);
return {
add: (node) => {
nodes.add(node);
subscriptions.set(node, node.addEventListener("willUpdate", dirtyAll));
},
remove: (node) => {
nodes.delete(node);
const unsubscribe = subscriptions.get(node);
if (unsubscribe) {
unsubscribe();
subscriptions.delete(node);
}
dirtyAll();
},
dirty: dirtyAll,
};
}
const rootProjectionNode = {
current: undefined,
};
const HTMLProjectionNode = createProjectionNode({
measureScroll: (instance) => ({
x: instance.scrollLeft,
y: instance.scrollTop,
}),
defaultParent: () => {
if (!rootProjectionNode.current) {
const documentNode = new DocumentProjectionNode({});
documentNode.mount(window);
documentNode.setOptions({ layoutScroll: true });
rootProjectionNode.current = documentNode;
}
return rootProjectionNode.current;
},
resetTransform: (instance, value) => {
instance.style.transform = value !== undefined ? value : "none";
},
checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
});
const layoutSelector = "[data-layout],[data-layout-id]";
/**
* All imperatively-created projection nodes live in one persistent tree,
* shared across animateLayout() calls (and with any React-created nodes,
* via the singleton document root). Keyed by element for reuse.
*/
const layoutNodes = new WeakMap();
/**
* Builders created within the same synchronous tick are flushed together
* as a single "commit": every node is snapshotted before any updateDom
* runs, mirroring React batching renders from different parts of the tree.
*/
let pendingBuilders;
function collectLayoutElements(scope) {
const elements = [];
if (scope instanceof HTMLElement && scope.matches(layoutSelector)) {
elements.push(scope);
}
scope.querySelectorAll(layoutSelector).forEach((element) => {
if (element instanceof HTMLElement)
elements.push(element);
});
return elements;
}
/**
* Process any work scheduled on the frameloop now. A previous animation
* may have been seeked while paused (controls.time = x) without a frame
* having rendered it - we must materialise that state into the DOM
* before taking snapshots.
*/
function flushPendingFrame() {
if (frameData.isProcessing)
return;
const now = time.now();
frameData.delta = motionUtils.clamp(0, 1000 / 60, now - frameData.timestamp);
frameData.timestamp = now;
frameData.isProcessing = true;
frameSteps.update.process(frameData);
frameSteps.preRender.process(frameData);
frameSteps.render.process(frameData);
frameData.isProcessing = false;
}
function getProjectionParent(element) {
let ancestor = element.parentElement;
while (ancestor) {
const node = layoutNodes.get(ancestor);
if (node && node.instance)
return node;
ancestor = ancestor.parentElement;
}
return undefined;
}
function createVisualElement() {
return new HTMLVisualElement({
props: {},
presenceContext: null,
visualState: {
latestValues: {},
renderState: {
transform: {},
transformOrigin: {},
style: {},
vars: {},
},
},
}, { allowProjection: true });
}
function readNodeOptions(element, transition) {
const layoutAttr = element.getAttribute("data-layout");
const layoutId = element.getAttribute("data-layout-id") ?? undefined;
return {
layoutId,
layout: layoutAttr !== null ? true : undefined,
animationType: (!layoutAttr || layoutAttr === "true"
? "both"
: layoutAttr),
transition,
};
}
function prepareNode(element, transition) {
let node = layoutNodes.get(element);
if (!node) {
let visualElement = visualElementStore.get(element);
if (!visualElement) {
visualElement = createVisualElement();
/**
* Values animate() has been rendering on this element move to
* the VisualElement, so the layout animation composes with
* them instead of overwriting them.
*/
handOffElementState(element, visualElement);
}
/**
* A first-time element may carry a projection transform in its
* inline style (e.g. it was cloned from an element mid-animation).
* That transform isn't tracked in latestValues so the engine can't
* reset it before measuring - clear it now so the first layout
* measurement isn't inflated.
*/
if (element.style.transform &&
!hasTransform(visualElement.latestValues)) {
element.style.transform = "";
}
node = new HTMLProjectionNode(visualElement.latestValues, getProjectionParent(element));
visualElement.projection = node;
node.setOptions({
...readNodeOptions(element, transition),
visualElement,
});
node.mount(element);
layoutNodes.set(element, node);
}
else {
node.setOptions(readNodeOptions(element, transition));
}
node.isPresent = true;
if (node.options.onExitComplete) {
node.setOptions({ onExitComplete: undefined });
}
return node;
}
function sortDocumentOrder(elements) {
return [...elements].sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
}
function dropNode(element, node) {
node.setOptions({ onExitComplete: undefined });
/**
* Stop any lingering animation so it can't leak into future updates.
* A follow node can share its currentAnimation with a surviving lead
* (via resumingFrom), in which case it isn't ours to stop.
*/
const stack = node.getStack();
if (!stack || node.isLead())
node.currentAnimation?.stop();
node.unmount();
layoutNodes.delete(element);
}
function flushPendingBuilders() {
const builders = pendingBuilders;
pendingBuilders = undefined;
flushPendingFrame();
/**
* Discover and mount every node across all builders before snapshotting
* any of them. Mounting during an active update flags isLayoutDirty,
* which would make that node's own willUpdate skip its snapshot.
* Document order guarantees ancestors mount before descendants, even
* when they're discovered by different builders.
*/
const targets = new Map();
for (const builder of builders) {
for (const element of builder.collectTargets()) {
const owners = targets.get(element);
owners ? owners.push(builder) : targets.set(element, [builder]);
}
}
const union = new Map();
for (const element of sortDocumentOrder(targets.keys())) {
const owners = targets.get(element);
const node = prepareNode(element, owners[owners.length - 1].transitionFor(element));
for (const owner of owners)
owner.adopt(element, node);
union.set(element, node);
}
union.forEach((node) => {
node.isLayoutDirty = false;
node.willUpdate();
});
const updatePromises = [];
for (const builder of builders) {
const result = builder.runUpdate();
if (result)
updatePromises.push(result);
}
const commit = () => {
/**
* Process all additions before any removals so that, even across
* builders, a removed member knows whether a replacement with the
* same layoutId was added in this commit.
*/
const newMemberIds = new Set();
for (const builder of builders) {
builder.reconcileAdditions(newMemberIds);
}
for (const builder of builders) {
builder.reconcileRemovals(newMemberIds);
}
let root;
union.forEach((node) => (root || (root = node.root)));
for (const builder of builders)
root || (root = builder.getRoot());
root?.didUpdate();
/**
* The root flushes the update on a microtask, synchronously
* processing the frame that creates the layout animations. Collect
* them in a later microtask step of the same pass.
*/
microtask.render(() => {
for (const builder of builders)
builder.finalize();
});
};
updatePromises.length ? Promise.all(updatePromises).then(commit) : commit();
}
class LayoutAnimationBuilder {
constructor(scope, updateDom, defaultOptions) {
this.scope = scope;
this.updateDom = updateDom;
this.defaultOptions = defaultOptions;
this.sharedTransitions = new Map();
this.notifyReady = () => { };
this.rejectReady = () => { };
this.tracked = new Map();
this.restorePoints = new Map();
this.readyPromise = new Promise((resolve, reject) => {
this.notifyReady = resolve;
this.rejectReady = reject;
});
if (!pendingBuilders) {
pendingBuilders = [];
queueMicrotask(flushPendingBuilders);
}
pendingBuilders.push(this);
}
shared(id, transition) {
this.sharedTransitions.set(id, transition);
return this;
}
then(resolve, reject) {
return this.readyPromise.then(resolve, reject);
}
transitionFor(element) {
const layoutId = element.getAttribute("data-layout-id");
return ((layoutId && this.sharedTransitions.get(layoutId)) ||
this.defaultOptions);
}
adopt(element, node) {
this.tracked.set(element, node);
this.restorePoints.set(element, {
parent: element.parentElement,
next: element.nextSibling,
});
}
collectTargets() {
return collectLayoutElements(this.scope);
}
runUpdate() {
try {
const result = this.updateDom();
if (result && typeof result.then === "function") {
return result.then(undefined, (error) => {
this.updateError = error;
});
}
}
catch (error) {
this.updateError = error;
}
return undefined;
}
reconcileAdditions(newMemberIds) {
for (const element of collectLayoutElements(this.scope)) {
if (this.tracked.has(element))
continue;
const node = prepareNode(element, this.transitionFor(element));
this.adopt(element, node);
node.options.layoutId && newMemberIds.add(node.options.layoutId);
}
}
reconcileRemovals(newMemberIds) {
this.tracked.forEach((node, element) => {
if (element.isConnected)
return;
const restore = this.restorePoints.get(element);
this.restorePoints.delete(element);
const { layoutId } = node.options;
const stack = node.getStack();
const hasSurvivor = stack &&
stack.members.some((member) => member !== node &&
member.instance
?.isConnected);
/**
* A removed lead with a surviving stack member - and no
* replacement member added this commit - runs an exit
* crossfade: restore the element to its old position in the
* DOM, relegate it and let the survivor take over. It's
* removed again once the animation completes.
*/
if (layoutId &&
node.isLead() &&
hasSurvivor &&
!newMemberIds.has(layoutId)) {
if (restore && restore.parent.isConnected) {
restore.parent.insertBefore(element, restore.next && restore.next.parentNode === restore.parent
? restore.next
: null);
node.isPresent = false;
node.setOptions({
onExitComplete: () => {
element.remove();
dropNode(element, node);
},
});
if (node.relegate())
return;
element.remove();
}
}
dropNode(element, node);
this.tracked.delete(element);
});
}
getRoot() {
let root;
this.tracked.forEach((node) => (root || (root = node.root)));
return root;
}
finalize() {
if (this.updateError) {
this.rejectReady(this.updateError);
return;
}
const animations = new Set();
this.tracked.forEach((node) => {
if (node.instance && node.currentAnimation) {
animations.add(node.currentAnimation);
}
});
this.notifyReady(new GroupAnimation([...animations]));
}
}
function parseAnimateLayoutArgs(scopeOrUpdateDom, updateDomOrOptions, options) {
if (typeof scopeOrUpdateDom === "function") {
return {
scope: document,
updateDom: scopeOrUpdateDom,
defaultOptions: updateDomOrOptions,
};
}
const scope = scopeOrUpdateDom instanceof Document
? scopeOrUpdateDom
: resolveElements(scopeOrUpdateDom)[0] ?? document;
return {
scope,
updateDom: updateDomOrOptions,
defaultOptions: options,
};
}
/**
* Animate layout changes made within `updateDom` on elements tagged
* with `data-layout` or `data-layout-id`.
*
* ```
* animateLayout(() => {
* element.style.justifyContent = "flex-end"
* })
* ```
*/
function animateLayout(scopeOrUpdateDom, updateDomOrOptions, options) {
const { scope, updateDom, defaultOptions } = parseAnimateLayoutArgs(scopeOrUpdateDom, updateDomOrOptions, options);
return new LayoutAnimationBuilder(scope, updateDom, defaultOptions);
}
/**
* @deprecated
*
* Import as `frame` instead.
*/
const sync = frame;
/**
* @deprecated
*
* Use cancelFrame(callback) instead.
*/
const cancelSync = stepsOrder.reduce((acc, key) => {
acc[key] = (process) => cancelFrame(process);
return acc;
}, {});
exports.AsyncMotionValueAnimation = AsyncMotionValueAnimation;
exports.DOMKeyframesResolver = DOMKeyframesResolver;
exports.DOMVisualElement = DOMVisualElement;
exports.DocumentProjectionNode = DocumentProjectionNode;
exports.Feature = Feature;
exports.FlatTree = FlatTree;
exports.GroupAnimation = GroupAnimation;
exports.GroupAnimationWithThen = GroupAnimationWithThen;
exports.HTMLProjectionNode = HTMLProjectionNode;
exports.HTMLVisualElement = HTMLVisualElement;
exports.JSAnimation = JSAnimation;
exports.KeyframeResolver = KeyframeResolver;
exports.LayoutAnimationBuilder = LayoutAnimationBuilder;
exports.MotionValue = MotionValue;
exports.MotionValueState = MotionValueState;
exports.NativeAnimation = NativeAnimation;
exports.NativeAnimationExtended = NativeAnimationExtended;
exports.NativeAnimationWrapper = NativeAnimationWrapper;
exports.NodeStack = NodeStack;
exports.ObjectVisualElement = ObjectVisualElement;
exports.SVGVisualElement = SVGVisualElement;
exports.ViewTransitionBuilder = ViewTransitionBuilder;
exports.VisualElement = VisualElement;
exports.acceleratedValues = acceleratedValues;
exports.addAttrValue = addAttrValue;
exports.addDomEvent = addDomEvent;
exports.addEffect = addEffect;
exports.addSVGValue = addSVGValue;
exports.addScaleCorrector = addScaleCorrector;
exports.addStyleValue = addStyleValue;
exports.addValueToWillChange = addValueToWillChange;
exports.alpha = alpha;
exports.analyseComplexValue = analyseComplexValue;
exports.animateEffectSubject = animateEffectSubject;
exports.animateElement = animateElement;
exports.animateLayout = animateLayout;
exports.animateMotionValue = animateMotionValue;
exports.animateSingleValue = animateSingleValue;
exports.animateTarget = animateTarget;
exports.animateValue = animateValue;
exports.animateValues = animateValues;
exports.animateVariant = animateVariant;
exports.animateView = animateView;
exports.animateVisualElement = animateVisualElement;
exports.animationMapKey = animationMapKey;
exports.applyAxisDelta = applyAxisDelta;
exports.applyBoxDelta = applyBoxDelta;
exports.applyGeneratorOptions = applyGeneratorOptions;
exports.applyPointDelta = applyPointDelta;
exports.applyPxDefaults = applyPxDefaults;
exports.applyTreeDeltas = applyTreeDeltas;
exports.arc = arc;
exports.aspectRatio = aspectRatio;
exports.attachFollow = attachFollow;
exports.attachSpring = attachSpring;
exports.attrEffect = attrEffect;
exports.axisDeltaEquals = axisDeltaEquals;
exports.axisEquals = axisEquals;
exports.axisEqualsRounded = axisEqualsRounded;
exports.boxEquals = boxEquals;
exports.boxEqualsRounded = boxEqualsRounded;
exports.buildHTMLStyles = buildHTMLStyles;
exports.buildProjectionTransform = buildProjectionTransform;
exports.buildSVGAttrs = buildSVGAttrs;
exports.buildSVGPath = buildSVGPath;
exports.buildTransform = buildTransform$1;
exports.calcAxisDelta = calcAxisDelta;
exports.calcBoxDelta = calcBoxDelta;
exports.calcChildStagger = calcChildStagger;
exports.calcGeneratorDuration = calcGeneratorDuration;
exports.calcLength = calcLength;
exports.calcRelativeAxis = calcRelativeAxis;
exports.calcRelativeAxisPosition = calcRelativeAxisPosition;
exports.calcRelativeBox = calcRelativeBox;
exports.calcRelativePosition = calcRelativePosition;
exports.camelCaseAttributes = camelCaseAttributes;
exports.camelToDash = camelToDash;
exports.cancelFrame = cancelFrame;
exports.cancelMicrotask = cancelMicrotask;
exports.cancelSync = cancelSync;
exports.checkVariantsDidChange = checkVariantsDidChange;
exports.cleanDirtyNodes = cleanDirtyNodes;
exports.collectMotionValues = collectMotionValues;
exports.color = color;
exports.compareByDepth = compareByDepth;
exports.complex = complex;
exports.containsCSSVariable = containsCSSVariable;
exports.convertBoundingBoxToBox = convertBoundingBoxToBox;
exports.convertBoxToBoundingBox = convertBoxToBoundingBox;
exports.convertOffsetToTimes = convertOffsetToTimes;
exports.copyAxisDeltaInto = copyAxisDeltaInto;
exports.copyAxisInto = copyAxisInto;
exports.copyBoxInto = copyBoxInto;
exports.correctBorderRadius = correctBorderRadius;
exports.correctBoxShadow = correctBoxShadow;
exports.createAnimationState = createAnimationState;
exports.createAxis = createAxis;
exports.createAxisDelta = createAxisDelta;
exports.createBox = createBox;
exports.createDelta = createDelta;
exports.createEffect = createEffect;
exports.createGeneratorEasing = createGeneratorEasing;
exports.createProjectionNode = createProjectionNode;
exports.createRenderBatcher = createRenderBatcher;
exports.cubicBezierAsString = cubicBezierAsString;
exports.defaultEasing = defaultEasing;
exports.defaultOffset = defaultOffset;
exports.defaultTransformValue = defaultTransformValue;
exports.defaultValueTypes = defaultValueTypes;
exports.degrees = degrees;
exports.delay = delay;
exports.delayInSeconds = delayInSeconds;
exports.dimensionValueTypes = dimensionValueTypes;
exports.eachAxis = eachAxis;
exports.fillOffset = fillOffset;
exports.fillWildcards = fillWildcards;
exports.findDimensionValueType = findDimensionValueType;
exports.findEffect = findEffect;
exports.findValueType = findValueType;
exports.flushKeyframeResolvers = flushKeyframeResolvers;
exports.followValue = followValue;
exports.frame = frame;
exports.frameData = frameData;
exports.frameSteps = frameSteps;
exports.generateLinearEasing = generateLinearEasing;
exports.getAnimatableNone = getAnimatableNone;
exports.getAnimationMap = getAnimationMap;
exports.getComputedStyle = getComputedStyle$2;
exports.getDefaultTransition = getDefaultTransition;
exports.getDefaultValueType = getDefaultValueType;
exports.getFeatureDefinitions = getFeatureDefinitions;
exports.getFinalKeyframe = getFinalKeyframe;
exports.getMixer = getMixer;
exports.getOptimisedAppearId = getOptimisedAppearId;
exports.getOriginIndex = getOriginIndex;
exports.getValueAsType = getValueAsType;
exports.getValueTransition = getValueTransition;
exports.getVariableValue = getVariableValue;
exports.getVariantContext = getVariantContext;
exports.getViewAnimationLayerInfo = getViewAnimationLayerInfo;
exports.getViewAnimations = getViewAnimations;
exports.globalProjectionState = globalProjectionState;
exports.handOffElementState = handOffElementState;
exports.has2DTranslate = has2DTranslate;
exports.hasComplexValues = hasComplexValues;
exports.hasReducedMotionListener = hasReducedMotionListener;
exports.hasScale = hasScale;
exports.hasTransform = hasTransform;
exports.hex = hex;
exports.hover = hover;
exports.hsla = hsla;
exports.hslaToRgba = hslaToRgba;
exports.inertia = inertia;
exports.initPrefersReducedMotion = initPrefersReducedMotion;
exports.interpolate = interpolate;
exports.invisibleValues = invisibleValues;
exports.isAnimationControls = isAnimationControls;
exports.isCSSVariableName = isCSSVariableName;
exports.isCSSVariableToken = isCSSVariableToken;
exports.isControllingVariants = isControllingVariants;
exports.isDeltaZero = isDeltaZero;
exports.isDragActive = isDragActive;
exports.isDragging = isDragging;
exports.isElementKeyboardAccessible = isElementKeyboardAccessible;
exports.isElementTextInput = isElementTextInput;
exports.isForcedMotionValue = isForcedMotionValue;
exports.isGenerator = isGenerator;
exports.isHTMLElement = isHTMLElement;
exports.isKeyframesTarget = isKeyframesTarget;
exports.isMotionValue = isMotionValue;
exports.isNear = isNear;
exports.isNodeOrChild = isNodeOrChild;
exports.isPrimaryPointer = isPrimaryPointer;
exports.isSVGElement = isSVGElement;
exports.isSVGSVGElement = isSVGSVGElement;
exports.isSVGTag = isSVGTag;
exports.isTransitionDefined = isTransitionDefined;
exports.isVariantLabel = isVariantLabel;
exports.isVariantNode = isVariantNode;
exports.isWaapiSupportedEasing = isWaapiSupportedEasing;
exports.isWillChangeMotionValue = isWillChangeMotionValue;
exports.keyframes = keyframes;
exports.makeAnimationInstant = makeAnimationInstant;
exports.mapEasingToNativeEasing = mapEasingToNativeEasing;
exports.mapValue = mapValue;
exports.maxGeneratorDuration = maxGeneratorDuration;
exports.measurePageBox = measurePageBox;
exports.measureViewportBox = measureViewportBox;
exports.microtask = microtask;
exports.mix = mix;
exports.mixArray = mixArray;
exports.mixColor = mixColor;
exports.mixComplex = mixComplex;
exports.mixImmediate = mixImmediate;
exports.mixLinearColor = mixLinearColor;
exports.mixNumber = mixNumber$1;
exports.mixObject = mixObject;
exports.mixValues = mixValues;
exports.mixVisibility = mixVisibility;
exports.motionValue = motionValue;
exports.nodeGroup = nodeGroup;
exports.number = number;
exports.numberValueTypes = numberValueTypes;
exports.optimizedAppearDataAttribute = optimizedAppearDataAttribute;
exports.optimizedAppearDataId = optimizedAppearDataId;
exports.originProps = originProps;
exports.parseAnimateLayoutArgs = parseAnimateLayoutArgs;
exports.parseCSSVariable = parseCSSVariable;
exports.parseValueFromTransform = parseValueFromTransform;
exports.percent = percent;
exports.pixelsToPercent = pixelsToPercent;
exports.positionalKeys = positionalKeys;
exports.prefersReducedMotion = prefersReducedMotion;
exports.press = press;
exports.progressPercentage = progressPercentage;
exports.propEffect = propEffect;
exports.propagateDirtyNodes = propagateDirtyNodes;
exports.px = px;
exports.readSVGValue = readSVGValue;
exports.readStyleValue = readStyleValue;
exports.readTransformValue = readTransformValue;
exports.recordStats = recordStats;
exports.removeAxisDelta = removeAxisDelta;
exports.removeAxisTransforms = removeAxisTransforms;
exports.removeBoxTransforms = removeBoxTransforms;
exports.removeEffect = removeEffect;
exports.removePointDelta = removePointDelta;
exports.renderHTML = renderHTML;
exports.renderSVG = renderSVG;
exports.resize = resize;
exports.resolveElements = resolveElements;
exports.resolveMotionValue = resolveMotionValue;
exports.resolveTransition = resolveTransition;
exports.resolveVariant = resolveVariant;
exports.resolveVariantFromProps = resolveVariantFromProps;
exports.rgbUnit = rgbUnit;
exports.rgba = rgba;
exports.rootProjectionNode = rootProjectionNode;
exports.round = round;
exports.sampleDelta = sampleDelta;
exports.scale = scale;
exports.scaleCorrectors = scaleCorrectors;
exports.scalePoint = scalePoint;
exports.scrapeHTMLMotionValuesFromProps = scrapeMotionValuesFromProps$1;
exports.scrapeSVGMotionValuesFromProps = scrapeMotionValuesFromProps;
exports.setDragLock = setDragLock;
exports.setFeatureDefinitions = setFeatureDefinitions;
exports.setStyle = setStyle;
exports.setTarget = setTarget;
exports.spring = spring;
exports.springValue = springValue;
exports.stagger = stagger;
exports.startWaapiAnimation = startWaapiAnimation;
exports.statsBuffer = statsBuffer;
exports.styleEffect = styleEffect;
exports.styleSubjectEffect = styleSubjectEffect;
exports.supportedWaapiEasing = supportedWaapiEasing;
exports.supportsBrowserAnimation = supportsBrowserAnimation;
exports.supportsFlags = supportsFlags;
exports.supportsLinearEasing = supportsLinearEasing;
exports.supportsPartialKeyframes = supportsPartialKeyframes;
exports.supportsScrollTimeline = supportsScrollTimeline;
exports.supportsViewTimeline = supportsViewTimeline;
exports.supportsWaapi = supportsWaapi;
exports.svgEffect = svgEffect;
exports.svgSubjectEffect = svgSubjectEffect;
exports.sync = sync;
exports.testValueType = testValueType;
exports.time = time;
exports.transform = transform;
exports.transformAxis = transformAxis;
exports.transformBox = transformBox;
exports.transformBoxPoints = transformBoxPoints;
exports.transformPropOrder = transformPropOrder;
exports.transformProps = transformProps;
exports.transformValue = transformValue;
exports.transformValueTypes = transformValueTypes;
exports.translateAxis = translateAxis;
exports.updateMotionValuesFromProps = updateMotionValuesFromProps;
exports.variantPriorityOrder = variantPriorityOrder;
exports.variantProps = variantProps;
exports.vh = vh;
exports.visualElementStore = visualElementStore;
exports.vw = vw;
//# sourceMappingURL=index.js.map