framer-motion
Version:
A simple and powerful JavaScript animation library
4,051 lines • 150 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var index = require('./index-CfVlkVx9.js');
var motionDom = require('motion-dom');
var featureBundle = require('./feature-bundle-BsODp5VY.js');
var proxy = require('./proxy-BFdh51TC.js');
var motionUtils = require('motion-utils');
function _interopNamespaceDefault(e) {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
/**
* Taken from https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx
*/
/**
* Set a given ref to a given value
* This utility takes care of different types of refs: callback refs and RefObject(s)
*/
function setRef(ref, value) {
if (typeof ref === "function") {
return ref(value);
}
else if (ref !== null && ref !== undefined) {
ref.current = value;
}
}
/**
* A utility to compose multiple refs together
* Accepts callback refs and RefObject(s)
*/
function composeRefs(...refs) {
return (node) => {
let hasCleanup = false;
const cleanups = refs.map((ref) => {
const cleanup = setRef(ref, node);
if (!hasCleanup && typeof cleanup === "function") {
hasCleanup = true;
}
return cleanup;
});
// React <19 will log an error to the console if a callback ref returns a
// value. We don't use ref cleanups internally so this will only happen if a
// user's ref callback returns a value, which we only expect if they are
// using the cleanup functionality added in React 19.
if (hasCleanup) {
return () => {
for (let i = 0; i < cleanups.length; i++) {
const cleanup = cleanups[i];
if (typeof cleanup === "function") {
cleanup();
}
else {
setRef(refs[i], null);
}
}
};
}
};
}
/**
* A custom hook that composes multiple refs
* Accepts callback refs and RefObject(s)
*/
function useComposedRefs(...refs) {
// eslint-disable-next-line react-hooks/exhaustive-deps
return React__namespace.useCallback(composeRefs(...refs), refs);
}
/**
* How much an element's transforms, and its ancestors', scale it on screen.
*/
const measureScale = (element) => {
const { width, height } = element?.getBoundingClientRect() || {};
return [
width / element?.offsetWidth || 1,
height / element?.offsetHeight || 1,
];
};
/**
* The element's position in the space it scrolls in, as the projection
* system measures it (see measurePageBox and removeElementScroll): its
* viewport position, plus its scroll containers' scroll (across shadow
* roots), plus the window's (the root's) scroll. Like checkIsScrollRoot, a
* fixed ancestor is a scroll root: it doesn't scroll with anything above it,
* so a fixed container is measured relative to the viewport.
*
* So a scroll position clamped by content shrinking reads as the element
* moving only if it doesn't scroll with that content.
*
* Scroll offsets are in their container's coordinate space, so are scaled
* onto the screen, and the result is returned in the offsetParent's
* coordinate space, which the pop rule's offsets are in.
*/
const measurePoint = (element) => {
let { left, top } = element.getBoundingClientRect();
let node = element;
while ((node = (node.parentElement ||
node.parentNode?.host))) {
const { scrollLeft, scrollTop } = node;
if (scrollLeft || scrollTop) {
const [x, y] = measureScale(node);
left += scrollLeft * x;
top += scrollTop * y;
}
if (getComputedStyle(node).position === "fixed")
break;
}
const [x, y] = measureScale(element.offsetParent);
return [left / x, top / y];
};
/**
* Measurement functionality has to be within a separate component
* to leverage snapshot lifecycle.
*/
class PopChildMeasure extends React__namespace.Component {
getSnapshotBeforeUpdate(prevProps) {
const element = this.props.getElement();
if (motionDom.isHTMLElement(element) && prevProps.isPresent && !this.props.isPresent && this.props.pop !== false) {
const parent = element.offsetParent;
const parentWidth = motionDom.isHTMLElement(parent)
? parent.offsetWidth || 0
: 0;
const parentHeight = motionDom.isHTMLElement(parent)
? parent.offsetHeight || 0
: 0;
const computedStyle = getComputedStyle(element);
const size = this.props.sizeRef.current;
size.height = parseFloat(computedStyle.height);
size.width = parseFloat(computedStyle.width);
size.top = element.offsetTop;
size.left = element.offsetLeft;
size.right = parentWidth - size.width - size.left;
size.bottom = parentHeight - size.height - size.top;
size.direction = computedStyle.direction;
size.point = measurePoint(element);
}
return null;
}
/**
* Required with getSnapshotBeforeUpdate to stop React complaining.
*/
componentDidUpdate() { }
render() {
return this.props.children;
}
}
function PopChild({ children, isPresent, anchorX, anchorY, root, pop, popNode }) {
const id = React.useId();
const ref = React.useRef(null);
const size = React.useRef({
width: 0,
height: 0,
top: 0,
left: 0,
right: 0,
bottom: 0,
direction: "ltr",
});
const { nonce } = React.useContext(index.MotionConfigContext);
/**
* In React 19, refs are passed via props.ref instead of element.ref.
* We check props.ref first (React 19) and fall back to element.ref (React 18).
*
* The composed ref is only used when popping the child out (pop !== false),
* so we avoid reading children.props.ref otherwise. In React 18.3 that read
* triggers a spurious "`ref` is not a prop" warning getter (#3745).
*/
const childRef = pop !== false
? (children.props?.ref ??
children?.ref)
: undefined;
const composedRef = useComposedRefs(ref, childRef);
/**
* The child's element: the one our ref reached or, if the child can't
* be given a ref (for instance a function component that doesn't
* forward it), its outermost motion component's element (#2503).
*/
const getElement = () => ref.current || popNode?.current?.current;
const insertPopRule = (sheet) => {
const { width, height, top, left, right, bottom, direction } = size.current;
const isRTL = direction === "rtl";
const x = anchorX === "left"
? (isRTL ? `right:${right}` : `left:${left}`)
: (isRTL ? `left:${left}` : `right:${right}`);
const y = anchorY === "bottom" ? `bottom:${bottom}` : `top:${top}`;
sheet?.insertRule(`[data-motion-pop-id="${id}"]{position:absolute!important;width:${width}px!important;height:${height}px!important;${x}px!important;${y}px!important}`);
};
/**
* We create and inject a style block so we can apply this explicit
* sizing in a non-destructive manner by just deleting the style block.
*
* We can't apply size via render as the measurement happens
* in getSnapshotBeforeUpdate (post-render), likewise if we apply the
* styles directly on the DOM node, we might be overwriting
* styles set via the style prop.
*/
React.useInsertionEffect(() => {
const { width, height } = size.current;
const element = getElement();
if (isPresent || pop === false || !element || !width || !height)
return;
element.dataset.motionPopId = id;
/**
* Use the element's own document so this works when rendering
* into another window or iframe (e.g. via window.open()).
*/
const doc = element.ownerDocument;
const style = doc.createElement("style");
if (nonce)
style.nonce = nonce;
const parent = root ?? doc.head;
parent.appendChild(style);
insertPopRule(style.sheet);
/**
* Popping the element out of the layout can move its offsetParent,
* which we've pinned it to. For instance, a bottom-anchored or
* centred container shrinks around its remaining children (#2348).
* So once the whole commit is in the DOM, measure how far the
* element moved and offset it back.
*
* This runs on the microtask frameloop, so before paint even if
* this commit happens within an animation frame. Every popped
* element is measured in its first step, then corrected at the
* start of the read step: before the projection system, which
* schedules its layout measurement there from layout effects, so
* layout animations see the corrected position.
*/
let dx = 0;
let dy = 0;
motionDom.microtask.setup(() => {
const [x, y] = measurePoint(element);
dx = size.current.point[0] - x;
dy = size.current.point[1] - y;
});
motionDom.microtask.read(() => {
/**
* The style has no sheet if it's been removed since, because
* the element is present again.
*/
const { sheet } = style;
if (!sheet || (!dx && !dy))
return;
const s = size.current;
s.left += dx;
s.right -= dx;
s.top += dy;
s.bottom -= dy;
sheet.deleteRule(0);
insertPopRule(sheet);
});
return () => {
element.removeAttribute("data-motion-pop-id");
if (parent.contains(style)) {
parent.removeChild(style);
}
};
}, [isPresent]);
return (jsxRuntime.jsx(PopChildMeasure, { isPresent: isPresent, getElement: getElement, sizeRef: size, pop: pop, children: pop === false
? children
: React__namespace.cloneElement(children, { ref: composedRef }) }));
}
const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, anchorY, root }) => {
const presenceChildren = index.useConstant(newChildrenMap);
const id = React.useId();
/**
* The outermost motion component within this child. popLayout falls
* back to its element when the child can't be given a ref, for instance
* a function component that doesn't forward refs (#2503).
*/
const popNode = React.useRef();
// Written in a layout effect (not render) so discarded concurrent
// renders can't leave the refs pointing at uncommitted state.
const isPresentRef = React.useRef(isPresent);
const onExitCompleteRef = React.useRef(onExitComplete);
index.useIsomorphicLayoutEffect(() => {
isPresentRef.current = isPresent;
onExitCompleteRef.current = onExitComplete;
});
let isReusedContext = true;
let context = React.useMemo(() => {
isReusedContext = false;
return {
id,
initial,
isPresent,
custom,
onExitComplete: (childId) => {
presenceChildren.set(childId, true);
for (const isComplete of presenceChildren.values()) {
if (!isComplete)
return; // can stop searching when any is incomplete
}
onExitComplete && onExitComplete();
},
register: (childId, node) => {
presenceChildren.set(childId, false);
if (node && node.parent?.presenceContext?.id !== id) {
popNode.current = node;
}
return () => {
presenceChildren.delete(childId);
!isPresentRef.current &&
!presenceChildren.size &&
onExitCompleteRef.current?.();
};
},
};
}, [isPresent, presenceChildren, onExitComplete]);
/**
* If the presence of a child affects the layout of the components around it,
* we want to make a new context value to ensure they get re-rendered
* so they can detect that layout change.
*/
if (presenceAffectsLayout && isReusedContext) {
context = { ...context };
}
React.useMemo(() => {
presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
}, [isPresent]);
/**
* If there's no `motion` components to fire exit animations, we want to remove this
* component immediately.
*/
React__namespace.useEffect(() => {
!isPresent &&
!presenceChildren.size &&
onExitComplete &&
onExitComplete();
}, [isPresent]);
children = (jsxRuntime.jsx(PopChild, { pop: mode === "popLayout", isPresent: isPresent, anchorX: anchorX, anchorY: anchorY, root: root, popNode: popNode, children: children }));
return (jsxRuntime.jsx(index.PresenceContext.Provider, { value: context, children: children }));
};
function newChildrenMap() {
return new Map();
}
const getChildKey = (child) => child.key || "";
function onlyElements(children) {
const filtered = [];
// We use forEach here instead of map as map mutates the component key by prepending `.$`
React.Children.forEach(children, (child) => {
if (React.isValidElement(child))
filtered.push(child);
});
return filtered;
}
/**
* `AnimatePresence` enables the animation of components that have been removed from the tree.
*
* When adding/removing more than a single child, every child **must** be given a unique `key` prop.
*
* Any `motion` components that have an `exit` property defined will animate out when removed from
* the tree.
*
* ```jsx
* import { motion, AnimatePresence } from 'framer-motion'
*
* export const Items = ({ items }) => (
* <AnimatePresence>
* {items.map(item => (
* <motion.div
* key={item.id}
* initial={{ opacity: 0 }}
* animate={{ opacity: 1 }}
* exit={{ opacity: 0 }}
* />
* ))}
* </AnimatePresence>
* )
* ```
*
* You can sequence exit animations throughout a tree using variants.
*
* If a child contains multiple `motion` components with `exit` props, it will only unmount the child
* once all `motion` components have finished animating out. Likewise, any components using
* `usePresence` all need to call `safeToRemove`.
*
* @public
*/
const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", anchorY = "top", root }) => {
const [isParentPresent, safeToRemove] = featureBundle.usePresence(propagate);
/**
* Filter any children that aren't ReactElements. We can only track components
* between renders with a props.key.
*/
const presentChildren = React.useMemo(() => onlyElements(children), [children]);
/**
* Track the keys of the currently rendered children. This is used to
* determine which children are exiting.
*/
const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
/**
* If `initial={false}` we only want to pass this to components in the first render.
*/
const isInitialRender = React.useRef(true);
/**
* Track which exiting children have finished animating out.
*/
const exitComplete = index.useConstant(() => new Map());
/**
* Track which components are currently processing exit to prevent duplicate processing.
*/
const exitingComponents = React.useRef(new Set());
/**
* Save children to render as React state. To ensure this component is concurrent-safe,
* we check for exiting children via an effect.
*/
const [diffedChildren, setDiffedChildren] = React.useState(presentChildren);
const [renderedChildren, setRenderedChildren] = React.useState(presentChildren);
index.useIsomorphicLayoutEffect(() => {
if (propagate && !isParentPresent && !renderedChildren.length) {
safeToRemove?.();
}
}, [isParentPresent, propagate, renderedChildren.length, safeToRemove]);
/**
* When every exit completes, we re-render to remove the exited children
* and store onExitComplete here. It fires from the cleanup of an effect
* keyed on the rendered children, so it runs in the commit that removes
* them (or when we unmount), after their own effect cleanups.
*/
const pendingExitComplete = React.useRef();
React.useEffect(() => () => {
const callback = pendingExitComplete.current;
pendingExitComplete.current = undefined;
callback?.();
}, [renderedChildren]);
index.useIsomorphicLayoutEffect(() => {
isInitialRender.current = false;
/**
* Update complete status of exiting children.
*/
for (let i = 0; i < renderedChildren.length; i++) {
const key = getChildKey(renderedChildren[i]);
if (!presentKeys.includes(key)) {
if (exitComplete.get(key) !== true) {
exitComplete.set(key, false);
}
}
else {
exitComplete.delete(key);
exitingComponents.current.delete(key);
}
}
}, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
const exitingChildren = [];
if (presentChildren !== diffedChildren) {
let nextChildren = [...presentChildren];
/**
* Loop through all the currently rendered components and decide which
* are exiting.
*
* Exiting children are reinserted directly after the child they
* previously followed. Splicing at their index within the previously
* rendered children, as we used to, indexes into the wrong list: it
* can interleave them with entering children and push present children
* to new positions, remounting them (#3746).
*/
let insertionIndex = 0;
for (const child of renderedChildren) {
const presentIndex = presentKeys.indexOf(getChildKey(child));
if (presentIndex === -1) {
nextChildren.splice(insertionIndex++, 0, child);
exitingChildren.push(child);
}
else {
insertionIndex = presentIndex + exitingChildren.length + 1;
}
}
/**
* Once every exiting child has finished animating out, remove them
* all at once. Otherwise, if we're in "wait" mode, we want to only
* render the exiting children until they've all exited.
*/
if (exitingChildren.every((child) => exitComplete.get(getChildKey(child)))) {
nextChildren = presentChildren;
}
else if (mode === "wait") {
nextChildren = exitingChildren;
}
setRenderedChildren(onlyElements(nextChildren));
setDiffedChildren(presentChildren);
/**
* Early return to ensure once we've set state with the latest diffed
* children, we can immediately re-render.
*/
return null;
}
if (process.env.NODE_ENV !== "production" &&
mode === "wait" &&
renderedChildren.length > 1) {
console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
}
/**
* If we've been provided a forceRender function by the LayoutGroupContext,
* we can use it to force a re-render amongst all surrounding components once
* all components have finished animating out.
*/
const { forceRender } = React.useContext(index.LayoutGroupContext);
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderedChildren.map((child) => {
const key = getChildKey(child);
const isPresent = propagate && !isParentPresent
? false
: presentChildren === renderedChildren ||
presentKeys.includes(key);
const onExit = () => {
if (exitingComponents.current.has(key)) {
return;
}
if (exitComplete.has(key)) {
exitingComponents.current.add(key);
exitComplete.set(key, true);
}
else {
return;
}
let isEveryExitComplete = true;
exitComplete.forEach((isExitComplete) => {
if (!isExitComplete)
isEveryExitComplete = false;
});
if (isEveryExitComplete) {
forceRender?.();
/**
* Re-diff rather than setting the children to render
* directly: this update can be applied after a
* transition has committed new children, so any
* children read now could be stale by then.
*/
setDiffedChildren([]);
propagate && safeToRemove?.();
pendingExitComplete.current = onExitComplete;
}
};
return (jsxRuntime.jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
? undefined
: false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, root: root, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, anchorY: anchorY, children: child }, key));
}) }));
};
/**
* Note: Still used by components generated by old versions of Framer
*
* @deprecated
*/
const DeprecatedLayoutGroupContext = /* @__PURE__ */ React.createContext(null);
function useIsMounted() {
const isMounted = React.useRef(false);
index.useIsomorphicLayoutEffect(() => {
isMounted.current = true;
return () => {
isMounted.current = false;
};
}, []);
return isMounted;
}
function useForceUpdate() {
const isMounted = useIsMounted();
const [forcedRenderCount, setForcedRenderCount] = React.useState(0);
const forceRender = React.useCallback(() => {
isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
}, [forcedRenderCount]);
/**
* Defer this to the end of the next animation frame in case there are multiple
* synchronous calls.
*/
const deferredForceRender = React.useCallback(() => motionDom.frame.postRender(forceRender), [forceRender]);
return [deferredForceRender, forcedRenderCount];
}
const shouldInheritGroup = (inherit) => inherit === true;
const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
const LayoutGroup = ({ children, id, inherit = true }) => {
const layoutGroupContext = React.useContext(index.LayoutGroupContext);
const deprecatedLayoutGroupContext = React.useContext(DeprecatedLayoutGroupContext);
const [forceRender, key] = useForceUpdate();
const context = React.useRef(null);
const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
if (context.current === null) {
if (shouldInheritId(inherit) && upstreamId) {
id = id ? upstreamId + "-" + id : upstreamId;
}
context.current = {
id,
group: shouldInheritGroup(inherit)
? layoutGroupContext.group || motionDom.nodeGroup()
: motionDom.nodeGroup(),
};
}
const memoizedContext = React.useMemo(() => ({ ...context.current, forceRender }), [key]);
return (jsxRuntime.jsx(index.LayoutGroupContext.Provider, { value: memoizedContext, children: children }));
};
/**
* Used in conjunction with the `m` component to reduce bundle size.
*
* `m` is a version of the `motion` component that only loads functionality
* critical for the initial render.
*
* `LazyMotion` can then be used to either synchronously or asynchronously
* load animation and gesture support.
*
* ```jsx
* // Synchronous loading
* import { LazyMotion, m, domAnimation } from "framer-motion"
*
* function App() {
* return (
* <LazyMotion features={domAnimation}>
* <m.div animate={{ scale: 2 }} />
* </LazyMotion>
* )
* }
*
* // Asynchronous loading
* import { LazyMotion, m } from "framer-motion"
*
* function App() {
* return (
* <LazyMotion features={() => import('./path/to/domAnimation')}>
* <m.div animate={{ scale: 2 }} />
* </LazyMotion>
* )
* }
* ```
*
* @public
*/
function LazyMotion({ children, features, strict = false }) {
const [, setIsLoaded] = React.useState(!isLazyBundle(features));
const loadedRenderer = React.useRef(undefined);
/**
* If this is a synchronous load, load features immediately
*/
if (!isLazyBundle(features)) {
const { renderer, ...loadedFeatures } = features;
loadedRenderer.current = renderer;
index.loadFeatures(loadedFeatures);
}
React.useEffect(() => {
if (isLazyBundle(features)) {
features().then(({ renderer, ...loadedFeatures }) => {
index.loadFeatures(loadedFeatures);
loadedRenderer.current = renderer;
setIsLoaded(true);
});
}
}, []);
return (jsxRuntime.jsx(index.LazyContext.Provider, { value: { renderer: loadedRenderer.current, strict }, children: children }));
}
function isLazyBundle(features) {
return typeof features === "function";
}
/**
* `MotionConfig` is used to set configuration options for all children `motion` components.
*
* ```jsx
* import { motion, MotionConfig } from "framer-motion"
*
* export function App() {
* return (
* <MotionConfig transition={{ type: "spring" }}>
* <motion.div animate={{ x: 100 }} />
* </MotionConfig>
* )
* }
* ```
*
* @public
*/
function MotionConfig({ children, ...config }) {
/**
* Inherit props from any parent MotionConfig components
*/
const parentConfig = React.useContext(index.MotionConfigContext);
config = { ...parentConfig, ...config };
config.transition = motionDom.resolveTransition(config.transition, parentConfig.transition);
/**
* Don't allow isStatic to change between renders as it affects how many hooks
* motion components fire.
*/
config.isStatic = index.useConstant(() => config.isStatic);
/**
* Creating a new config context object will re-render every `motion` component
* every time it renders. So we only want to create a new one sparingly.
*/
const context = React.useMemo(() => config, [
JSON.stringify(config.transition),
config.transformPagePoint,
config.reducedMotion,
config.skipAnimations,
config.isValidProp,
]);
return (jsxRuntime.jsx(index.MotionConfigContext.Provider, { value: context, children: children }));
}
const motion = /*@__PURE__*/ proxy.createMotionProxy(featureBundle.featureBundle, featureBundle.createDomVisualElement);
const Group = /*@__PURE__*/ proxy.createReorderGroup(motion);
var namespace = /*#__PURE__*/Object.freeze({
__proto__: null,
Group: Group,
Item: proxy.ReorderItem
});
function isDOMKeyframes(keyframes) {
return typeof keyframes === "object" && !Array.isArray(keyframes);
}
function resolveSubjects(subject, keyframes, scope, selectorCache) {
if (subject == null) {
return [];
}
if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
return motionDom.resolveElements(subject, scope, selectorCache);
}
else if (subject instanceof NodeList) {
return Array.from(subject);
}
else if (Array.isArray(subject)) {
return subject.filter((s) => s != null);
}
else {
return [subject];
}
}
function calculateRepeatDuration(duration, repeat, repeatDelay) {
return duration * (repeat + 1) + repeatDelay * repeat;
}
/**
* The time of a label, or a label with an offset like "label+1" or
* "label-0.5". An exact label name wins over an offset.
*/
function calcLabelTime(position, labels) {
if (labels.has(position))
return labels.get(position);
const [, name, offset] = position.match(/^(.+?)([+-][\d.]+)$/) || [];
return labels.has(name)
? Math.max(0, labels.get(name) + parseFloat(offset))
: undefined;
}
/**
* Given a absolute or relative time definition and current/prev time state of the sequence,
* calculate an absolute time for the next keyframes.
*/
function calcNextTime(current, next, prev, labels) {
if (typeof next === "number") {
return next;
}
else if (next.startsWith("-") || next.startsWith("+")) {
return Math.max(0, current + parseFloat(next));
}
else if (next === "<") {
return prev;
}
else if (next.startsWith("<")) {
return Math.max(0, prev + parseFloat(next.slice(1)));
}
else {
return calcLabelTime(next, labels) ?? current;
}
}
function eraseKeyframes(sequence, startTime, endTime) {
for (let i = 0; i < sequence.length; i++) {
const keyframe = sequence[i];
if (keyframe.at > startTime && keyframe.at < endTime) {
motionUtils.removeItem(sequence, keyframe);
// If we remove this item we have to push the pointer back one
i--;
}
}
}
function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
/**
* Erase every existing value between currentTime and targetTime,
* this will essentially splice this timeline into any currently
* defined ones.
*/
eraseKeyframes(sequence, startTime, endTime);
for (let i = 0; i < keyframes.length; i++) {
sequence.push({
value: keyframes[i],
at: motionDom.mixNumber(startTime, endTime, offset[i]),
easing: motionUtils.getEasingForSegment(easing, i),
});
}
}
/**
* Take an array of times that represent repeated keyframes. For instance
* if we have original times of [0, 0.5, 1] then our repeated times will
* be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back
* down to a 0-1 scale.
*
* `repeatDelayUnits` is the repeatDelay expressed in units of a single
* iteration's duration, so the total span equals `(repeat + 1) + repeat * repeatDelayUnits`.
*/
function normalizeTimes(times, repeat, repeatDelayUnits = 0) {
const totalUnits = repeat + 1 + repeat * repeatDelayUnits;
for (let i = 0; i < times.length; i++) {
times[i] = times[i] / totalUnits;
}
}
function compareByTime(a, b) {
if (a.at === b.at) {
if (a.value === null)
return 1;
if (b.value === null)
return -1;
return 0;
}
else {
return a.at - b.at;
}
}
const defaultSegmentEasing = "easeInOut";
const MAX_REPEAT = 20;
function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators, info) {
const defaultDuration = defaultTransition.duration || 0.3;
const animationDefinitions = new Map();
const sequences = new Map();
const elementCache = {};
const timeLabels = new Map();
let prevTime = 0;
let currentTime = 0;
let totalDuration = 0;
/**
* Build the timeline by mapping over the sequence array and converting
* the definitions into keyframes and offsets with absolute time values.
* These will later get converted into relative offsets in a second pass.
*
* Nested sequences are resolved recursively. `base` is the absolute
* start of the sequence being resolved, so numeric `at` values inside
* a nested sequence are relative to where it starts. Returns the time
* the sequence ends.
*/
const resolveSequence = (sequence, base) => {
let sequenceEnd = base;
const resolveTime = (at) => typeof at === "number"
? base + at
: calcNextTime(currentTime, at, prevTime, timeLabels);
for (let i = 0; i < sequence.length; i++) {
const segment = sequence[i];
/**
* If this is a timeline label, mark it and skip the rest of this iteration.
*/
if (typeof segment === "string") {
timeLabels.set(segment, currentTime);
continue;
}
else if (!Array.isArray(segment)) {
const start = segment.at === undefined
? currentTime
: resolveTime(segment.at);
if ("sequence" in segment) {
/**
* Resolve the nested sequence from its start. Afterwards
* "<" points at its start and the next segment follows
* its end, as if it were a single segment.
*/
prevTime = currentTime = start;
currentTime = resolveSequence(segment.sequence, start);
prevTime = start;
sequenceEnd = Math.max(sequenceEnd, currentTime);
}
else {
timeLabels.set(segment.name, start);
}
continue;
}
let [subject, keyframes, transition = {}] = segment;
/**
* If a relative or absolute time value has been specified we need to resolve
* it in relation to the currentTime.
*/
if (transition.at !== undefined) {
currentTime = resolveTime(transition.at);
}
/**
* Keep track of the maximum duration in this definition. This will be
* applied to currentTime once the definition has been parsed.
*/
let maxDuration = 0;
const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
const valueKeyframesAsList = keyframesAsList(valueKeyframes);
const { delay = 0, times = motionDom.defaultOffset(valueKeyframesAsList), type = defaultTransition.type || "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
/**
* Resolve stagger() if defined.
*/
const calculatedDelay = typeof delay === "function"
? delay(elementIndex, numSubjects)
: delay;
/**
* If this animation should and can use a spring, generate a spring easing function.
*/
const numKeyframes = valueKeyframesAsList.length;
const createGenerator = motionDom.isGenerator(type)
? type
: generators?.[type || "keyframes"];
if (numKeyframes <= 2 && createGenerator) {
/**
* As we're creating an easing function from a spring,
* ideally we want to generate it using the real distance
* between the two keyframes. However this isn't always
* possible - in these situations we use 0-100.
*/
let absoluteDelta = 100;
if (numKeyframes === 2 &&
isNumberKeyframesArray(valueKeyframesAsList)) {
const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
absoluteDelta = Math.abs(delta);
}
const springTransition = {
...defaultTransition,
...remainingTransition,
};
if (duration !== undefined) {
springTransition.duration =
motionUtils.secondsToMilliseconds(duration);
}
const springEasing = motionDom.createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
ease = springEasing.ease;
duration = springEasing.duration;
}
duration ?? (duration = defaultDuration);
const startTime = currentTime + calculatedDelay;
/**
* If there's only one time offset of 0, fill in a second with length 1
*/
if (times.length === 1 && times[0] === 0) {
times[1] = 1;
}
/**
* Fill out if offset if fewer offsets than keyframes
*/
const remainder = times.length - valueKeyframesAsList.length;
remainder > 0 && motionDom.fillOffset(times, remainder);
/**
* If only one value has been set, ie [1], push a null to the start of
* the keyframe array. This will let us mark a keyframe at this point
* that will later be hydrated with the previous value.
*/
valueKeyframesAsList.length === 1 &&
valueKeyframesAsList.unshift(null);
/**
* Segments can't express `repeat: Infinity` or very large
* counts — they'd leave dead time after the segment or
* explode the keyframe array. Ignore with a warning.
*/
if (repeat) {
typeof process !== "undefined" &&
process.env.NODE_ENV !== "production" &&
motionUtils.warning(repeat < MAX_REPEAT, `Sequence segments can't repeat ${repeat} times — ignoring repeat option. Use a value below ${MAX_REPEAT} or apply repeat at the sequence level instead.`);
}
if (repeat && repeat < MAX_REPEAT) {
/**
* Express repeatDelay in units of a single iteration's duration
* so it can be added to the per-iteration time offsets below
* before they're normalized to 0-1.
*/
const repeatDelayUnits = duration > 0 ? repeatDelay / duration : 0;
duration = calculateRepeatDuration(duration, repeat, repeatDelay);
const originalKeyframes = [...valueKeyframesAsList];
const originalTimes = [...times];
ease = Array.isArray(ease) ? [...ease] : [ease];
const originalEase = [...ease];
/**
* For reverse/mirror, alternate iterations play the segment
* backwards. mirror matches JSAnimation's mirroredGenerator:
* reversed keyframes, easings unchanged. reverse matches
* JSAnimation's iterationProgress = 1 - p: reversed
* keyframes, easing array reversed AND each function easing
* mapped through reverseEasing (string easings unchanged —
* they're resolved later by the keyframes engine).
*/
const isFlipping = repeatType === "reverse" || repeatType === "mirror";
let flippedKeyframes = originalKeyframes;
let flippedEases = originalEase;
if (isFlipping) {
flippedKeyframes = [...originalKeyframes].reverse();
if (repeatType === "reverse") {
flippedEases = [...originalEase]
.reverse()
.map((e) => typeof e === "function"
? motionUtils.reverseEasing(e)
: e);
}
}
for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
const isFlipped = isFlipping && repeatIndex % 2 === 0;
const iterKeyframes = isFlipped
? flippedKeyframes
: originalKeyframes;
const iterEase = isFlipped ? flippedEases : originalEase;
const iterStartOffset = (repeatIndex + 1) * (1 + repeatDelayUnits);
/**
* If repeatDelay is set, hold the previous iteration's
* final value through the delay by inserting a keyframe
* at the moment the next iteration begins.
*/
if (repeatDelayUnits > 0) {
valueKeyframesAsList.push(valueKeyframesAsList[valueKeyframesAsList.length - 1]);
times.push(iterStartOffset);
ease.push("linear");
}
valueKeyframesAsList.push(...iterKeyframes);
for (let keyframeIndex = 0; keyframeIndex < iterKeyframes.length; keyframeIndex++) {
times.push(originalTimes[keyframeIndex] + iterStartOffset);
ease.push(keyframeIndex === 0
? "linear"
: motionUtils.getEasingForSegment(iterEase, keyframeIndex - 1));
}
}
normalizeTimes(times, repeat, repeatDelayUnits);
}
const targetTime = startTime + duration;
/**
* Add keyframes, mapping offsets to absolute time.
*/
addKeyframes(valueSequence, valueKeyframesAsList, ease, times, startTime, targetTime);
maxDuration = Math.max(calculatedDelay + duration, maxDuration);
totalDuration = Math.max(targetTime, totalDuration);
};
if (motionDom.isMotionValue(subject)) {
const subjectSequence = getSubjectSequence(subject, sequences);
resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
}
else {
const subjects = resolveSubjects(subject, keyframes, scope, elementCache);
const numSubjects = subjects.length;
/**
* For every element in this segment, process the defined values.
*/
for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
/**
* Cast necessary, but we know these are of this type
*/
keyframes = keyframes;
transition = transition;
const thisSubject = subjects[subjectIndex];
const subjectSequence = getSubjectSequence(thisSubject, sequences);
for (const key in keyframes) {
resolveValueSequence(keyframes[key], getValueTransition(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
}
}
}
prevTime = currentTime;
currentTime += maxDuration;
sequenceEnd = Math.max(sequenceEnd, currentTime);
}
return sequenceEnd;
};
resolveSequence(sequence, 0);
if (info) {
info.duration = totalDuration;
info.labels = timeLabels;
}
/**
* For every element and value combination create a new animation.
*/
sequences.forEach((valueSequences, element) => {
for (const key in valueSequences) {
const valueSequence = valueSequences[key];
/**
* Arrange all the keyframes in ascending time order.
*/
valueSequence.sort(compareByTime);
const keyframes = [];
const valueOffset = [];
const valueEasing = [];
/**
* For each keyframe, translate absolute times into
* relative offsets based on the total duration of the timeline.
*/
for (let i = 0; i < valueSequence.length; i++) {
const { at, value, easing } = valueSequence[i];
keyframes.push(value);
valueOffset.push(motionUtils.progress(0, totalDuration, at));
valueEasing.push(easing || "easeOut");
}
/**
* If the first keyframe doesn't land on offset: 0
* provide one by duplicating the initial keyframe. This ensures
* it snaps to the first keyframe when the animation starts.
*/
if (valueOffset[0] !== 0) {
valueOffset.unshift(0);
keyframes.unshift(keyframes[0]);
valueEasing.unshift(defaultSegmentEasing);
}
/**
* If the last keyframe doesn't land on offset: 1
* provide one with a null wildcard value. This will ensure it
* stays static until the end of the animation.
*/
if (valueOffset[valueOffset.length - 1] !== 1) {
valueOffset.push(1);
keyframes.push(null);
}
if (!animationDefinitions.has(element)) {
animationDefinitions.set(element, {
keyframes: {},
transition: {},
});
}
const definition = animationDefinitions.get(element);
definition.keyframes[key] = keyframes;
/**
* Exclude `type` from defaultTransition since springs have been
* converted to duration-based easing functions in resolveValueSequence.
* Including `type: "spring"` would cause JSAnimation to error when
* the merged keyframes array has more than 2 keyframes.
*/
const { type: _type, ...remainingDefaultTransition } = defaultTransition;
definition.transition[key] = {
...remainingDefaultTransition,
duration: totalDuration,
ease: valueEasing,
times: valueOffset,
...sequenceTransition,
};
}
});
return animationDefinitions;
}
function getSubjectSequence(subject, sequences) {
!sequences.has(subject) && sequences.set(subject, {});
return sequences.get(subject);
}
function getValueSequence(name, sequences) {
if (!sequences[name])
sequences[name] = [];
return sequences[name];
}
function keyframesAsList(keyframes) {
return Array.isArray(keyframes) ? keyframes : [keyframes];
}
function getValueTransition(transition, key) {
return transition && transition[key]
? {
...transition,
...transition[key],
}
: { ...transition };
}
const isNumber = (keyframe) => typeof keyframe === "number";
const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
function isSingleValue(subject, keyframes) {
return (motionDom.isMotionValue(subject) ||
typeof subject === "number" ||
(typeof subject === "string" && !isDOMKeyframes(keyframes)));
}
/**
* Implementation
*/
function animateSubject(subject, keyframes, options, scope) {
const animations = [];
if (isSingleValue(subject, keyframes)) {
animations.push(motionDom.animateSingleValue(subject, isDOMKeyframes(keyframes)
? keyframes.default || keyframes
: keyframes, options ? options.default || options : options));
}
else {
// Gracefully handle null/undefined subjects (e.g., from querySelector returning null)
if (subject == null) {
return animations;
}
const subjects = resolveSubjects(subject, keyframes, scope);
const numSubjects = subjects.length;
process.env.NODE_ENV !== "production" &&
motionUtils.invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
for (let i = 0; i < numSubjects; i++) {
const thisSubject = subjects[i];
const transition = { ...options };
/**
* Resolve stagger function if provided.
*/
if ("delay" in transition &&
typeof transition.delay === "function") {
transition.delay = transition.delay(i, numSubjects);
}
if (thisSubject instanceof Element) {
/**
* An element already owned by a VisualElement (a <motion.*>
* component or animateLayout()) animates its values so they
* share one renderer. Anything else is driven through
* styleEffect (or svgEffect) and the DOM keyframe resolver,
* without creating a VisualElement.
*/
animations.push(...motionDom.animateElement(thisSubject, keyframes, transition, motionDom.visualElementStore.get(thisSubject)));
}
else {
/**
* Registered effects (animate.addEffect) claim non-DOM
* subjects before we fall back to writing plain properties.
*/
animations.push(...motionDom.animateEffectSubject(motionDom.findEffect(thisSubject) ?? motionDom.propEffect, thisSubject, keyframes, transition));
}
}
}
return animations;
}
function animateSequence(sequence, options, scope, info) {
const animations = [];
/**
* Pre-process: replace function segments with MotionValue segments,
* subscribe callbacks immediately
*/
const processedSequence = sequence.map((segment) => {
if (Array.isArray(segment) && typeof segment[0] === "function") {
const callback = segment[0];
const mv = motionDom.motionValue(0);
mv.on("change", callback);
if (segment.length === 1) {
return [mv, [0, 1]];
}
else if (segment.length === 2) {
return [mv, [0, 1], segment[1]];
}
else {
return [mv, segment[1], segment[2]];
}
}
return segment;
});
const animationDefinitions = createAnimationsFromSequence(processedSequence, options, scope, { spring: motionDom.spring }, info);
animationDefinitions.forEach(({ keyframes, transition }, subject) => {
animations.push(...animateSubject(subject, keyframes, transition));
});
return animations;
}
let markerId = 0;
/**
* Copy a segment with a new `at`, adding a transition if it has none.
*/
function withAt(segment, at) {
const copy = [...segment];
const i = typeof copy[0] === "function" ? Math.max(1, copy.length - 1) : 2;
copy[i] = { ...copy[i], at };
return copy;
}
const label = (name, at) => at === undefined ? name : { name, at };
/**
* Rewind to the start and stop, so every value is back at the value it
* started from and the next build reads those values as its origin.
*/
function rewind(animation) {
animation.pause();
animation.time = 0;
animation.stop();
}
/**
* A sequence that can be changed after it's created. Segments, labels,
* callbacks, pauses and other timelines can be added, moved and removed
* at any point, including while it plays.
*
* Changes are batched and applied once per microtask. Each change
* rebuilds the underlying animations from the timeline's starting
* values, then restores the playhead, speed and play state, so changes
* made while playing take effect without a jump.
*/
class Timeline {
/**
* `animations` are already running animations of `items`, as
* animate() makes them. The timeline plays these until it's first
* changed, so it costs nothing over the animations themselves until
* then.
*/
constructor(items = [], options = {}, animations) {
this.options = options;
this.entries = [];
/**
* The repeat the playhead is in, to detect when it starts another.
*/
this.repeatIndex = 0;
this.prevTime = 0;
this.markers = [];
this.labels = new Map();
this.totalDuration = 0;
this.isDirty = false;
this.isDone = false;
this.isRebuilding = false;
this.playbackSpeed = 1;
/**
* True while this plays the animations it was created with, before
* any change compiles it as a sequence.
*/
this.isWrapped = false;
this.stop = () => {
this.flush();
this.group?.stop();
};
this.isPaused = options.autoplay === false;
this.newFinished();
items.forEach((item) => this.add(item));
if (animations) {
this.isDirty = false;
this.isWrapped = true;
this.group = new motionDom.GroupAnimationWithThen(animations);
this.watch();
}
else {
/**
* Build now, like animate(), so selectors resolve while a
* scope is attached. Later changes are batched.
*/
this.invalidate();
this.flush();
}
/**
* Register with the scope (for instance from useAnimate()) so it
* stops when the scope is torn down.
*/
const { scope } = options;
if (scope) {
scope.animations.push(this);
this.finished.then(() => motionUtils.removeItem(scope.animations, this));
}
}
/**
* Add a segment, label or timeline. `at` overrides any `at` already
* on the segment. The item itself is the handle for `move()` and
* `remove()`.
*/
add(item, at) {
if (item instanceof Timeline)
item.adopt(this);
return this.push({ item, at });
}
/**
* Fire a callback when the playhead crosses `at`, in either direction.
* It receives the direction: 1 forwards, -1 backwards.
*/
call(callback, at) {
return this.push({
item: callback,
at,
marker: { name: "_m" + markerId++, time: 0, callback },
});
}
/**
* Pause when the playhead reaches `at`.
*/
addPause(at, callback) {
return this.push({
item: callback || {},
at,
marker: { name: "_m" + markerId++, time: 0, callback, pause: true },
});
}
/**
* Change where an item starts.
*/
move(item, at) {
this.entries.forEach((entry) => {
if (entry.item === item)
entry.at = at;
});
return this.invalidate();
}
/**
* Remove a segment, label, callback or timeline.
*/
remove(item) {
if (item instanceof Timeline)
item.parent = undefined;
this.entries = this.entries.filter((entry) => entry.item !== item);
return this.invalidate();
}
clear() {
this.entries = [];
return this.invalidate();
}
/**
* The time of a label in seconds, or `undefined` if there's no label
* with this name.
*/
getLabelTime(name) {
this.flush();
return this.labels.get(name);
}
/**
* Jump to a time in seconds or a label.
*/
seek(position) {
this.time = this.resolve(position);
return this;
}
/**
* Play forwards or backwards to a time or label, then pause there.
*/
playTo(position) {
const target = this.resolve(position);
const speed = Math.abs(this.speed);
this.speed = target < this.time ? -speed : speed;
this.stopAt = target;
this.clock || this.invalidate();
this.play();
return this;
}
reverse() {
this.speed = -this.speed;
this.play();
return this;
}
get progress() {
return this.duration ? this.time / this.duration : 0;
}
set progress(progress) {
this.time = progress * this.duration;
}
get time() {
return this.active()?.time ?? 0;
}
set time(time) {
this.flush();
this.prevTime = time;
this.group && (this.group.time = time);
this.repeatIndex = this.currentRepeat();
}
get speed() {
return this.playbackSpeed;
}
set speed(speed) {
this.playbackSpeed = speed;
this.group && (this.group.speed = speed);
}
get duration() {
this.flush();
return this.isWrapped ? this.group.duration : this.totalDuration;
}
get iterationDuration() {
this.flush();
return this.isWrapped
? this.group.iterationDuration
: this.totalDuration;
}
get state() {
return this.active()?.state ?? "idle";
}
get startTime() {
return this.active()?.startTime ?? null;
}
play() {
this.flush();
this.isPaused = false;
this.group?.play();
/**
* Watch after playing, so it waits for the restarted animations
* rather than the ones that already finished.
*/
if (this.isDone) {
this.newFinished();
this.watch();
}
}
pause() {
this.flush();
this.isPaused = true;
this.group?.pause();
}
cancel() {
this.flush();
this.group?.cancel();
}
complete() {
this.flush();
this.group?.complete();
}
attachTimeline(timeline) {
this.flush();
this.scrollTimeline = timeline;
this.detachScroll = this.group?.attachTimeline(timeline);
return () => {
this.scrollTimeline = undefined;
this.detachScroll?.();
};
}
then(onResolve, onReject) {
return this.finished.then(onResolve, onReject);
}
/**
* The current animations, if any are running. Skipped animations
* (skipAnimations, reduced motion) can leave the group empty.
*/
active() {
this.flush();
return this.group?.animations.length ? this.group : undefined;
}
push(entry) {
this.entries.push(entry);
return this.invalidate();
}
/**
* Schedule a rebuild. A nested timeline passes changes up, as it's
* built as part of its parent.
*/
invalidate() {
if (this.parent) {
this.parent.invalidate();
}
else if (!this.isDirty) {
this.isDirty = true;
queueMicrotask(() => this.flush());
}
return this;
}
/**
* Apply pending changes now, so reads straight after a change
* reflect it.
*/
flush() {
this.isDirty && !this.parent && this.build();
}
adopt(parent) {
if (this.group) {
rewind(this.group);
this.group = undefined;
}
this.isDirty = false;
this.parent = parent;
}
build() {
this.isDirty = false;
this.isWrapped = false;
const prev = this.group;
let time = 0;
if (prev) {
this.isRebuilding = true;
if (this.scrollTimeline) {
/**
* Scroll-linked animations can't be seeked in seconds.
* Cancelling also returns them to their starting values,
* and the new build is attached to scroll instead.
*/
this.detachScroll?.();
prev.cancel();
}
else {
time = prev.animations.length ? prev.time : 0;
rewind(prev);
}
this.isRebuilding = false;
}
const { defaultTransition, onComplete, onUpdate, onRepeat, onReverseComplete, autoplay, scope, ...options } = this.options;
/**
* Inherit MotionConfig settings from a useAnimate() scope.
*/
const playback = {};
if (scope?.reduceMotion !== undefined) {
playback.reduceMotion = scope.reduceMotion;
}
if (scope?.skipAnimations !== undefined) {
playback.skipAnimations = scope.skipAnimations;
}
Object.assign(playback, options);
const markers = new Map();
const info = {};
const animations = animateSequence(this.toSequence(markers), { defaultTransition, ...playback }, scope, info);
const labels = info.labels;
let duration = playback.duration ?? info.duration;
/**
* A `duration` option stretches every animation to fit, so scale
* label and marker times to match.
*/
const scale = info.duration ? duration / info.duration : 1;
labels.forEach((time, name) => labels.set(name, time * scale));
/**
* Markers are resolved as labels. Move them out of the label map
* and extend the duration to reach any marker past the end.
*/
this.markers = [];
markers.forEach((marker, name) => {
marker.time = labels.get(name);
labels.delete(name);
duration = Math.max(duration, marker.time);
this.markers.push(marker);
});
this.markers.sort((a, b) => a.time - b.time);
this.labels = labels;
this.totalDuration = duration;
/**
* Callbacks, pauses and playTo() watch a linear clock. Without
* them, the timeline is only its animations.
*/
this.clock = this.clockAnimation = undefined;
if (this.markers.length ||
this.stopAt !== undefined ||
onUpdate ||
onRepeat) {
const clock = (this.clock = motionDom.motionValue(0));
clock.on("change", (t) => clock === this.clock && this.onClock(t));
animations.unshift((this.clockAnimation = motionDom.animateSingleValue(clock, [0, duration], {
...playback,
duration,
ease: "linear",
})));
}
const group = (this.group = new motionDom.GroupAnimationWithThen(animations));
time = Math.min(time, duration);
if (this.isDone && time < duration)
this.newFinished();
if (this.scrollTimeline) {
this.detachScroll = group.attachTimeline(this.scrollTimeline);
}
else {
group.speed = this.playbackSpeed;
if (this.isPaused)
group.pause();
if (time)
group.time = time;
}
this.repeatIndex = this.currentRepeat();
/**
* Treat a start from 0 as coming from just before it, so markers
* at 0 fire.
*/
this.prevTime = time || -1;
this.watch();
}
toSequence(markers) {
return this.entries.map(({ item, at, marker }) => {
if (marker) {
markers.set(marker.name, marker);
return label(marker.name, at);
}
if (item instanceof Timeline) {
return { sequence: item.toSequence(markers), at };
}
if (typeof item === "string")
return label(item, at);
if (at === undefined)
return item;
return Array.isArray(item)
? withAt(item, at)
: { ...item, at };
});
}
resolve(position) {
this.flush();
return typeof position === "number"
? position
: calcLabelTime(position, this.labels) ?? this.time;
}
/**
* The repeat the clock is in, from its time across all repeats.
*/
currentRepeat() {
const { repeat = 0, repeatDelay = 0, delay = 0 } = this.options;
const cycle = this.totalDuration + repeatDelay;
const time = (this.clockAnimation?.time ?? 0) - delay;
return cycle && time > 0
? Math.min(repeat, Math.floor(time / cycle))
: 0;
}
onClock(time) {
let prevTime = this.prevTime;
this.prevTime = time;
if (this.isRebuilding)
return;
const { onUpdate, onRepeat, repeatType = "loop" } = this.options;
onUpdate?.(time);
const repeatIndex = this.currentRepeat();
if (repeatIndex !== this.repeatIndex) {
this.repeatIndex = repeatIndex;
onRepeat?.();
/**
* A loop jumps the playhead back to the start, or to the
* end when playing backwards. Finish crossing the repeat
* that ended, then cross the new one from its edge.
*/
if (repeatType === "loop") {
const isForward = this.speed > 0;
if (this.cross(prevTime, isForward ? this.totalDuration : 0)) {
return;
}
prevTime = isForward ? -1 : Infinity;
}
}
this.cross(prevTime, time);
}
/**
* Fire markers between two playhead times. Returns `true` if it
* paused.
*/
cross(from, to) {
if (from === to)
return;
const isForward = to > from;
const crossed = (t) => isForward ? t > from && t <= to : t < from && t >= to;
const markers = isForward ? this.markers : [...this.markers].reverse();
for (const marker of markers) {
if (!crossed(marker.time))
continue;
marker.callback?.(isForward ? 1 : -1);
if (marker.pause)
return this.pauseAt(marker.time);
}
if (this.stopAt !== undefined && crossed(this.stopAt)) {
this.pauseAt(this.stopAt);
this.stopAt = undefined;
return true;
}
}
pauseAt(time) {
this.pause();
this.time = time;
return true;
}
watch() {
const group = this.group;
group.finished.then(() => {
if (group !== this.group || this.isDone)
return;
this.isDone = true;
const { onComplete, onReverseComplete } = this.options;
/**
* Without onReverseComplete, onComplete fires in either
* direction, as it does for a single animation.
*/
const callback = (this.speed < 0 && onReverseComplete) || onComplete;
callback?.();
this.resolveFinished();
});
}
newFinished() {
this.isDone = false;
this.finished = new Promise((resolve) => {
this.resolveFinished = resolve;
});
}
}
function isSequence(value) {
return Array.isArray(value) && value.some(Array.isArray);
}
/**
* Creates an animation function that is optionally scoped
* to a specific element.
*/
function createScopedAnimate(options = {}) {
const { scope, reduceMotion, skipAnimations } = options;
/**
* Implementation
*/
function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
const motionScope = motionDom.activeScope.current;
const scopeTransition = motionScope?.transition;
const inherited = {};
if (reduceMotion !== undefined)
inherited.reduceMotion = reduceMotion;
if (skipAnimations !== undefined)
inherited.skipAnimations = skipAnimations;
let timeline;
if (isSequence(subjectOrSequence)) {
const sequenceOptions = {
...inherited,
...optionsOrKeyframes,
scope,
};
if (scopeTransition) {
sequenceOptions.defaultTransition = {
...scopeTransition,
...sequenceOptions.defaultTransition,
};
}
timeline = new Timeline(subjectOrSequence, sequenceOptions);
}
else {
// Extract top-level onComplete so it doesn't get applied per-value
const { onComplete, ...rest } = options || {};
const transition = {
...inherited,
...scopeTransition,
...rest,
};
/**
* Play the animations directly, and only compile them as a
* sequence if the timeline is changed. Values animated from a
* number are animated via their onUpdate callback instead.
*/
const { onUpdate } = rest;
const segment = (typeof subjectOrSequence === "number" ||
(typeof subjectOrSequence === "string" &&
(typeof optionsOrKeyframes === "string" ||
Array.isArray(optionsOrKeyframes)))
? [
onUpdate || (() => { }),
Array.isArray(optionsOrKeyframes)
? optionsOrKeyframes
: [subjectOrSequence, optionsOrKeyframes],
{ ...transition, onUpdate: undefined },
]
: [subjectOrSequence, optionsOrKeyframes, transition]);
timeline = new Timeline([segment], { ...inherited, onComplete, scope }, animateSubject(subjectOrSequence, optionsOrKeyframes, transition, scope));
}
if (motionScope) {
timeline.finished.then(motionScope.add(() => timeline.stop()));
}
return timeline;
}
return scopedAnimate;
}
const animate = /* @__PURE__ */ Object.assign(
/* @__PURE__ */ createScopedAnimate(), {
/**
* Register an effect so `animate()` can animate the subjects it
* claims, for instance `animate.addEffect(threeEffect)`. The most
* recently added effect is tested first. DOM elements are always
* animated directly.
*/
addEffect: motionDom.addEffect,
removeEffect: motionDom.removeEffect,
});
function animateElements(elementOrSelector, keyframes, options, scope) {
// Gracefully handle null/undefined elements (e.g., from querySelector returning null)
if (elementOrSelector == null) {
return [];
}
const elements = motionDom.resolveElements(elementOrSelector, scope);
const numElements = elements.length;
typeof process !== "undefined" &&
process.env.NODE_ENV !== "production" &&
motionUtils.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
/**
* WAAPI doesn't support interrupting animations.
*
* Therefore, starting animations requires a three-step process:
* 1. Stop existing animations (write styles to DOM)
* 2. Resolve keyframes (read styles from DOM)
* 3. Create new animations (write styles to DOM)
*
* The hybrid `animate()` function uses AsyncAnimation to resolve
* keyframes before creating new animations, which removes style
* thrashing. Here, we have much stricter filesize constraints.
* Therefore we do this in a synchronous way that ensures that
* at least within `animate()` calls there is no style thrashing.
*
* In the motion-native-animate-mini-interrupt benchmark this
* was 80% faster than a single loop.
*/
const animationDefinitions = [];
/**
* Step 1: Build options and stop existing animations (write)
*/
for (let i = 0; i < numElements; i++) {
const element = elements[i];
const elementTransition = { ...options };
/**
* Resolve stagger function if provided.
*/
if (typeof elementTransition.delay === "function") {
elementTransition.delay = elementTransition.delay(i, numElements);
}
for (const valueName in keyframes) {
let valueKeyframes = keyframes[valueName];
if (!Array.isArray(valueKeyframes)) {
valueKeyframes = [valueKeyframes];
}
const valueOptions = {
...motionDom.getValueTransition(elementTransition, valueName),
};
valueOptions.duration && (valueOptions.duration = motionUtils.secondsToMilliseconds(valueOptions.duration));
valueOptions.delay && (valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay));
/**
* If there's an existing animation playing on this element then stop it
* before creating a new one.
*/
const map = motionDom.getAnimationMap(element);
const key = motionDom.animationMapKey(valueName, valueOptions.pseudoElement || "");
const currentAnimation = map.get(key);
currentAnimation && currentAnimation.stop();
animationDefinitions.push({
map,
key,
unresolvedKeyframes: valueKeyframes,
options: {
...valueOptions,
element,
name: valueName,
allowFlatten: !elementTransition.type && !elementTransition.ease,
},
});
}
}
/**
* Step 2: Resolve keyframes (read)
*/
for (let i = 0; i < animationDefinitions.length; i++) {
const { unresolvedKeyframes, options: animationOptions } = animationDefinitions[i];
const { element, name, pseudoElement } = animationOptions;
if (!pseudoElement && unresolvedKeyframes[0] === null) {
unresolvedKeyframes[0] = motionDom.getComputedStyle(element, name);
}
motionDom.fillWildcards(unresolvedKeyframes);
motionDom.applyPxDefaults(unresolvedKeyframes, name);
/**
* If we only have one keyframe, explicitly read the initial keyframe
* from the computed style. This is to ensure consistency with WAAPI behaviour
* for restarting animations, for instance .play() after finish, when it
* has one vs two keyframes.
*/
if (!pseudoElement && unresolvedKeyframes.length < 2) {
unresolvedKeyframes.unshift(motionDom.getComputedStyle(element, name));
}
animationOptions.keyframes = unresolvedKeyframes;
}
/**
* Step 3: Create new animations (write)
*/
const animations = [];
for (let i = 0; i < animationDefinitions.length; i++) {
const { map, key, options: animationOptions } = animationDefinitions[i];
const animation = new motionDom.NativeAnimation(animationOptions);
map.set(key, animation);
animation.finished.finally(() => map.delete(key));
animations.push(animation);
}
return animations;
}
const createScopedWaapiAnimate = (scope) => {
function scopedAnimate(elementOrSelector, keyframes, options) {
return new motionDom.GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
}
return scopedAnimate;
};
const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
/**
* A time in milliseconds, beyond which we consider the scroll velocity to be 0.
*/
const maxElapsed = 50;
const createAxisInfo = () => ({
current: 0,
offset: [],
progress: 0,
scrollLength: 0,
targetOffset: 0,
targetLength: 0,
containerLength: 0,
velocity: 0,
});
const createScrollInfo = () => ({
time: 0,
x: createAxisInfo(),
y: createAxisInfo(),
});
/**
* Also iterated with for...in as the list of axes.
*/
const axisKeys = {
x: {
length: "Width",
position: "Left",
},
y: {
length: "Height",
position: "Top",
},
};
const styles = new WeakMap();
/**
* Whether an axis scrolls from its end, which browsers report as a scroll
* position running from 0 to -scrollLength (#3340). This is read from style
* rather than the sign of the scroll position, as elastic overscroll pushes
* the position past 0 in either kind of axis (#3791).
*/
function isReversed(element, axisName) {
/**
* The viewport takes its writing mode and direction from <body>, which
* not every browser reflects in the root element's computed style. It
* doesn't adopt the root element's flex layout.
*/
const isRoot = element === document.scrollingElement;
const source = (isRoot && document.body) || element;
let style = styles.get(source);
if (!style)
styles.set(source, (style = getComputedStyle(source)));
const { writingMode, flexDirection } = style;
const isInline = (axisName === "x") !== /^[vs]/.test(writingMode);
return ((isInline
? (style.direction === "rtl") !== (writingMode === "sideways-lr")
: writingMode.endsWith("rl")) !==
/**
* A reversed flex axis flips this. The main axis is the inline axis
* unless flex-direction is a column.
*/
(!isRoot &&
style.display.includes("flex") &&
(isInline !== (flexDirection[0] === "c")
? flexDirection
: style.flexWrap).endsWith("reverse")));
}
function updateAxisInfo(element, axisName, info, time) {
const axis = info[axisName];
const { length, position } = axisKeys[axisName];
const prev = axis.current;
const prevTime = info.time;
const scrollPosition = element[`scroll${position}`];
axis.current = isReversed(element, axisName)
? -scrollPosition || 0 // Avoid -0
: scrollPosition;
axis.containerLength = element[`client${length}`];
axis.targetLength = element[`scroll${length}`];
axis.scrollLength = axis.targetLength - axis.containerLength;
axis.offset.length = 0;
axis.offset[0] = 0;
axis.offset[1] = axis.scrollLength;
axis.progress = motionUtils.clamp(0, 1, motionUtils.progress(0, axis.scrollLength, axis.current));
const elapsed = time - prevTime;
axis.velocity =
elapsed > maxElapsed
? 0
: motionUtils.velocityPerSecond(axis.current - prev, elapsed);
}
/**
* Measures a scroll container. Runs once per container per frame; every
* handler on that container derives its info from the result.
*/
function updateScrollInfo(element, info, time) {
for (const axis in axisKeys) {
updateAxisInfo(element, axis, info, time);
}
info.time = time;
}
const namedEdges = {
start: 0,
center: 0.5,
end: 1,
};
function resolveEdge(edge, length, inset = 0) {
let delta = 0;
/**
* If we have this edge defined as a preset, replace the definition
* with the numerical value.
*/
if (edge in namedEdges) {
edge = namedEdges[edge];
}
/**
* Handle unit values
*/
if (typeof edge === "string") {
const asNumber = parseFloat(edge);
if (edge.endsWith("px")) {
delta = asNumber;
}
else if (edge.endsWith("%")) {
edge = asNumber / 100;
}
else if (edge.endsWith("vw")) {
delta = (asNumber / 100) * document.documentElement.clientWidth;
}
else if (edge.endsWith("vh")) {
delta = (asNumber / 100) * document.documentElement.clientHeight;
}
else {
edge = asNumber;
}
}
/**
* If the edge is defined as a number, handle as a progress value.
*/
if (typeof edge === "number") {
delta = length * edge;
}
return inset + delta;
}
const defaultOffset = [0, 0];
function resolveOffset(offset, containerLength, targetLength, targetInset) {
let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset;
let targetPoint = 0;
let containerPoint = 0;
if (typeof offset === "number") {
/**
* If we're provided offset: [0, 0.5, 1] then each number x should become
* [x, x], so we default to the behaviour of mapping 0 => 0 of both target
* and container etc.
*/
offsetDefinition = [offset, offset];
}
else if (typeof offset === "string") {
offset = offset.trim();
if (offset.includes(" ")) {
offsetDefinition = offset.split(" ");
}
else {
/**
* If we're provided a definition like "100px" then we want to apply
* that only to the top of the target point, leaving the container at 0.
* Whereas a named offset like "end" should be applied to both.
*/
offsetDefinition = [offset, namedEdges[offset] ? offset : `0`];
}
}
targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset);
containerPoint = resolveEdge(offsetDefinition[1], containerLength);
return targetPoint - containerPoint;
}
const ScrollOffset = {
All: [
[0, 0],
[1, 1],
],
};
/**
* Resolved offsets map to evenly spaced progress values, so progress is
* derived from the segment index rather than building an interpolator.
*/
function offsetsToProgress(offsets, v) {
const n = offsets.length - 1;
if (n < 1)
return 0;
const reverse = offsets[0] > offsets[n];
const at = (i) => offsets[reverse ? n - i : i];
/**
* Matches interpolate(), which checks for a zero-length first range
* before reversing descending offsets.
*/
if (offsets[0] === offsets[1] && v < at(0))
return reverse ? 1 : 0;
let i = 0;
while (i < n - 1 && v >= at(i + 1))
i++;
const p = (i + motionUtils.progress(at(i), at(i + 1), v)) / n;
return reverse ? 1 - p : p;
}
/**
* Resolves offsets on both axes, as useScroll reports the target's progress
* on each (#2546). `axis` only picks which progress scroll() reports.
*/
function resolveOffsets(info, { offset: offsetDefinition = ScrollOffset.All }) {
for (const axis in axisKeys) {
const axisInfo = info[axis];
/**
* Reset the length of the resolved offset array rather than creating a new one.
*/
axisInfo.offset.length = 0;
/**
* Populate the offset array by resolving the user's offset definition into
* a list of pixel scroll offsets.
*/
for (let i = 0; i < offsetDefinition.length; i++) {
axisInfo.offset[i] = resolveOffset(offsetDefinition[i], axisInfo.containerLength, axisInfo.targetLength, axisInfo.targetOffset);
}
axisInfo.progress = motionUtils.clamp(0, 1, offsetsToProgress(axisInfo.offset, axisInfo.current));
}
}
function calcInset(element, container) {
const inset = { x: 0, y: 0 };
let current = element;
while (current && current !== container) {
if (motionDom.isHTMLElement(current)) {
inset.x += current.offsetLeft;
inset.y += current.offsetTop;
current = current.offsetParent;
}
else if (current.tagName === "svg") {
/**
* This isn't an ideal approach to measuring the offset of <svg /> tags.
* It would be preferable, given they behave like HTMLElements in most ways
* to use offsetLeft/Top. But these don't exist on <svg />. Likewise we
* can't use .getBBox() like most SVG elements as these provide the offset
* relative to the SVG itself, which for <svg /> is usually 0x0.
*/
const svgBoundingBox = current.getBoundingClientRect();
current = current.parentElement;
const parentBoundingBox = current.getBoundingClientRect();
inset.x += svgBoundingBox.left - parentBoundingBox.left;
inset.y += svgBoundingBox.top - parentBoundingBox.top;
}
else if (current instanceof SVGGraphicsElement) {
const { x, y } = current.getBBox();
inset.x += x;
inset.y += y;
let svg = null;
let parent = current.parentNode;
while (!svg) {
if (parent.tagName === "svg") {
svg = parent;
}
parent = current.parentNode;
}
current = svg;
}
else {
break;
}
}
return inset;
}
function getTargetSize(target) {
return "getBBox" in target && target.tagName !== "svg"
? target.getBBox()
: { width: target.clientWidth, height: target.clientHeight };
}
function createOnScrollHandler(container, onScroll, info, options = {}) {
const { target } = options;
/**
* In development mode ensure scroll containers aren't position: static as this makes
* it difficult to measure their relative positions. The document scrolling element
* is exempt: offsetParent measurements naturally resolve relative to the document.
*/
if (process.env.NODE_ENV !== "production") {
if (target &&
target !== container &&
container !== document.documentElement &&
container !== document.scrollingElement &&
container !== document.body) {
motionUtils.warnOnce(getComputedStyle(container).position !== "static", "Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly.");
}
}
/**
* Handlers without a target or offset are notified with the container's
* shared info object, so they measure nothing themselves.
*/
const needsOwnInfo = target || options.offset;
return {
measure: (containerInfo) => {
if (!needsOwnInfo)
return;
info.time = containerInfo.time;
for (const key in axisKeys) {
const axis = key;
const { offset } = info[axis];
Object.assign(info[axis], containerInfo[axis]);
info[axis].offset = offset;
}
if (target && target !== container) {
const inset = calcInset(target, container);
const size = getTargetSize(target);
info.x.targetOffset = inset.x;
info.y.targetOffset = inset.y;
info.x.targetLength = size.width;
info.y.targetLength = size.height;
}
resolveOffsets(info, options);
},
notify: (containerInfo) => onScroll(needsOwnInfo ? info : containerInfo),
};
}
const scrollListeners = new WeakMap();
const resizeListeners = new WeakMap();
const onScrollHandlers = new WeakMap();
const dimensionCheckProcesses = new WeakMap();
const getEventTarget = (element) => element === document.scrollingElement ? window : element;
function scrollInfo(onScroll, { container = document.scrollingElement, trackContentSize = false, ...options } = {}) {
if (!container)
return motionUtils.noop;
let containerHandlers = onScrollHandlers.get(container);
/**
* Get the onScroll handlers for this container.
* If one isn't found, create a new one.
*/
if (!containerHandlers) {
containerHandlers = new Set();
onScrollHandlers.set(container, containerHandlers);
}
/**
* Create a new onScroll handler for the provided callback.
*/
const info = createScrollInfo();
const containerHandler = createOnScrollHandler(container, onScroll, info, options);
containerHandlers.add(containerHandler);
/**
* Check if there's a scroll event listener for this container.
* If not, create one.
*/
if (!scrollListeners.has(container)) {
const containerInfo = createScrollInfo();
const measureAll = () => {
updateScrollInfo(container, containerInfo, motionDom.frameData.timestamp);
for (const handler of containerHandlers) {
handler.measure(containerInfo);
}
motionDom.frame.preUpdate(notifyAll);
};
const notifyAll = () => {
for (const handler of containerHandlers) {
handler.notify(containerInfo);
}
};
const listener = () => motionDom.frame.read(measureAll);
scrollListeners.set(container, listener);
const target = getEventTarget(container);
window.addEventListener("resize", listener);
if (container !== document.documentElement) {
resizeListeners.set(container, motionDom.resize(container, listener));
}
target.addEventListener("scroll", listener);
listener();
}
/**
* Enable content size tracking if requested and not already enabled.
*/
if (trackContentSize && !dimensionCheckProcesses.has(container)) {
const listener = scrollListeners.get(container);
// Store initial scroll dimensions (object is reused to avoid allocation)
const size = {
width: container.scrollWidth,
height: container.scrollHeight,
};
// Add frame-based scroll dimension checking to detect content changes
const checkScrollDimensions = () => {
const newWidth = container.scrollWidth;
const newHeight = container.scrollHeight;
if (size.width !== newWidth || size.height !== newHeight) {
listener();
size.width = newWidth;
size.height = newHeight;
}
};
// Schedule with keepAlive=true to run every frame
const dimensionCheckProcess = motionDom.frame.read(checkScrollDimensions, true);
dimensionCheckProcesses.set(container, dimensionCheckProcess);
}
const listener = scrollListeners.get(container);
motionDom.frame.read(listener, false, true);
return () => {
motionDom.cancelFrame(listener);
/**
* Check if we even have any handlers for this container.
*/
const currentHandlers = onScrollHandlers.get(container);
if (!currentHandlers)
return;
currentHandlers.delete(containerHandler);
if (currentHandlers.size)
return;
/**
* If no more handlers, remove the scroll listener too. The handler
* set goes with it, as a measure still queued from this listener
* would otherwise notify handlers added by a later scrollInfo call.
*/
onScrollHandlers.delete(container);
const scrollListener = scrollListeners.get(container);
scrollListeners.delete(container);
if (scrollListener) {
getEventTarget(container).removeEventListener("scroll", scrollListener);
resizeListeners.get(container)?.();
window.removeEventListener("resize", scrollListener);
}
// Clean up scroll dimension checking
const dimensionCheckProcess = dimensionCheckProcesses.get(container);
if (dimensionCheckProcess) {
motionDom.cancelFrame(dimensionCheckProcess);
dimensionCheckProcesses.delete(container);
}
};
}
function canUseNativeTimeline(target) {
if (typeof window === "undefined")
return false;
return target ? motionDom.supportsViewTimeline() : motionDom.supportsScrollTimeline();
}
const timelineCache = new Map();
/**
* Native timelines are only attached to WAAPI animations. Offsets are
* applied to each animation as a range, so a timeline is shared by every
* offset.
*/
function getTimeline({ container, target, axis, }) {
let containerCache = timelineCache.get(container);
if (!containerCache) {
containerCache = new Map();
timelineCache.set(container, containerCache);
}
const targetKey = target ?? "self";
let targetCache = containerCache.get(targetKey);
if (!targetCache) {
targetCache = {};
containerCache.set(targetKey, targetCache);
}
return (targetCache[axis] || (targetCache[axis] = target
? new ViewTimeline({ subject: target, axis })
: new ScrollTimeline({ source: container, axis })));
}
/**
* Resolved offsets are linear in the target and container lengths, so
* probing them gives [target progress, container progress, pixels].
* vw/vh can resolve to 0px, so they're rejected up front.
*/
const toIntersection = (o) => {
if (/v/u.test(o))
return [];
const px = resolveOffset(o, 0, 0, 0);
return [resolveOffset(o, 0, 1, 0) - px, px - resolveOffset(o, 1, 0, 0), px];
};
const toRange = ([t, c, px]) => !px &&
(c === 0 || c === 1) &&
`${c ? "entry" : "exit"}-crossing ${t * 100}%`;
/**
* Maps an offset to an equivalent ViewTimeline range. Returns undefined when
* there isn't one, which signals the caller to fall back to JS-based scroll
* tracking.
*/
function offsetToViewTimelineRange(offset = ScrollOffset.All) {
if (offset.length !== 2)
return;
const [start, end] = offset.map(toIntersection);
const points = [toRange(start), toRange(end)];
const a = end[0] - start[0];
const b = start[1] - end[1];
if (points[0] && points[1] && (a || b)) {
return {
points: points,
a,
b,
cover: !start[0] && a === 1 && b === 1,
};
}
}
function attachToAnimation(animation, options) {
const { target, container, axis } = options;
const range = target && offsetToViewTimelineRange(options.offset);
/**
* Use native timeline when:
* - No target and no offset: ScrollTimeline
* - Target with mappable offset: ViewTimeline with named range
* - Otherwise: fall back to JS observe. A ScrollTimeline has no offset,
* so page offsets are applied by the JS timeline.
*/
const native = canUseNativeTimeline(target) && (target ? !!range : !options.offset);
const animations = new Map();
const observed = new Set();
let stopObserving;
let reverse = false;
/**
* When an offset's second point comes first, its range is swapped and
* the animation played backwards. The range is set after the direction,
* as that's what realigns a running animation with its timeline. Chrome
* skips that realignment when the range changes in the frame the
* animation starts, leaving it offset for good, so it's replayed too.
*/
const apply = (direction, waapi) => {
const [start, end] = range.points;
waapi.effect.updateTiming({
direction: reverse
? direction === "normal"
? "reverse"
: "alternate-reverse"
: direction,
});
Object.assign(waapi, {
rangeStart: reverse ? end : start,
rangeEnd: reverse ? start : end,
});
waapi.play();
};
const stops = [
animation.attachTimeline({
/**
* Read only by WAAPI animations, so values driven from JS don't
* create a native timeline they won't use.
*/
get timeline() {
return native ? getTimeline(options) : undefined;
},
onAttach: range &&
((waapi) => {
const direction = waapi.effect.getTiming().direction;
animations.set(waapi, direction);
apply(direction, waapi);
}),
/**
* Values driven from JS all track the offset with scrollInfo,
* which measures once per frame for all of them.
*/
observe: (valueAnimation) => {
valueAnimation.pause();
observed.add(valueAnimation);
stopObserving || (stopObserving = scrollInfo((info) => {
observed.forEach((observedAnimation) => {
observedAnimation.time =
observedAnimation.iterationDuration *
info[axis].progress;
});
}, options));
return () => observed.delete(valueAnimation);
},
}),
];
if (native && range) {
const { a, b } = range;
const length = axis === "y" ? "clientHeight" : "clientWidth";
/**
* Offsets like All only run forwards when the target is longer than
* the container, so their direction is remeasured on resize.
*/
const update = () => {
if (reverse !==
(reverse = a * target[length] + b * container[length] < 0)) {
animations.forEach(apply);
}
};
update();
if (a * b < 0) {
stops.push(motionDom.resize(update), motionDom.resize([target, container], update));
}
}
return () => {
stops.forEach((stop) => stop());
stopObserving?.();
};
}
function scroll(onScroll, { axis = "y", source, container = document.scrollingElement, ...options } = {}) {
if (!container)
return motionUtils.noop;
const optionsWithDefaults = {
axis,
container: source || container,
...options,
};
if (typeof onScroll === "function") {
const callback = motionDom.bindToScope(onScroll);
return motionDom.addToScope(scrollInfo((info) => callback(info[axis].progress, info), optionsWithDefaults));
}
return motionDom.addToScope(attachToAnimation(onScroll, optionsWithDefaults));
}
const thresholds = {
some: 0,
all: 1,
};
function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
const elements = motionDom.resolveElements(elementOrSelector);
onStart = motionDom.bindToScope(onStart);
const activeIntersections = new WeakMap();
const onIntersectionChange = (entries) => {
entries.forEach((entry) => {
const onEnd = activeIntersections.get(entry.target);
/**
* If there's no change to the intersection, we don't need to
* do anything here.
*/
if (entry.isIntersecting === Boolean(onEnd))
return;
if (entry.isIntersecting) {
const newOnEnd = onStart(entry.target, entry);
if (typeof newOnEnd === "function") {
activeIntersections.set(entry.target, newOnEnd);
}
else {
observer.unobserve(entry.target);
}
}
else if (typeof onEnd === "function") {
onEnd(entry);
activeIntersections.delete(entry.target);
}
});
};
const observer = new IntersectionObserver(onIntersectionChange, {
root,
rootMargin,
threshold: typeof amount === "number" ? amount : thresholds[amount],
});
elements.forEach((element) => observer.observe(element));
return motionDom.addToScope(() => observer.disconnect());
}
function useUnmountEffect(callback) {
return React.useEffect(() => () => callback(), []);
}
/**
* @public
*/
const domAnimation = /* @__PURE__ */ Object.assign({ renderer: featureBundle.createDomVisualElement }, featureBundle.animations, featureBundle.gestureAnimations);
/**
* @public
*/
const domMax = /* @__PURE__ */ Object.assign({}, domAnimation, featureBundle.drag, featureBundle.layout);
/**
* @public
*/
const domMin = {
renderer: featureBundle.createDomVisualElement,
...featureBundle.animations,
};
function useMotionValueEvent(value, event, callback) {
/**
* useInsertionEffect will create subscriptions before any other
* effects will run. Effects run upwards through the tree so it
* can be that binding a useLayoutEffect higher up the tree can
* miss changes from lower down the tree.
*/
React.useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
}
const createScrollMotionValues = () => ({
scrollX: motionDom.motionValue(0),
scrollY: motionDom.motionValue(0),
scrollXProgress: motionDom.motionValue(0),
scrollYProgress: motionDom.motionValue(0),
/**
* The maximum scroll offset of each axis, so the distance from the end
* of the container is `scrollYLength.get() - scrollY.get()`.
*/
scrollXLength: motionDom.motionValue(0),
scrollYLength: motionDom.motionValue(0),
});
const isRefPending = (ref) => {
if (!ref)
return false;
return !ref.current;
};
function makeAccelerateConfig(axis, options, container, target) {
return {
// Refs attach child-first; defer so target.current is populated
// before scroll() reads it.
factory: (animation) => {
let cleanup;
const start = () => {
// A provided ref may be hydrated by an effect declared after
// useScroll (or in a parent). Don't attach to the window
// scroll in the meantime — that result gets cached and would
// permanently mistrack. Wait until the ref resolves.
if (isRefPending(container) || isRefPending(target)) {
motionDom.microtask.read(start);
return;
}
cleanup = scroll(animation, {
...options,
axis,
container: container?.current || undefined,
target: target?.current || undefined,
});
};
motionDom.microtask.read(start);
return () => {
motionDom.cancelMicrotask(start);
cleanup?.();
};
},
times: [0, 1],
keyframes: [0, 1],
ease: (v) => v,
duration: 1,
};
}
function canAccelerateScroll(target, offset) {
if (typeof window === "undefined")
return false;
return target
? motionDom.supportsViewTimeline() && !!offsetToViewTimelineRange(offset)
: motionDom.supportsScrollTimeline() && !offset;
}
function useScroll({ container, target, ...options } = {}) {
const values = index.useConstant(createScrollMotionValues);
if (canAccelerateScroll(target, options.offset)) {
values.scrollXProgress.accelerate = makeAccelerateConfig("x", options, container, target);
values.scrollYProgress.accelerate = makeAccelerateConfig("y", options, container, target);
}
const scrollAnimation = React.useRef(null);
const needsStart = React.useRef(false);
const start = React.useCallback(() => {
scrollAnimation.current = scroll((_progress, { x, y, }) => {
values.scrollX.set(x.current);
values.scrollXProgress.set(x.progress);
values.scrollXLength.set(x.scrollLength);
values.scrollY.set(y.current);
values.scrollYProgress.set(y.progress);
values.scrollYLength.set(y.scrollLength);
}, {
...options,
container: container?.current || undefined,
target: target?.current || undefined,
});
return () => {
scrollAnimation.current?.();
};
}, [container, target, JSON.stringify(options.offset)]);
index.useIsomorphicLayoutEffect(() => {
needsStart.current = false;
if (isRefPending(container) || isRefPending(target)) {
needsStart.current = true;
return;
}
else {
return start();
}
}, [start]);
React.useEffect(() => {
if (!needsStart.current)
return;
// Defer to a microtask so any sibling/parent effect that hydrates the
// ref has a chance to run first.
let cleanup;
const tryStart = () => {
const containerPending = isRefPending(container);
const targetPending = isRefPending(target);
process.env.NODE_ENV !== "production" &&
motionUtils.invariant(!containerPending, "Container ref is defined but not hydrated", "use-scroll-ref");
process.env.NODE_ENV !== "production" &&
motionUtils.invariant(!targetPending, "Target ref is defined but not hydrated", "use-scroll-ref");
if (!containerPending && !targetPending)
cleanup = start();
};
motionDom.microtask.read(tryStart);
return () => {
motionDom.cancelMicrotask(tryStart);
cleanup?.();
};
}, [start]);
return values;
}
/**
* @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
*/
function useElementScroll(ref) {
if (process.env.NODE_ENV === "development") {
motionUtils.warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
}
return useScroll({ container: ref });
}
/**
* @deprecated useViewportScroll is deprecated. Convert to useScroll()
*/
function useViewportScroll() {
if (process.env.NODE_ENV !== "production") {
motionUtils.warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
}
return useScroll();
}
/**
* Combine multiple motion values into a new one using a string template literal.
*
* ```jsx
* import {
* motion,
* useSpring,
* useMotionValue,
* useMotionTemplate
* } from "framer-motion"
*
* function Component() {
* const shadowX = useSpring(0)
* const shadowY = useMotionValue(0)
* const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
*
* return <motion.div style={{ filter: shadow }} />
* }
* ```
*
* @public
*/
function useMotionTemplate(fragments, ...values) {
/**
* Create a function that will build a string from the latest motion values.
*/
const numFragments = fragments.length;
function buildValue() {
let output = ``;
for (let i = 0; i < numFragments; i++) {
output += fragments[i];
const value = values[i];
if (value) {
output += motionDom.isMotionValue(value) ? value.get() : value;
}
}
return output;
}
return proxy.useCombineMotionValues(values.filter(motionDom.isMotionValue), buildValue);
}
function useFollowValue(source, options = {}) {
return useFollow(source, options, motionDom.attachFollow);
}
function useFollow(source, options, attach) {
const { isStatic } = React.useContext(index.MotionConfigContext);
const getFromSource = () => (motionDom.isMotionValue(source) ? source.get() : source);
// isStatic will never change, allowing early hooks return
if (isStatic) {
return proxy.useComputed(getFromSource);
}
const value = proxy.useMotionValue(getFromSource());
React.useInsertionEffect(() => {
return attach(value, source, options);
}, [value, JSON.stringify(options)]);
return value;
}
function useSpring(source, options = {}) {
return useFollow(source, options, motionDom.attachSpring);
}
function useAnimationFrame(callback) {
const initialTimestamp = React.useRef(0);
const { isStatic } = React.useContext(index.MotionConfigContext);
React.useEffect(() => {
if (isStatic)
return;
const provideTimeSinceStart = ({ timestamp, delta }) => {
if (!initialTimestamp.current)
initialTimestamp.current = timestamp;
callback(timestamp - initialTimestamp.current, delta);
};
motionDom.frame.update(provideTimeSinceStart, true);
return () => motionDom.cancelFrame(provideTimeSinceStart);
}, [callback]);
}
function useTime() {
const time = proxy.useMotionValue(0);
useAnimationFrame((t) => time.set(t));
return time;
}
/**
* Creates a `MotionValue` that updates when the velocity of the provided `MotionValue` changes.
*
* ```javascript
* const x = useMotionValue(0)
* const xVelocity = useVelocity(x)
* const xAcceleration = useVelocity(xVelocity)
* ```
*
* @public
*/
function useVelocity(value) {
const velocity = proxy.useMotionValue(value.getVelocity());
const updateVelocity = () => {
const latest = value.getVelocity();
velocity.set(latest);
/**
* If we still have velocity, schedule an update for the next frame
* to keep checking until it is zero.
*/
if (latest)
motionDom.frame.update(updateVelocity);
};
useMotionValueEvent(value, "change", () => {
// Schedule an update to this value at the end of the current frame.
motionDom.frame.update(updateVelocity, false, true);
});
return velocity;
}
class WillChangeMotionValue extends motionDom.MotionValue {
constructor() {
super(...arguments);
this.isEnabled = false;
}
add(name) {
if (motionDom.transformProps.has(name) || motionDom.acceleratedValues.has(name)) {
this.isEnabled = true;
this.update();
}
}
update() {
this.set(this.isEnabled ? "transform" : "auto");
}
}
function useWillChange() {
return index.useConstant(() => new WillChangeMotionValue("auto"));
}
/**
* A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
*
* This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
* `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
*
* It will actively respond to changes and re-render your components with the latest setting.
*
* ```jsx
* export function Sidebar({ isOpen }) {
* const shouldReduceMotion = useReducedMotion()
* const closedX = shouldReduceMotion ? 0 : "-100%"
*
* return (
* <motion.div animate={{
* opacity: isOpen ? 1 : 0,
* x: isOpen ? 0 : closedX
* }} />
* )
* }
* ```
*
* @return boolean
*
* @public
*/
function useReducedMotion() {
/**
* Lazy initialisation of prefersReducedMotion
*/
!motionDom.hasReducedMotionListener.current && motionDom.initPrefersReducedMotion();
const [shouldReduceMotion] = React.useState(motionDom.prefersReducedMotion.current);
if (process.env.NODE_ENV !== "production") {
motionUtils.warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
}
/**
* TODO See if people miss automatically updating shouldReduceMotion setting
*/
return shouldReduceMotion;
}
function useReducedMotionConfig() {
const reducedMotionPreference = useReducedMotion();
const { reducedMotion } = React.useContext(index.MotionConfigContext);
if (reducedMotion === "never") {
return false;
}
else if (reducedMotion === "always") {
return true;
}
else {
return reducedMotionPreference;
}
}
function stopAnimation(visualElement) {
visualElement.values.forEach((value) => value.stop());
}
function setVariants(visualElement, variantLabels) {
const reversedLabels = [...variantLabels].reverse();
reversedLabels.forEach((key) => {
const variant = visualElement.getVariant(key);
variant && motionDom.setTarget(visualElement, variant);
if (visualElement.variantChildren) {
visualElement.variantChildren.forEach((child) => {
setVariants(child, variantLabels);
});
}
});
}
function setValues(visualElement, definition) {
if (Array.isArray(definition)) {
return setVariants(visualElement, definition);
}
else if (typeof definition === "string") {
return setVariants(visualElement, [definition]);
}
else {
motionDom.setTarget(visualElement, definition);
}
}
/**
* @public
*/
function animationControls() {
/**
* Track whether the host component has mounted.
*/
let hasMounted = false;
/**
* A collection of linked component animation controls.
*/
const subscribers = new Set();
const controls = {
subscribe(visualElement) {
subscribers.add(visualElement);
return () => void subscribers.delete(visualElement);
},
start(definition, transitionOverride) {
process.env.NODE_ENV !== "production" &&
motionUtils.invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
const animations = [];
subscribers.forEach((visualElement) => {
animations.push(motionDom.animateVisualElement(visualElement, definition, {
transitionOverride,
}));
});
return Promise.all(animations);
},
set(definition) {
process.env.NODE_ENV !== "production" &&
motionUtils.invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
return subscribers.forEach((visualElement) => {
setValues(visualElement, definition);
});
},
stop() {
subscribers.forEach((visualElement) => {
stopAnimation(visualElement);
});
},
mount() {
hasMounted = true;
return () => {
hasMounted = false;
controls.stop();
};
},
};
return controls;
}
function useAnimate() {
const scope = index.useConstant(() => ({
current: null, // Will be hydrated by React
animations: [],
}));
const reduceMotion = useReducedMotionConfig() ?? undefined;
const { skipAnimations } = React.useContext(index.MotionConfigContext);
/**
* Read by timelines created with this scope.
*/
scope.reduceMotion = reduceMotion;
scope.skipAnimations = skipAnimations;
const animate = React.useMemo(() => createScopedAnimate({ scope, reduceMotion, skipAnimations }), [scope, reduceMotion, skipAnimations]);
useUnmountEffect(() => {
scope.animations.forEach((animation) => animation.stop());
scope.animations.length = 0;
});
return [scope, animate];
}
/**
* Run `setup` in a `scopeMotion()` scope rooted at `ref`, so selectors
* resolve inside it. The scope is cancelled on unmount, or when `deps`
* change, which stops everything started in it and restores inline styles.
*
* ```jsx
* const ref = useRef(null)
* useScopeMotion(ref, () => {
* inView("li", (el) => animate(el, { opacity: 1 }))
* })
* return <ul ref={ref}>...</ul>
* ```
*
* Returns a ref to the current scope, for `run()` and `bind()` in event
* handlers.
*
* @public
*/
function useScopeMotion(ref, setup, { deps = [], ...options } = {}) {
const scope = React.useRef(null);
const latestSetup = React.useRef(setup);
latestSetup.current = setup;
index.useIsomorphicLayoutEffect(() => {
const current = (scope.current = motionDom.scopeMotion(ref?.current || undefined, (s) => latestSetup.current(s), options));
return () => {
current.cancel();
if (scope.current === current)
scope.current = null;
};
}, deps);
return scope;
}
function useAnimateMini() {
const scope = index.useConstant(() => ({
current: null, // Will be hydrated by React
animations: [],
}));
const animate = index.useConstant(() => createScopedWaapiAnimate(scope));
useUnmountEffect(() => {
scope.animations.forEach((animation) => animation.stop());
});
return [scope, animate];
}
/**
* Creates `LegacyAnimationControls`, which can be used to manually start, stop
* and sequence animations on one or more components.
*
* The returned `LegacyAnimationControls` should be passed to the `animate` property
* of the components you want to animate.
*
* These components can then be animated with the `start` method.
*
* ```jsx
* import * as React from 'react'
* import { motion, useAnimation } from 'framer-motion'
*
* export function MyComponent(props) {
* const controls = useAnimation()
*
* controls.start({
* x: 100,
* transition: { duration: 0.5 },
* })
*
* return <motion.div animate={controls} />
* }
* ```
*
* @returns Animation controller with `start` and `stop` methods
*
* @public
*/
function useAnimationControls() {
const controls = index.useConstant(animationControls);
index.useIsomorphicLayoutEffect(controls.mount, []);
return controls;
}
const useAnimation = useAnimationControls;
function usePresenceData() {
const context = React.useContext(index.PresenceContext);
return context ? context.custom : undefined;
}
/**
* Attaches an event listener directly to the provided DOM element.
*
* Bypassing React's event system can be desirable, for instance when attaching non-passive
* event handlers.
*
* ```jsx
* const ref = useRef(null)
*
* useDomEvent(ref, 'wheel', onWheel, { passive: false })
*
* return <div ref={ref} />
* ```
*
* @param ref - React.RefObject that's been provided to the element you want to bind the listener to.
* @param eventName - Name of the event you want listen for.
* @param handler - Function to fire when receiving the event.
* @param options - Options to pass to `Event.addEventListener`.
*
* @public
*/
function useDomEvent(ref, eventName, handler, options) {
React.useEffect(() => {
const element = ref.current;
if (handler && element) {
return motionDom.addDomEvent(element, eventName, handler, options);
}
}, [ref, eventName, handler, options]);
}
/**
* Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
*
* ```jsx
* const dragControls = useDragControls()
*
* function startDrag(event) {
* dragControls.start(event, { snapToCursor: true })
* }
*
* return (
* <>
* <div onPointerDown={startDrag} />
* <motion.div drag="x" dragControls={dragControls} />
* </>
* )
* ```
*
* @public
*/
class DragControls {
constructor() {
this.componentControls = new Set();
}
/**
* Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
*
* @internal
*/
subscribe(controls) {
this.componentControls.add(controls);
return () => this.componentControls.delete(controls);
}
/**
* Start a drag gesture on every `motion` component that has this set of drag controls
* passed into it via the `dragControls` prop.
*
* ```jsx
* dragControls.start(e, {
* snapToCursor: true
* })
* ```
*
* @param event - PointerEvent
* @param options - Options
*
* @public
*/
start(event, options) {
this.componentControls.forEach((controls) => {
controls.start(event.nativeEvent || event, options);
});
}
/**
* Cancels a drag gesture.
*
* ```jsx
* dragControls.cancel()
* ```
*
* @public
*/
cancel() {
this.componentControls.forEach((controls) => {
controls.cancel();
});
}
/**
* Stops a drag gesture.
*
* ```jsx
* dragControls.stop()
* ```
*
* @public
*/
stop() {
this.componentControls.forEach((controls) => {
controls.stop();
});
}
}
const createDragControls = () => new DragControls();
/**
* Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
* and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
* might want to initiate that dragging from a different component than the draggable one.
*
* By creating a `dragControls` using the `useDragControls` hook, we can pass this into
* the draggable component's `dragControls` prop. It exposes a `start` method
* that can start dragging from pointer events on other components.
*
* ```jsx
* const dragControls = useDragControls()
*
* function startDrag(event) {
* dragControls.start(event, { snapToCursor: true })
* }
*
* return (
* <>
* <div onPointerDown={startDrag} />
* <motion.div drag="x" dragControls={dragControls} />
* </>
* )
* ```
*
* @public
*/
function useDragControls() {
return index.useConstant(createDragControls);
}
/**
* Checks if a component is a `motion` component.
*/
function isMotionComponent(component) {
return (component !== null &&
typeof component === "object" &&
index.motionComponentSymbol in component);
}
/**
* Unwraps a `motion` component and returns either a string for `motion.div` or
* the React component for `motion(Component)`.
*
* If the component is not a `motion` component it returns undefined.
*/
function unwrapMotionComponent(component) {
if (isMotionComponent(component)) {
return component[index.motionComponentSymbol];
}
return undefined;
}
function useInstantLayoutTransition() {
return startTransition;
}
function startTransition(callback) {
if (!motionDom.rootProjectionNode.current)
return;
motionDom.rootProjectionNode.current.isUpdating = false;
motionDom.rootProjectionNode.current.blockUpdate();
callback && callback();
}
function useResetProjection() {
const reset = React.useCallback(() => {
const root = motionDom.rootProjectionNode.current;
if (!root)
return;
root.resetTree();
}, []);
return reset;
}
/**
* Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
*
* An index value can be passed to the returned `cycle` function to cycle to a specific index.
*
* ```jsx
* import * as React from "react"
* import { motion, useCycle } from "framer-motion"
*
* export const MyComponent = () => {
* const [x, cycleX] = useCycle(0, 50, 100)
*
* return (
* <motion.div
* animate={{ x: x }}
* onTap={() => cycleX()}
* />
* )
* }
* ```
*
* @param items - items to cycle through
* @returns [currentState, cycleState]
*
* @public
*/
function useCycle(...items) {
const index = React.useRef(0);
const [item, setItem] = React.useState(items[index.current]);
const runCycle = React.useCallback((next) => {
index.current =
typeof next !== "number"
? motionUtils.wrap(0, items.length, index.current + 1)
: next;
setItem(items[index.current]);
},
// The array will change on each call, but by putting items.length at
// the front of this array, we guarantee the dependency comparison will match up
// eslint-disable-next-line react-hooks/exhaustive-deps
[items.length, ...items]);
return [item, runCycle];
}
function useInView(ref, { root, margin, amount, once = false, initial = false, } = {}) {
const [isInView, setInView] = React.useState(initial);
/**
* Holds the element the observer was last set up with. Replacing the
* object (rather than using a ref) re-runs the observer effect.
*/
const [observed, observe] = React.useState({});
React.useEffect(() => {
const element = (observed.current = ref.current);
if (!element || (once && isInView))
return;
const onEnter = () => {
setInView(true);
return once ? undefined : () => setInView(false);
};
const options = {
root: (root && root.current) || undefined,
margin,
amount,
};
return inView(element, onEnter, options);
}, [root, ref, margin, once, amount, observed]);
/**
* The ref object never changes, so if the element is attached, swapped
* or removed after mount (e.g. conditional rendering) the effect above
* won't re-run by itself. Check after every commit and re-observe,
* resetting to false as the new element (if any) hasn't been seen yet.
*/
React.useEffect(() => {
if (ref.current !== observed.current) {
once || setInView(false);
observe({});
}
});
return isInView;
}
function useInstantTransition() {
const [forceUpdate, forcedRenderCount] = useForceUpdate();
const startInstantLayoutTransition = useInstantLayoutTransition();
const unlockOnFrameRef = React.useRef(-1);
React.useEffect(() => {
/**
* Unblock after two animation frames, otherwise this will unblock too soon.
*/
motionDom.frame.postRender(() => motionDom.frame.postRender(() => {
/**
* If the callback has been called again after the effect
* triggered this 2 frame delay, don't unblock animations. This
* prevents the previous effect from unblocking the current
* instant transition too soon. This becomes more likely when
* used in conjunction with React.startTransition().
*/
if (forcedRenderCount !== unlockOnFrameRef.current)
return;
motionUtils.MotionGlobalConfig.instantAnimations = false;
}));
}, [forcedRenderCount]);
return (callback) => {
startInstantLayoutTransition(() => {
motionUtils.MotionGlobalConfig.instantAnimations = true;
forceUpdate();
callback();
unlockOnFrameRef.current = forcedRenderCount + 1;
});
};
}
function disableInstantTransitions() {
motionUtils.MotionGlobalConfig.instantAnimations = false;
}
function usePageInView() {
const [isInView, setIsInView] = React.useState(true);
React.useEffect(() => {
const handleVisibilityChange = () => setIsInView(!document.hidden);
if (document.hidden) {
handleVisibilityChange();
}
document.addEventListener("visibilitychange", handleVisibilityChange);
return () => {
document.removeEventListener("visibilitychange", handleVisibilityChange);
};
}, []);
return isInView;
}
/**
* Creates a `transformPagePoint` function that accounts for SVG viewBox scaling.
*
* When dragging SVG elements inside an SVG with a viewBox that differs from
* the rendered dimensions (e.g., `viewBox="0 0 100 100"` but rendered at 500x500 pixels),
* pointer coordinates need to be transformed to match the SVG's coordinate system.
*
* @example
* ```jsx
* function App() {
* const svgRef = useRef<SVGSVGElement>(null)
*
* return (
* <MotionConfig transformPagePoint={transformViewBoxPoint(svgRef)}>
* <svg ref={svgRef} viewBox="0 0 100 100" width={500} height={500}>
* <motion.rect drag width={10} height={10} />
* </svg>
* </MotionConfig>
* )
* }
* ```
*
* @param svgRef - A React ref to the SVG element
* @returns A transformPagePoint function for use with MotionConfig
*
* @public
*/
function transformViewBoxPoint(svgRef) {
return (point) => {
const svg = svgRef.current;
if (!svg) {
return point;
}
// Get the viewBox attribute
const viewBox = svg.viewBox?.baseVal;
if (!viewBox || (viewBox.width === 0 && viewBox.height === 0)) {
// No viewBox or empty viewBox - no transformation needed
return point;
}
// Get the rendered dimensions of the SVG
const bbox = svg.getBoundingClientRect();
if (bbox.width === 0 || bbox.height === 0) {
return point;
}
// Calculate scale factors
const scaleX = viewBox.width / bbox.width;
const scaleY = viewBox.height / bbox.height;
// Get the SVG's position on the page
const svgX = bbox.left + window.scrollX;
const svgY = bbox.top + window.scrollY;
// Transform the point:
// 1. Calculate position relative to SVG
// 2. Scale by viewBox/viewport ratio
// 3. Add back the SVG position (but in SVG coordinates)
return {
x: (point.x - svgX) * scaleX + svgX,
y: (point.y - svgY) * scaleY + svgY,
};
};
}
/**
* Creates a `transformPagePoint` function that corrects pointer coordinates
* for a parent container with CSS transforms (rotation, scale, skew).
*
* When dragging elements inside a transformed parent, pointer coordinates
* need to be transformed through the inverse of the parent's transform
* so the drag offset is in local space.
*
* Works with both static and continuously animating transforms.
*
* @example
* ```jsx
* function App() {
* const ref = useRef(null)
*
* return (
* <motion.div ref={ref} style={{ rotate: 90 }}>
* <MotionConfig transformPagePoint={correctParentTransform(ref)}>
* <motion.div drag />
* </MotionConfig>
* </motion.div>
* )
* }
* ```
*
* @param parentRef - A React ref to the transformed parent element
* @returns A transformPagePoint function for use with MotionConfig
*
* @public
*/
function correctParentTransform(parentRef) {
return (point) => {
const parent = parentRef.current;
if (!parent)
return point;
const inv = getInverseMatrix(parent);
if (!inv)
return point;
// Get center of rotation in page space
const rect = parent.getBoundingClientRect();
const cx = rect.left + window.scrollX + rect.width / 2;
const cy = rect.top + window.scrollY + rect.height / 2;
// Transform (point - center) through inverse, then add center back
const dx = point.x - cx;
const dy = point.y - cy;
return {
x: cx + inv.a * dx + inv.c * dy,
y: cy + inv.b * dx + inv.d * dy,
};
};
}
function getInverseMatrix(element) {
const { transform } = getComputedStyle(element);
if (!transform || transform === "none")
return null;
const match = transform.match(/^matrix3d\((.*)\)$/u) ||
transform.match(/^matrix\((.*)\)$/u);
if (!match)
return null;
const v = match[1].split(",").map(Number);
const is3d = transform.startsWith("matrix3d");
const a = v[0], b = v[1];
const c = is3d ? v[4] : v[2];
const d = is3d ? v[5] : v[3];
const det = a * d - b * c;
if (Math.abs(det) < 1e-10)
return null;
return { a: d / det, b: -b / det, c: -c / det, d: a / det };
}
const appearAnimationStore = new Map();
const appearComplete = new Map();
const appearStoreId = (elementId, valueName) => {
const key = motionDom.transformProps.has(valueName) ? "transform" : valueName;
return `${elementId}: ${key}`;
};
function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
const storeId = appearStoreId(elementId, valueName);
const optimisedAnimation = appearAnimationStore.get(storeId);
if (!optimisedAnimation) {
return null;
}
const { animation, startTime } = optimisedAnimation;
function cancelAnimation() {
window.MotionCancelOptimisedAnimation?.(elementId, valueName, frame);
}
/**
* We can cancel the animation once it's finished now that we've synced
* with Motion.
*
* Prefer onfinish over finished as onfinish is backwards compatible with
* older browsers.
*/
animation.onfinish = cancelAnimation;
if (startTime === null || window.MotionHandoffIsComplete?.(elementId)) {
/**
* If the startTime is null, this animation is the Paint Ready detection animation
* and we can cancel it immediately without handoff.
*
* Or if we've already handed off the animation then we're now interrupting it.
* In which case we need to cancel it.
*/
cancelAnimation();
return null;
}
else {
return startTime;
}
}
/**
* A single time to use across all animations to manually set startTime
* and ensure they're all in sync.
*/
let startFrameTime;
/**
* A dummy animation to detect when Chrome is ready to start
* painting the page and hold off from triggering the real animation
* until then. We only need one animation to detect paint ready.
*
* https://bugs.chromium.org/p/chromium/issues/detail?id=1406850
*/
let readyAnimation;
/**
* Keep track of animations that were suspended vs cancelled so we
* can easily resume them when we're done measuring layout.
*/
const suspendedAnimations = new Set();
function resumeSuspendedAnimations() {
suspendedAnimations.forEach((data) => {
data.animation.play();
data.animation.startTime = data.startTime;
});
suspendedAnimations.clear();
}
function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
// Prevent optimised appear animations if Motion has already started animating.
if (window.MotionIsMounted) {
return;
}
const id = element.dataset[motionDom.optimizedAppearDataId];
if (!id)
return;
window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
const storeId = appearStoreId(id, name);
if (!readyAnimation) {
readyAnimation = motionDom.startWaapiAnimation(element, name, [keyframes[0], keyframes[0]],
/**
* 10 secs is basically just a super-safe duration to give Chrome
* long enough to get the animation ready.
*/
{ duration: 10000, ease: "linear" });
appearAnimationStore.set(storeId, {
animation: readyAnimation,
startTime: null,
});
/**
* If there's no readyAnimation then there's been no instantiation
* of handoff animations.
*/
window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
window.MotionHasOptimisedAnimation = (elementId, valueName) => {
if (!elementId)
return false;
/**
* Keep a map of elementIds that have started animating. We check
* via ID instead of Element because of hydration errors and
* pre-hydration checks. We also actively record IDs as they start
* animating rather than simply checking for data-appear-id as
* this attribute might be present but not lead to an animation, for
* instance if the element's appear animation is on a different
* breakpoint.
*/
if (!valueName) {
return appearComplete.has(elementId);
}
const animationId = appearStoreId(elementId, valueName);
return Boolean(appearAnimationStore.get(animationId));
};
window.MotionHandoffMarkAsComplete = (elementId) => {
if (appearComplete.has(elementId)) {
appearComplete.set(elementId, true);
}
};
window.MotionHandoffIsComplete = (elementId) => {
return appearComplete.get(elementId) === true;
};
/**
* We only need to cancel transform animations as
* they're the ones that will interfere with the
* layout animation measurements.
*/
window.MotionCancelOptimisedAnimation = (elementId, valueName, frame, canResume) => {
const animationId = appearStoreId(elementId, valueName);
const data = appearAnimationStore.get(animationId);
if (!data)
return;
if (frame && canResume === undefined) {
/**
* Wait until the end of the subsequent frame to cancel the animation
* to ensure we don't remove the animation before the main thread has
* had a chance to resolve keyframes and render.
*/
frame.postRender(() => {
frame.postRender(() => {
data.animation.cancel();
});
});
}
else {
data.animation.cancel();
}
if (frame && canResume) {
suspendedAnimations.add(data);
frame.render(resumeSuspendedAnimations);
}
else {
appearAnimationStore.delete(animationId);
/**
* If there are no more animations left, we can remove the cancel function.
* This will let us know when we can stop checking for conflicting layout animations.
*/
if (!appearAnimationStore.size) {
window.MotionCancelOptimisedAnimation = undefined;
}
}
};
window.MotionCheckAppearSync = (visualElement, valueName, value) => {
const appearId = motionDom.getOptimisedAppearId(visualElement);
if (!appearId)
return;
const valueIsOptimised = window.MotionHasOptimisedAnimation?.(appearId, valueName);
const externalAnimationValue = visualElement.props.values?.[valueName];
if (!valueIsOptimised || !externalAnimationValue)
return;
const removeSyncCheck = value.on("change", (latestValue) => {
if (externalAnimationValue.get() !== latestValue) {
window.MotionCancelOptimisedAnimation?.(appearId, valueName);
removeSyncCheck();
}
});
return removeSyncCheck;
};
}
const startAnimation = () => {
readyAnimation.cancel();
const appearAnimation = motionDom.startWaapiAnimation(element, name, keyframes, options);
/**
* Record the time of the first started animation. We call performance.now() once
* here and once in handoff to ensure we're getting
* close to a frame-locked time. This keeps all animations in sync.
*/
if (startFrameTime === undefined) {
startFrameTime = performance.now();
}
appearAnimation.startTime = startFrameTime;
appearAnimationStore.set(storeId, {
animation: appearAnimation,
startTime: startFrameTime,
});
if (onReady)
onReady(appearAnimation);
};
appearComplete.set(id, false);
if (readyAnimation.ready) {
readyAnimation.ready.then(startAnimation).catch(motionUtils.noop);
}
else {
startAnimation();
}
}
const createObject = () => ({});
class StateVisualElement extends motionDom.VisualElement {
constructor() {
super(...arguments);
this.measureInstanceViewportBox = motionDom.createBox;
}
build() { }
resetTransform() { }
restoreTransform() { }
removeValueFromRenderState() { }
renderInstance() { }
scrapeMotionValuesFromProps() {
return createObject();
}
getBaseTargetFromProps() {
return undefined;
}
readValueFromInstance(_state, key, options) {
return options.initialState[key] || 0;
}
sortInstanceNodePosition() {
return 0;
}
}
const useVisualState = index.makeUseVisualState({
scrapeMotionValuesFromProps: createObject,
createRenderState: createObject,
});
/**
* This is not an officially supported API and may be removed
* on any version.
*/
function useAnimatedState(initialState) {
const [animationState, setAnimationState] = React.useState(initialState);
const visualState = useVisualState({}, false);
const element = index.useConstant(() => {
return new StateVisualElement({
props: {
onUpdate: (v) => {
setAnimationState({ ...v });
},
},
visualState,
presenceContext: null,
}, { initialState });
});
React.useLayoutEffect(() => {
element.mount({});
return () => element.unmount();
}, [element]);
const startAnimation = index.useConstant(() => (animationDefinition) => {
return motionDom.animateVisualElement(element, animationDefinition);
});
return [animationState, startAnimation];
}
let id = 0;
const AnimateSharedLayout = ({ children }) => {
React__namespace.useEffect(() => {
process.env.NODE_ENV !== "production" &&
motionUtils.invariant(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
}, []);
return (jsxRuntime.jsx(LayoutGroup, { id: index.useConstant(() => `asl-${id++}`), children: children }));
};
// Keep things reasonable and avoid scale: Infinity. In practice we might need
// to add another value, opacity, that could interpolate scaleX/Y [0,0.01] => [0,1]
// to simply hide content at unreasonable scales.
const maxScale = 100000;
const invertScale = (scale) => scale > 0.001 ? 1 / scale : maxScale;
let hasWarned = false;
/**
* Returns a `MotionValue` each for `scaleX` and `scaleY` that update with the inverse
* of their respective parent scales.
*
* This is useful for undoing the distortion of content when scaling a parent component.
*
* By default, `useInvertedScale` will automatically fetch `scaleX` and `scaleY` from the nearest parent.
* By passing other `MotionValue`s in as `useInvertedScale({ scaleX, scaleY })`, it will invert the output
* of those instead.
*
* ```jsx
* const MyComponent = () => {
* const { scaleX, scaleY } = useInvertedScale()
* return <motion.div style={{ scaleX, scaleY }} />
* }
* ```
*
* @deprecated
*/
function useInvertedScale(scale) {
let parentScaleX = proxy.useMotionValue(1);
let parentScaleY = proxy.useMotionValue(1);
const { visualElement } = React.useContext(index.MotionContext);
process.env.NODE_ENV !== "production" &&
motionUtils.invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
process.env.NODE_ENV !== "production" &&
motionUtils.warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
hasWarned = true;
if (scale) {
parentScaleX = scale.scaleX || parentScaleX;
parentScaleY = scale.scaleY || parentScaleY;
}
else if (visualElement) {
parentScaleX = visualElement.getValue("scaleX", 1);
parentScaleY = visualElement.getValue("scaleY", 1);
}
const scaleX = proxy.useTransform(parentScaleX, invertScale);
const scaleY = proxy.useTransform(parentScaleY, invertScale);
return { scaleX, scaleY };
}
exports.LayoutGroupContext = index.LayoutGroupContext;
exports.MotionConfigContext = index.MotionConfigContext;
exports.MotionContext = index.MotionContext;
exports.PresenceContext = index.PresenceContext;
exports.SwitchLayoutGroupContext = index.SwitchLayoutGroupContext;
exports.filterProps = index.filterProps;
exports.isBrowser = index.isBrowser;
exports.isValidMotionProp = index.isValidMotionProp;
exports.makeUseVisualState = index.makeUseVisualState;
exports.useIsomorphicLayoutEffect = index.useIsomorphicLayoutEffect;
Object.defineProperty(exports, "VisualElement", {
enumerable: true,
get: function () { return motionDom.VisualElement; }
});
Object.defineProperty(exports, "addScaleCorrector", {
enumerable: true,
get: function () { return motionDom.addScaleCorrector; }
});
Object.defineProperty(exports, "animateVisualElement", {
enumerable: true,
get: function () { return motionDom.animateVisualElement; }
});
Object.defineProperty(exports, "arc", {
enumerable: true,
get: function () { return motionDom.arc; }
});
Object.defineProperty(exports, "buildTransform", {
enumerable: true,
get: function () { return motionDom.buildTransform; }
});
Object.defineProperty(exports, "calcLength", {
enumerable: true,
get: function () { return motionDom.calcLength; }
});
Object.defineProperty(exports, "createBox", {
enumerable: true,
get: function () { return motionDom.createBox; }
});
Object.defineProperty(exports, "delay", {
enumerable: true,
get: function () { return motionDom.delay; }
});
Object.defineProperty(exports, "optimizedAppearDataAttribute", {
enumerable: true,
get: function () { return motionDom.optimizedAppearDataAttribute; }
});
Object.defineProperty(exports, "resolveMotionValue", {
enumerable: true,
get: function () { return motionDom.resolveMotionValue; }
});
Object.defineProperty(exports, "visualElementStore", {
enumerable: true,
get: function () { return motionDom.visualElementStore; }
});
exports.animations = featureBundle.animations;
exports.useIsPresent = featureBundle.useIsPresent;
exports.usePresence = featureBundle.usePresence;
exports.m = proxy.m;
exports.useMotionValue = proxy.useMotionValue;
exports.useTransform = proxy.useTransform;
Object.defineProperty(exports, "MotionGlobalConfig", {
enumerable: true,
get: function () { return motionUtils.MotionGlobalConfig; }
});
exports.AnimatePresence = AnimatePresence;
exports.AnimateSharedLayout = AnimateSharedLayout;
exports.DeprecatedLayoutGroupContext = DeprecatedLayoutGroupContext;
exports.DragControls = DragControls;
exports.LayoutGroup = LayoutGroup;
exports.LazyMotion = LazyMotion;
exports.MotionConfig = MotionConfig;
exports.PopChild = PopChild;
exports.PresenceChild = PresenceChild;
exports.Reorder = namespace;
exports.WillChangeMotionValue = WillChangeMotionValue;
exports.animate = animate;
exports.animateMini = animateMini;
exports.animationControls = animationControls;
exports.correctParentTransform = correctParentTransform;
exports.createScopedAnimate = createScopedAnimate;
exports.disableInstantTransitions = disableInstantTransitions;
exports.domAnimation = domAnimation;
exports.domMax = domMax;
exports.domMin = domMin;
exports.inView = inView;
exports.isMotionComponent = isMotionComponent;
exports.motion = motion;
exports.scroll = scroll;
exports.scrollInfo = scrollInfo;
exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
exports.transformViewBoxPoint = transformViewBoxPoint;
exports.unwrapMotionComponent = unwrapMotionComponent;
exports.useAnimate = useAnimate;
exports.useAnimateMini = useAnimateMini;
exports.useAnimation = useAnimation;
exports.useAnimationControls = useAnimationControls;
exports.useAnimationFrame = useAnimationFrame;
exports.useComposedRefs = useComposedRefs;
exports.useCycle = useCycle;
exports.useDeprecatedAnimatedState = useAnimatedState;
exports.useDeprecatedInvertedScale = useInvertedScale;
exports.useDomEvent = useDomEvent;
exports.useDragControls = useDragControls;
exports.useElementScroll = useElementScroll;
exports.useFollowValue = useFollowValue;
exports.useForceUpdate = useForceUpdate;
exports.useInView = useInView;
exports.useInstantLayoutTransition = useInstantLayoutTransition;
exports.useInstantTransition = useInstantTransition;
exports.useMotionTemplate = useMotionTemplate;
exports.useMotionValueEvent = useMotionValueEvent;
exports.usePageInView = usePageInView;
exports.usePresenceData = usePresenceData;
exports.useReducedMotion = useReducedMotion;
exports.useReducedMotionConfig = useReducedMotionConfig;
exports.useResetProjection = useResetProjection;
exports.useScopeMotion = useScopeMotion;
exports.useScroll = useScroll;
exports.useSpring = useSpring;
exports.useTime = useTime;
exports.useUnmountEffect = useUnmountEffect;
exports.useVelocity = useVelocity;
exports.useViewportScroll = useViewportScroll;
exports.useWillChange = useWillChange;
Object.keys(motionDom).forEach(function (k) {
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
enumerable: true,
get: function () { return motionDom[k]; }
});
});
Object.keys(motionUtils).forEach(function (k) {
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
enumerable: true,
get: function () { return motionUtils[k]; }
});
});
//# sourceMappingURL=index.js.map