framer-motion 10.2.3 → 10.2.4

package/dist/three-entry.d.ts

@@ -856,9 +856,70 @@ interface CustomValueType {
  * @public
  */
 interface AnimationPlaybackControls {
-    currentTime?: number | null;
+    currentTime: number;
     stop: () => void;
 }
+/**
+ * @public
+ */
+declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
+/**
+ * @public
+ */
+interface AnimationControls {
+    /**
+     * Starts an animation on all linked components.
+     *
+     * @remarks
+     *
+     * ```jsx
+     * controls.start("variantLabel")
+     * controls.start({
+     *   x: 0,
+     *   transition: { duration: 1 }
+     * })
+     * ```
+     *
+     * @param definition - Properties or variant label to animate to
+     * @param transition - Optional `transtion` to apply to a variant
+     * @returns - A `Promise` that resolves when all animations have completed.
+     *
+     * @public
+     */
+    start(definition: ControlsAnimationDefinition, transitionOverride?: Transition): Promise<any>;
+    /**
+     * Instantly set to a set of properties or a variant.
+     *
+     * ```jsx
+     * // With properties
+     * controls.set({ opacity: 0 })
+     *
+     * // With variants
+     * controls.set("hidden")
+     * ```
+     *
+     * @privateRemarks
+     * We could perform a similar trick to `.start` where this can be called before mount
+     * and we maintain a list of of pending actions that get applied on mount. But the
+     * expectation of `set` is that it happens synchronously and this would be difficult
+     * to do before any children have even attached themselves. It's also poor practise
+     * and we should discourage render-synchronous `.start` calls rather than lean into this.
+     *
+     * @public
+     */
+    set(definition: ControlsAnimationDefinition): void;
+    /**
+     * Stops animations on all linked components.
+     *
+     * ```jsx
+     * controls.stop()
+     * ```
+     *
+     * @public
+     */
+    stop(): void;
+    mount(): () => void;
+}
 
 /**
  * @public
@@ -1014,68 +1075,6 @@ declare class MotionValue<V = any> {
     destroy(): void;
 }
 
-/**
- * @public
- */
-declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
-/**
- * @public
- */
-interface AnimationControls {
-    /**
-     * Starts an animation on all linked components.
-     *
-     * @remarks
-     *
-     * ```jsx
-     * controls.start("variantLabel")
-     * controls.start({
-     *   x: 0,
-     *   transition: { duration: 1 }
-     * })
-     * ```
-     *
-     * @param definition - Properties or variant label to animate to
-     * @param transition - Optional `transtion` to apply to a variant
-     * @returns - A `Promise` that resolves when all animations have completed.
-     *
-     * @public
-     */
-    start(definition: ControlsAnimationDefinition, transitionOverride?: Transition): Promise<any>;
-    /**
-     * Instantly set to a set of properties or a variant.
-     *
-     * ```jsx
-     * // With properties
-     * controls.set({ opacity: 0 })
-     *
-     * // With variants
-     * controls.set("hidden")
-     * ```
-     *
-     * @privateRemarks
-     * We could perform a similar trick to `.start` where this can be called before mount
-     * and we maintain a list of of pending actions that get applied on mount. But the
-     * expectation of `set` is that it happens synchronously and this would be difficult
-     * to do before any children have even attached themselves. It's also poor practise
-     * and we should discourage render-synchronous `.start` calls rather than lean into this.
-     *
-     * @public
-     */
-    set(definition: ControlsAnimationDefinition): void;
-    /**
-     * Stops animations on all linked components.
-     *
-     * ```jsx
-     * controls.stop()
-     * ```
-     *
-     * @public
-     */
-    stop(): void;
-    mount(): () => void;
-}
-
 interface RefObject<T> {
     current: T | null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "10.2.3",
+    "version": "10.2.4",
     "description": "A simple and powerful React and JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -85,7 +85,7 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "29.96 kB"
+            "maxSize": "29.85 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
@@ -93,15 +93,11 @@
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "14.79 kB"
+            "maxSize": "14.56 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "25.69 kB"
-        },
-        {
-            "path": "./dist/size-rollup-animate.js",
-            "maxSize": "10 kB"
+            "maxSize": "25.6 kB"
         },
         {
             "path": "./dist/size-rollup-animate.js",
@@ -113,12 +109,12 @@
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "18.8 kB"
+            "maxSize": "18.56 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "30.55 kB"
+            "maxSize": "30.42 kB"
         }
     ],
-    "gitHead": "6e3a7c75b2da8e6d3f083e05fd5a6499ee8210ad"
+    "gitHead": "82eb0ba26cd103d524a27dc95415e437cce35822"
 }

package/dist/es/animation/legacy-popmotion/decay.mjs

@@ -1,34 +0,0 @@
-function decay({ 
-/**
- * The decay animation dynamically calculates an end of the animation
- * based on the initial keyframe, so we only need to define a single keyframe
- * as default.
- */
-keyframes = [0], velocity = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget, }) {
-    const origin = keyframes[0];
-    /**
-     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
-     * to reduce GC during animation.
-     */
-    const state = { done: false, value: origin };
-    let amplitude = power * velocity;
-    const ideal = origin + amplitude;
-    const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
-    /**
-     * If the target has changed we need to re-calculate the amplitude, otherwise
-     * the animation will start from the wrong position.
-     */
-    if (target !== ideal)
-        amplitude = target - origin;
-    return {
-        next: (t) => {
-            const delta = -amplitude * Math.exp(-t / timeConstant);
-            state.done = !(delta > restDelta || delta < -restDelta);
-            state.value = state.done ? target : target + delta;
-            return state;
-        },
-        flipTarget: () => { },
-    };
-}
-
-export { decay };

package/dist/es/animation/legacy-popmotion/index.mjs

@@ -1,163 +0,0 @@
-import { keyframes } from './keyframes.mjs';
-import { spring } from './spring.mjs';
-import { decay } from './decay.mjs';
-import { sync, cancelSync } from '../../frameloop/index.mjs';
-import { interpolate } from '../../utils/interpolate.mjs';
-
-const types = {
-    decay,
-    keyframes: keyframes,
-    tween: keyframes,
-    spring,
-};
-function loopElapsed(elapsed, duration, delay = 0) {
-    return elapsed - duration - delay;
-}
-function reverseElapsed(elapsed, duration = 0, delay = 0, isForwardPlayback = true) {
-    return isForwardPlayback
-        ? loopElapsed(duration + -elapsed, duration, delay)
-        : duration - (elapsed - duration) + delay;
-}
-function hasRepeatDelayElapsed(elapsed, duration, delay, isForwardPlayback) {
-    return isForwardPlayback ? elapsed >= duration + delay : elapsed <= -delay;
-}
-const framesync = (update) => {
-    const passTimestamp = ({ delta }) => update(delta);
-    return {
-        start: () => sync.update(passTimestamp, true),
-        stop: () => cancelSync.update(passTimestamp),
-    };
-};
-function animateValue({ duration, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, keyframes: keyframes$1, autoplay = true, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
-    const initialElapsed = elapsed;
-    let driverControls;
-    let repeatCount = 0;
-    let computedDuration = duration;
-    let isComplete = false;
-    let isForwardPlayback = true;
-    let interpolateFromNumber;
-    const animator = types[keyframes$1.length > 2 ? "keyframes" : type] || keyframes;
-    const origin = keyframes$1[0];
-    const target = keyframes$1[keyframes$1.length - 1];
-    let state = { done: false, value: origin };
-    /**
-     * If this value needs interpolation (ie is non-numerical), set up an interpolator.
-     * TODO: Keyframes animation also performs this step. This could be removed so it only happens here.
-     */
-    const { needsInterpolation } = animator;
-    if (needsInterpolation && needsInterpolation(origin, target)) {
-        interpolateFromNumber = interpolate([0, 100], [origin, target], {
-            clamp: false,
-        });
-        keyframes$1 = [0, 100];
-    }
-    const animation = animator({
-        ...options,
-        duration,
-        keyframes: keyframes$1,
-    });
-    function repeat() {
-        repeatCount++;
-        if (repeatType === "reverse") {
-            isForwardPlayback = repeatCount % 2 === 0;
-            elapsed = reverseElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback);
-        }
-        else {
-            elapsed = loopElapsed(elapsed, computedDuration, repeatDelay);
-            if (repeatType === "mirror")
-                animation.flipTarget();
-        }
-        isComplete = false;
-        onRepeat && onRepeat();
-    }
-    function complete() {
-        driverControls && driverControls.stop();
-        onComplete && onComplete();
-    }
-    function update(delta) {
-        if (!isForwardPlayback)
-            delta = -delta;
-        elapsed += delta;
-        if (!isComplete) {
-            state = animation.next(Math.max(0, elapsed));
-            if (interpolateFromNumber)
-                state.value = interpolateFromNumber(state.value);
-            isComplete = isForwardPlayback ? state.done : elapsed <= 0;
-        }
-        onUpdate && onUpdate(state.value);
-        if (isComplete) {
-            if (repeatCount === 0) {
-                computedDuration =
-                    computedDuration !== undefined ? computedDuration : elapsed;
-            }
-            if (repeatCount < repeatMax) {
-                hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();
-            }
-            else {
-                complete();
-            }
-        }
-    }
-    function play() {
-        onPlay && onPlay();
-        driverControls = driver(update);
-        driverControls.start();
-    }
-    autoplay && play();
-    return {
-        stop: () => {
-            onStop && onStop();
-            driverControls && driverControls.stop();
-        },
-        /**
-         * Set the current time of the animation. This is purposefully
-         * mirroring the WAAPI animation API to make them interchanagable.
-         * Going forward this file should be ported more towards
-         * https://github.com/motiondivision/motionone/blob/main/packages/animation/src/Animation.ts
-         * Which behaviourally adheres to WAAPI as far as possible.
-         *
-         * WARNING: This is not safe to use for most animations. We currently
-         * only use it for handoff from WAAPI within Framer.
-         *
-         * This animation function consumes time every frame rather than being sampled for time.
-         * So the sample() method performs some headless frames to ensure
-         * repeats are handled correctly. Ideally in the future we will replace
-         * that method with this, once repeat calculations are pure.
-         */
-        set currentTime(t) {
-            elapsed = initialElapsed;
-            update(t);
-        },
-        /**
-         * animate() can't yet be sampled for time, instead it
-         * consumes time. So to sample it we have to run a low
-         * temporal-resolution version.
-         *
-         * isControlled should be set to true if sample is being run within
-         * a loop. This indicates that we're not arbitrarily sampling
-         * the animation but running it one step after another. Therefore
-         * we don't need to run a low-res version here. This is a stop-gap
-         * until a rewrite can sample for time.
-         */
-        sample: (t, isControlled = false) => {
-            elapsed = initialElapsed;
-            if (isControlled) {
-                update(t);
-                return state;
-            }
-            const sampleResolution = duration && typeof duration === "number"
-                ? Math.max(duration * 0.5, 50)
-                : 50;
-            let sampleElapsed = 0;
-            update(0);
-            while (sampleElapsed <= t) {
-                const remaining = t - sampleElapsed;
-                update(Math.min(remaining, sampleResolution));
-                sampleElapsed += sampleResolution;
-            }
-            return state;
-        },
-    };
-}
-
-export { animateValue, hasRepeatDelayElapsed, loopElapsed, reverseElapsed };

package/dist/es/animation/legacy-popmotion/inertia.mjs

@@ -1,90 +0,0 @@
-import { animateValue } from './index.mjs';
-import { velocityPerSecond } from '../../utils/velocity-per-second.mjs';
-import { frameData } from '../../frameloop/data.mjs';
-
-function inertia({ keyframes, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
-    const origin = keyframes[0];
-    let currentAnimation;
-    function isOutOfBounds(v) {
-        return (min !== undefined && v < min) || (max !== undefined && v > max);
-    }
-    function findNearestBoundary(v) {
-        if (min === undefined)
-            return max;
-        if (max === undefined)
-            return min;
-        return Math.abs(min - v) < Math.abs(max - v) ? min : max;
-    }
-    function startAnimation(options) {
-        currentAnimation && currentAnimation.stop();
-        currentAnimation = animateValue({
-            keyframes: [0, 1],
-            velocity: 0,
-            ...options,
-            driver,
-            onUpdate: (v) => {
-                onUpdate && onUpdate(v);
-                options.onUpdate && options.onUpdate(v);
-            },
-            onComplete,
-            onStop,
-        });
-    }
-    function startSpring(options) {
-        startAnimation({
-            type: "spring",
-            stiffness: bounceStiffness,
-            damping: bounceDamping,
-            restDelta,
-            ...options,
-        });
-    }
-    if (isOutOfBounds(origin)) {
-        // Start the animation with spring if outside the defined boundaries
-        startSpring({
-            velocity,
-            keyframes: [origin, findNearestBoundary(origin)],
-        });
-    }
-    else {
-        /**
-         * Or if the value is out of bounds, simulate the inertia movement
-         * with the decay animation.
-         *
-         * Pre-calculate the target so we can detect if it's out-of-bounds.
-         * If it is, we want to check per frame when to switch to a spring
-         * animation
-         */
-        let target = power * velocity + origin;
-        if (typeof modifyTarget !== "undefined")
-            target = modifyTarget(target);
-        const boundary = findNearestBoundary(target);
-        const heading = boundary === min ? -1 : 1;
-        let prev;
-        let current;
-        const checkBoundary = (v) => {
-            prev = current;
-            current = v;
-            velocity = velocityPerSecond(v - prev, frameData.delta);
-            if ((heading === 1 && v > boundary) ||
-                (heading === -1 && v < boundary)) {
-                startSpring({ keyframes: [v, boundary], velocity });
-            }
-        };
-        startAnimation({
-            type: "decay",
-            keyframes: [origin, 0],
-            velocity,
-            timeConstant,
-            power,
-            restDelta,
-            modifyTarget,
-            onUpdate: isOutOfBounds(target) ? checkBoundary : undefined,
-        });
-    }
-    return {
-        stop: () => currentAnimation && currentAnimation.stop(),
-    };
-}
-
-export { inertia };

package/dist/es/animation/legacy-popmotion/spring.mjs

@@ -1,143 +0,0 @@
-import { findSpring, calcAngularFreq } from './find-spring.mjs';
-import { velocityPerSecond } from '../../utils/velocity-per-second.mjs';
-
-const durationKeys = ["duration", "bounce"];
-const physicsKeys = ["stiffness", "damping", "mass"];
-function isSpringType(options, keys) {
-    return keys.some((key) => options[key] !== undefined);
-}
-function getSpringOptions(options) {
-    let springOptions = {
-        velocity: 0.0,
-        stiffness: 100,
-        damping: 10,
-        mass: 1.0,
-        isResolvedFromDuration: false,
-        ...options,
-    };
-    // stiffness/damping/mass overrides duration/bounce
-    if (!isSpringType(options, physicsKeys) &&
-        isSpringType(options, durationKeys)) {
-        const derived = findSpring(options);
-        springOptions = {
-            ...springOptions,
-            ...derived,
-            velocity: 0.0,
-            mass: 1.0,
-        };
-        springOptions.isResolvedFromDuration = true;
-    }
-    return springOptions;
-}
-const velocitySampleDuration = 5;
-/**
- * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
- */
-function spring({ keyframes, restDelta, restSpeed, ...options }) {
-    let origin = keyframes[0];
-    let target = keyframes[keyframes.length - 1];
-    /**
-     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
-     * to reduce GC during animation.
-     */
-    const state = { done: false, value: origin };
-    const { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
-    let resolveSpring = zero;
-    let initialVelocity = velocity ? -(velocity / 1000) : 0.0;
-    const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
-    function createSpring() {
-        const initialDelta = target - origin;
-        const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
-        /**
-         * If we're working on a granular scale, use smaller defaults for determining
-         * when the spring is finished.
-         *
-         * These defaults have been selected emprically based on what strikes a good
-         * ratio between feeling good and finishing as soon as changes are imperceptible.
-         */
-        const isGranularScale = Math.abs(initialDelta) < 5;
-        restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
-        restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);
-        if (dampingRatio < 1) {
-            const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
-            // Underdamped spring
-            resolveSpring = (t) => {
-                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                return (target -
-                    envelope *
-                        (((initialVelocity +
-                            dampingRatio * undampedAngularFreq * initialDelta) /
-                            angularFreq) *
-                            Math.sin(angularFreq * t) +
-                            initialDelta * Math.cos(angularFreq * t)));
-            };
-        }
-        else if (dampingRatio === 1) {
-            // Critically damped spring
-            resolveSpring = (t) => target -
-                Math.exp(-undampedAngularFreq * t) *
-                    (initialDelta +
-                        (initialVelocity + undampedAngularFreq * initialDelta) *
-                            t);
-        }
-        else {
-            // Overdamped spring
-            const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
-            resolveSpring = (t) => {
-                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                // When performing sinh or cosh values can hit Infinity so we cap them here
-                const freqForT = Math.min(dampedAngularFreq * t, 300);
-                return (target -
-                    (envelope *
-                        ((initialVelocity +
-                            dampingRatio * undampedAngularFreq * initialDelta) *
-                            Math.sinh(freqForT) +
-                            dampedAngularFreq *
-                                initialDelta *
-                                Math.cosh(freqForT))) /
-                        dampedAngularFreq);
-            };
-        }
-    }
-    createSpring();
-    return {
-        next: (t) => {
-            const current = resolveSpring(t);
-            if (!isResolvedFromDuration) {
-                let currentVelocity = initialVelocity;
-                if (t !== 0) {
-                    /**
-                     * We only need to calculate velocity for under-damped springs
-                     * as over- and critically-damped springs can't overshoot, so
-                     * checking only for displacement is enough.
-                     */
-                    if (dampingRatio < 1) {
-                        const prevT = Math.max(0, t - velocitySampleDuration);
-                        currentVelocity = velocityPerSecond(current - resolveSpring(prevT), t - prevT);
-                    }
-                    else {
-                        currentVelocity = 0;
-                    }
-                }
-                const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
-                const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
-                state.done =
-                    isBelowVelocityThreshold && isBelowDisplacementThreshold;
-            }
-            else {
-                state.done = t >= duration;
-            }
-            state.value = state.done ? target : current;
-            return state;
-        },
-        flipTarget: () => {
-            initialVelocity = -initialVelocity;
-            [origin, target] = [target, origin];
-            createSpring();
-        },
-    };
-}
-spring.needsInterpolation = (a, b) => typeof a === "string" || typeof b === "string";
-const zero = (_t) => 0;
-
-export { spring };

package/dist/es/frameloop/on-next-frame.mjs

@@ -1,12 +0,0 @@
-/*
-  Detect and load appropriate clock setting for the execution environment
- */
-const defaultTimestep = (1 / 60) * 1000;
-const getCurrentTime = typeof performance !== "undefined"
-    ? () => performance.now()
-    : () => Date.now();
-const onNextFrame = typeof window !== "undefined"
-    ? (callback) => window.requestAnimationFrame(callback)
-    : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
-
-export { defaultTimestep, onNextFrame };