framer-motion 10.4.0 → 10.5.0

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var wrap = require('./wrap-58c66ad3.js');
+var wrap = require('./wrap-bf172f81.js');
 
 
 
@@ -16,6 +16,7 @@ exports.circIn = wrap.circIn;
 exports.circInOut = wrap.circInOut;
 exports.circOut = wrap.circOut;
 exports.clamp = wrap.clamp;
+exports.createScopedAnimate = wrap.createScopedAnimate;
 exports.cubicBezier = wrap.cubicBezier;
 exports.delay = wrap.delay;
 exports.distance = wrap.distance;

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var wrap = require('./wrap-58c66ad3.js');
+var wrap = require('./wrap-bf172f81.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -5557,6 +5557,18 @@ function animationControls() {
     return controls;
 }
 
+function useAnimate() {
+    const scope = useConstant(() => ({
+        current: null,
+        animations: [],
+    }));
+    const animate = useConstant(() => wrap.createScopedAnimate(scope));
+    useUnmountEffect(() => {
+        scope.animations.forEach((animation) => animation.stop());
+    });
+    return [scope, animate];
+}
+
 /**
  * Creates `AnimationControls`, which can be used to manually start, stop
  * and sequence animations on one or more components.
@@ -6074,6 +6086,7 @@ exports.clamp = wrap.clamp;
 exports.color = wrap.color;
 exports.complex = wrap.complex;
 exports.createBox = wrap.createBox;
+exports.createScopedAnimate = wrap.createScopedAnimate;
 exports.cubicBezier = wrap.cubicBezier;
 exports.delay = wrap.delay;
 exports.distance = wrap.distance;
@@ -6139,6 +6152,7 @@ exports.motion = motion;
 exports.resolveMotionValue = resolveMotionValue;
 exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
 exports.unwrapMotionComponent = unwrapMotionComponent;
+exports.useAnimate = useAnimate;
 exports.useAnimation = useAnimation;
 exports.useAnimationControls = useAnimationControls;
 exports.useAnimationFrame = useAnimationFrame;

package/dist/cjs/{wrap-58c66ad3.js → wrap-bf172f81.js}

@@ -1930,12 +1930,18 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
                 startTime = animationDriver.now() - newTime;
             }
         },
+        get state() {
+            return playState;
+        },
         play,
         pause: () => {
             playState = "paused";
             holdTime = time;
         },
         stop: () => {
+            if (playState === "idle")
+                return;
+            playState = "idle";
             onStop && onStop();
             animationDriver && animationDriver.stop();
             animationDriver = undefined;
@@ -2068,6 +2074,8 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         play: () => animation.play(),
         pause: () => animation.pause(),
         stop: () => {
+            if (animation.playState === "idle")
+                return;
             /**
              * WAAPI doesn't natively have any interruption capabilities.
              *
@@ -2488,7 +2496,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "10.4.0";
+        this.version = "10.5.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3220,15 +3228,20 @@ function delay(callback, timeout) {
     return () => cancelSync.read(checkElapsed);
 }
 
-function resolveElements(elements, selectorCache) {
+function resolveElements(elements, scope, selectorCache) {
     var _a;
     if (typeof elements === "string") {
+        let root = document;
+        if (scope) {
+            exports.invariant(Boolean(scope.current), "Scope provided, but no element detected.");
+            root = scope.current;
+        }
         if (selectorCache) {
-            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = document.querySelectorAll(elements));
+            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = root.querySelectorAll(elements));
             elements = selectorCache[elements];
         }
         else {
-            elements = document.querySelectorAll(elements);
+            elements = root.querySelectorAll(elements);
         }
     }
     else if (elements instanceof Element) {
@@ -3628,7 +3641,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.4.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.4.0 may not work as expected.`);
+                warnOnce(nextValue.version === "10.5.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.5.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4304,8 +4317,8 @@ function animateSingleValue(value, keyframes, options) {
     return motionValue$1.animation;
 }
 
-function animateElements(elementOrSelector, keyframes, options) {
-    const elements = resolveElements(elementOrSelector);
+function animateElements(elementOrSelector, keyframes, options, scope) {
+    const elements = resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
     exports.invariant(Boolean(numElements), "No valid element provided.");
     const animations = [];
@@ -4328,14 +4341,23 @@ function animateElements(elementOrSelector, keyframes, options) {
     }
     return new GroupPlaybackControls(animations);
 }
-function animate(valueOrElement, keyframes, options = {}) {
-    if (isDOMKeyframes(keyframes)) {
-        return animateElements(valueOrElement, keyframes, options);
-    }
-    else {
-        return animateSingleValue(valueOrElement, keyframes, options);
+const createScopedAnimate = (scope) => {
+    function scopedAnimate(valueOrElement, keyframes, options = {}) {
+        let animation;
+        if (isDOMKeyframes(keyframes)) {
+            animation = animateElements(valueOrElement, keyframes, options, scope);
+        }
+        else {
+            animation = animateSingleValue(valueOrElement, keyframes, options);
+        }
+        if (scope) {
+            scope.animations.push(animation);
+        }
+        return animation;
     }
-}
+    return scopedAnimate;
+};
+const animate = createScopedAnimate();
 
 const resizeHandlers = new WeakMap();
 let observer;
@@ -4850,6 +4872,7 @@ exports.convertBoundingBoxToBox = convertBoundingBoxToBox;
 exports.convertBoxToBoundingBox = convertBoxToBoundingBox;
 exports.createBox = createBox;
 exports.createDelta = createDelta;
+exports.createScopedAnimate = createScopedAnimate;
 exports.cssVariableRegex = cssVariableRegex;
 exports.cubicBezier = cubicBezier;
 exports.delay = delay;

package/dist/dom-entry.d.ts

@@ -807,8 +807,12 @@ interface AnimationPlaybackLifecycles<V> {
     onRepeat?: () => void;
     onStop?: () => void;
 }
+interface AnimationScope<T = any> {
+    readonly current: T;
+    animations: AnimationPlaybackControls[];
+}
 declare type AnimateOptions<V = any> = Transition & AnimationPlaybackLifecycles<V>;
-declare type ElementOrSelector$1 = Element | Element[] | NodeListOf<Element> | string;
+declare type ElementOrSelector = Element | Element[] | NodeListOf<Element> | string;
 /**
  * @public
  */
@@ -1005,20 +1009,20 @@ declare class MotionValue<V = any> {
 }
 declare function motionValue<V>(init: V, options?: MotionValueOptions): MotionValue<V>;
 
-/**
- * Animate a single value
- */
-declare function animate(from: string, to: string | GenericKeyframesTarget<string>, options?: AnimateOptions<string>): AnimationPlaybackControls;
-declare function animate(from: number, to: number | GenericKeyframesTarget<number>, options?: AnimateOptions<number>): AnimationPlaybackControls;
-/**
- * Animate a MotionValue
- */
-declare function animate(value: MotionValue<string>, keyframes: string | GenericKeyframesTarget<string>, options?: AnimateOptions<string>): AnimationPlaybackControls;
-declare function animate(value: MotionValue<number>, keyframes: number | GenericKeyframesTarget<number>, options?: AnimateOptions<number>): AnimationPlaybackControls;
-/**
- * Animate DOM
- */
-declare function animate<V>(value: ElementOrSelector$1, keyframes: DOMKeyframesDefinition, options?: AnimateOptions<V>): AnimationPlaybackControls;
+declare const createScopedAnimate: (scope?: AnimationScope) => {
+    (from: string, to: string | GenericKeyframesTarget<string>, options?: AnimateOptions<string>): AnimationPlaybackControls;
+    (from: number, to: number | GenericKeyframesTarget<number>, options?: AnimateOptions<number>): AnimationPlaybackControls;
+    (value: MotionValue<string>, keyframes: string | GenericKeyframesTarget<string>, options?: AnimateOptions<string>): AnimationPlaybackControls;
+    (value: MotionValue<number>, keyframes: number | GenericKeyframesTarget<number>, options?: AnimateOptions<number>): AnimationPlaybackControls;
+    <V>(value: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: AnimateOptions<V> | undefined): AnimationPlaybackControls;
+};
+declare const animate: {
+    (from: string, to: string | GenericKeyframesTarget<string>, options?: AnimateOptions<string>): AnimationPlaybackControls;
+    (from: number, to: number | GenericKeyframesTarget<number>, options?: AnimateOptions<number>): AnimationPlaybackControls;
+    (value: MotionValue<string>, keyframes: string | GenericKeyframesTarget<string>, options?: AnimateOptions<string>): AnimationPlaybackControls;
+    (value: MotionValue<number>, keyframes: number | GenericKeyframesTarget<number>, options?: AnimateOptions<number>): AnimationPlaybackControls;
+    <V>(value: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: AnimateOptions<V> | undefined): AnimationPlaybackControls;
+};
 
 interface AxisScrollInfo {
     current: number;
@@ -1056,8 +1060,6 @@ interface ScrollOptions {
 
 declare function scroll(onScroll: OnScroll, { container, ...options }?: ScrollOptions): () => void;
 
-declare type ElementOrSelector = Element | Element[] | NodeListOf<Element> | string;
-
 declare type ViewChangeHandler = (entry: IntersectionObserverEntry) => void;
 interface InViewOptions {
     root?: Element | Document;
@@ -1234,4 +1236,4 @@ declare const frameData: {
     isProcessing: boolean;
 };
 
-export { DelayedFunction, DevMessage, InterpolateOptions, MixerFactory, MotionValue, PassiveEffect, Subscriber, animate, anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, clamp, cubicBezier, delay, distance, distance2D, easeIn, easeInOut, easeOut, frameData, inView, interpolate, invariant, mix, motionValue, pipe, progress, scroll, sync, transform, warning, wrap };
+export { DelayedFunction, DevMessage, InterpolateOptions, MixerFactory, MotionValue, PassiveEffect, Subscriber, animate, anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, clamp, createScopedAnimate, cubicBezier, delay, distance, distance2D, easeIn, easeInOut, easeOut, frameData, inView, interpolate, invariant, mix, motionValue, pipe, progress, scroll, sync, transform, warning, wrap };

package/dist/es/animation/animate.mjs

@@ -7,8 +7,8 @@ import { animateTarget } from './interfaces/visual-element-target.mjs';
 import { createVisualElement } from './utils/create-visual-element.mjs';
 import { animateSingleValue } from './interfaces/single-value.mjs';
 
-function animateElements(elementOrSelector, keyframes, options) {
-    const elements = resolveElements(elementOrSelector);
+function animateElements(elementOrSelector, keyframes, options, scope) {
+    const elements = resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
     invariant(Boolean(numElements), "No valid element provided.");
     const animations = [];
@@ -31,13 +31,22 @@ function animateElements(elementOrSelector, keyframes, options) {
     }
     return new GroupPlaybackControls(animations);
 }
-function animate(valueOrElement, keyframes, options = {}) {
-    if (isDOMKeyframes(keyframes)) {
-        return animateElements(valueOrElement, keyframes, options);
-    }
-    else {
-        return animateSingleValue(valueOrElement, keyframes, options);
+const createScopedAnimate = (scope) => {
+    function scopedAnimate(valueOrElement, keyframes, options = {}) {
+        let animation;
+        if (isDOMKeyframes(keyframes)) {
+            animation = animateElements(valueOrElement, keyframes, options, scope);
+        }
+        else {
+            animation = animateSingleValue(valueOrElement, keyframes, options);
+        }
+        if (scope) {
+            scope.animations.push(animation);
+        }
+        return animation;
     }
-}
+    return scopedAnimate;
+};
+const animate = createScopedAnimate();
 
-export { animate };
+export { animate, createScopedAnimate };

package/dist/es/animation/animators/js/index.mjs

@@ -215,12 +215,18 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
                 startTime = animationDriver.now() - newTime;
             }
         },
+        get state() {
+            return playState;
+        },
         play,
         pause: () => {
             playState = "paused";
             holdTime = time;
         },
         stop: () => {
+            if (playState === "idle")
+                return;
+            playState = "idle";
             onStop && onStop();
             animationDriver && animationDriver.stop();
             animationDriver = undefined;

package/dist/es/animation/animators/waapi/create-accelerated-animation.mjs

@@ -126,6 +126,8 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         play: () => animation.play(),
         pause: () => animation.pause(),
         stop: () => {
+            if (animation.playState === "idle")
+                return;
             /**
              * WAAPI doesn't natively have any interruption capabilities.
              *

package/dist/es/animation/hooks/use-animate.mjs

@@ -0,0 +1,17 @@
+import { useConstant } from '../../utils/use-constant.mjs';
+import { useUnmountEffect } from '../../utils/use-unmount-effect.mjs';
+import { createScopedAnimate } from '../animate.mjs';
+
+function useAnimate() {
+    const scope = useConstant(() => ({
+        current: null,
+        animations: [],
+    }));
+    const animate = useConstant(() => createScopedAnimate(scope));
+    useUnmountEffect(() => {
+        scope.animations.forEach((animation) => animation.stop());
+    });
+    return [scope, animate];
+}
+
+export { useAnimate };

package/dist/es/dom-entry.mjs

@@ -1,5 +1,5 @@
 export { MotionValue, motionValue } from './value/index.mjs';
-export { animate } from './animation/animate.mjs';
+export { animate, createScopedAnimate } from './animation/animate.mjs';
 export { scroll } from './render/dom/scroll/index.mjs';
 export { inView } from './render/dom/viewport/index.mjs';
 export { anticipate } from './easing/anticipate.mjs';

package/dist/es/index.mjs

@@ -22,6 +22,7 @@ export { useMotionValueEvent } from './utils/use-motion-value-event.mjs';
 export { useReducedMotion } from './utils/reduced-motion/use-reduced-motion.mjs';
 export { useReducedMotionConfig } from './utils/reduced-motion/use-reduced-motion-config.mjs';
 export { animationControls } from './animation/hooks/animation-controls.mjs';
+export { useAnimate } from './animation/hooks/use-animate.mjs';
 export { useAnimation, useAnimationControls } from './animation/hooks/use-animation.mjs';
 export { useAnimationFrame } from './utils/use-animation-frame.mjs';
 export { animateVisualElement } from './animation/interfaces/visual-element.mjs';
@@ -58,7 +59,7 @@ export { useAnimatedState as useDeprecatedAnimatedState } from './animation/hook
 export { useInvertedScale as useDeprecatedInvertedScale } from './value/use-inverted-scale.mjs';
 export { AnimateSharedLayout } from './components/AnimateSharedLayout.mjs';
 export { MotionValue, motionValue } from './value/index.mjs';
-export { animate } from './animation/animate.mjs';
+export { animate, createScopedAnimate } from './animation/animate.mjs';
 export { scroll } from './render/dom/scroll/index.mjs';
 export { inView } from './render/dom/viewport/index.mjs';
 export { transform } from './utils/transform.mjs';

package/dist/es/render/dom/utils/resolve-element.mjs

@@ -1,12 +1,19 @@
-function resolveElements(elements, selectorCache) {
+import { invariant } from '../../../utils/errors.mjs';
+
+function resolveElements(elements, scope, selectorCache) {
     var _a;
     if (typeof elements === "string") {
+        let root = document;
+        if (scope) {
+            invariant(Boolean(scope.current), "Scope provided, but no element detected.");
+            root = scope.current;
+        }
         if (selectorCache) {
-            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = document.querySelectorAll(elements));
+            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = root.querySelectorAll(elements));
             elements = selectorCache[elements];
         }
         else {
-            elements = document.querySelectorAll(elements);
+            elements = root.querySelectorAll(elements);
         }
     }
     else if (elements instanceof Element) {

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.4.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.4.0 may not work as expected.`);
+                warnOnce(nextValue.version === "10.5.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.5.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -26,7 +26,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "10.4.0";
+        this.version = "10.5.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -3101,12 +3101,18 @@
                     startTime = animationDriver.now() - newTime;
                 }
             },
+            get state() {
+                return playState;
+            },
             play,
             pause: () => {
                 playState = "paused";
                 holdTime = time;
             },
             stop: () => {
+                if (playState === "idle")
+                    return;
+                playState = "idle";
                 onStop && onStop();
                 animationDriver && animationDriver.stop();
                 animationDriver = undefined;
@@ -3239,6 +3245,8 @@
             play: () => animation.play(),
             pause: () => animation.pause(),
             stop: () => {
+                if (animation.playState === "idle")
+                    return;
                 /**
                  * WAAPI doesn't natively have any interruption capabilities.
                  *
@@ -3659,7 +3667,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "10.4.0";
+            this.version = "10.5.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5996,15 +6004,20 @@
         }
     }
 
-    function resolveElements(elements, selectorCache) {
+    function resolveElements(elements, scope, selectorCache) {
         var _a;
         if (typeof elements === "string") {
+            let root = document;
+            if (scope) {
+                exports.invariant(Boolean(scope.current), "Scope provided, but no element detected.");
+                root = scope.current;
+            }
             if (selectorCache) {
-                (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = document.querySelectorAll(elements));
+                (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = root.querySelectorAll(elements));
                 elements = selectorCache[elements];
             }
             else {
-                elements = document.querySelectorAll(elements);
+                elements = root.querySelectorAll(elements);
             }
         }
         else if (elements instanceof Element) {
@@ -6404,7 +6417,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "10.4.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.4.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "10.5.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.5.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -7079,8 +7092,8 @@
         return motionValue$1.animation;
     }
 
-    function animateElements(elementOrSelector, keyframes, options) {
-        const elements = resolveElements(elementOrSelector);
+    function animateElements(elementOrSelector, keyframes, options, scope) {
+        const elements = resolveElements(elementOrSelector, scope);
         const numElements = elements.length;
         exports.invariant(Boolean(numElements), "No valid element provided.");
         const animations = [];
@@ -7103,14 +7116,23 @@
         }
         return new GroupPlaybackControls(animations);
     }
-    function animate(valueOrElement, keyframes, options = {}) {
-        if (isDOMKeyframes(keyframes)) {
-            return animateElements(valueOrElement, keyframes, options);
-        }
-        else {
-            return animateSingleValue(valueOrElement, keyframes, options);
+    const createScopedAnimate = (scope) => {
+        function scopedAnimate(valueOrElement, keyframes, options = {}) {
+            let animation;
+            if (isDOMKeyframes(keyframes)) {
+                animation = animateElements(valueOrElement, keyframes, options, scope);
+            }
+            else {
+                animation = animateSingleValue(valueOrElement, keyframes, options);
+            }
+            if (scope) {
+                scope.animations.push(animation);
+            }
+            return animation;
         }
-    }
+        return scopedAnimate;
+    };
+    const animate = createScopedAnimate();
 
     const resizeHandlers = new WeakMap();
     let observer;
@@ -10369,6 +10391,18 @@
         return controls;
     }
 
+    function useAnimate() {
+        const scope = useConstant(() => ({
+            current: null,
+            animations: [],
+        }));
+        const animate = useConstant(() => createScopedAnimate(scope));
+        useUnmountEffect(() => {
+            scope.animations.forEach((animation) => animation.stop());
+        });
+        return [scope, animate];
+    }
+
     /**
      * Creates `AnimationControls`, which can be used to manually start, stop
      * and sequence animations on one or more components.
@@ -10908,6 +10942,7 @@
     exports.createBox = createBox;
     exports.createDomMotionComponent = createDomMotionComponent;
     exports.createMotionComponent = createMotionComponent;
+    exports.createScopedAnimate = createScopedAnimate;
     exports.cubicBezier = cubicBezier;
     exports.delay = delay;
     exports.distance = distance;
@@ -10942,6 +10977,7 @@
     exports.sync = sync;
     exports.transform = transform;
     exports.unwrapMotionComponent = unwrapMotionComponent;
+    exports.useAnimate = useAnimate;
     exports.useAnimation = useAnimation;
     exports.useAnimationControls = useAnimationControls;
     exports.useAnimationFrame = useAnimationFrame;