framer-motion 7.8.0 → 7.9.0

package/dist/es/animation/animate.mjs

@@ -1,6 +1,6 @@
+import { createMotionValueAnimation } from './index.mjs';
 import { motionValue } from '../value/index.mjs';
 import { isMotionValue } from '../value/utils/is-motion-value.mjs';
-import { startAnimation } from './utils/transitions.mjs';
 
 /**
  * Animate a single value or a `MotionValue`.
@@ -31,7 +31,7 @@ import { startAnimation } from './utils/transitions.mjs';
  */
 function animate(from, to, transition = {}) {
     const value = isMotionValue(from) ? from : motionValue(from);
-    startAnimation("", value, to, transition);
+    value.start(createMotionValueAnimation("", value, to, transition));
     return {
         stop: () => value.stop(),
         isAnimating: () => value.isAnimating(),

package/dist/es/animation/create-instant-animation.mjs

@@ -0,0 +1,12 @@
+import { delay } from '../utils/delay.mjs';
+
+function createInstantAnimation({ keyframes, elapsed, onUpdate, onComplete, }) {
+    const setValue = () => {
+        onUpdate && onUpdate(keyframes[keyframes.length - 1]);
+        onComplete && onComplete();
+        return () => { };
+    };
+    return elapsed ? delay(setValue, -elapsed) : setValue();
+}
+
+export { createInstantAnimation };

package/dist/es/animation/{animation-controls.mjs → hooks/animation-controls.mjs}

@@ -1,6 +1,6 @@
 import { invariant } from 'hey-listen';
-import { stopAnimation, animateVisualElement } from '../render/utils/animation.mjs';
-import { setValues } from '../render/utils/setters.mjs';
+import { stopAnimation, animateVisualElement } from '../../render/utils/animation.mjs';
+import { setValues } from '../../render/utils/setters.mjs';
 
 /**
  * @public

package/dist/es/animation/{use-animated-state.mjs → hooks/use-animated-state.mjs}

@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
-import { useConstant } from '../utils/use-constant.mjs';
-import { getOrigin, checkTargetForNewValues } from '../render/utils/setters.mjs';
-import { animateVisualElement } from '../render/utils/animation.mjs';
-import { makeUseVisualState } from '../motion/utils/use-visual-state.mjs';
-import { createBox } from '../projection/geometry/models.mjs';
-import { VisualElement } from '../render/VisualElement.mjs';
+import { useConstant } from '../../utils/use-constant.mjs';
+import { getOrigin, checkTargetForNewValues } from '../../render/utils/setters.mjs';
+import { animateVisualElement } from '../../render/utils/animation.mjs';
+import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
+import { createBox } from '../../projection/geometry/models.mjs';
+import { VisualElement } from '../../render/VisualElement.mjs';
 
 const createObject = () => ({});
 class StateVisualElement extends VisualElement {

package/dist/es/animation/{use-animation.mjs → hooks/use-animation.mjs}

@@ -1,6 +1,6 @@
 import { animationControls } from './animation-controls.mjs';
 import { useEffect } from 'react';
-import { useConstant } from '../utils/use-constant.mjs';
+import { useConstant } from '../../utils/use-constant.mjs';
 
 /**
  * Creates `AnimationControls`, which can be used to manually start, stop

package/dist/es/animation/index.mjs

@@ -0,0 +1,124 @@
+import { warning } from 'hey-listen';
+import { secondsToMilliseconds } from '../utils/time-conversion.mjs';
+import { instantAnimationState } from '../utils/use-instant-transition-state.mjs';
+import { createAcceleratedAnimation } from './waapi/create-accelerated-animation.mjs';
+import { createInstantAnimation } from './create-instant-animation.mjs';
+import { animate } from './legacy-popmotion/index.mjs';
+import { inertia } from './legacy-popmotion/inertia.mjs';
+import { getDefaultTransition } from './utils/default-transitions.mjs';
+import { isAnimatable } from './utils/is-animatable.mjs';
+import { getKeyframes } from './utils/keyframes.mjs';
+import { getValueTransition, isTransitionDefined } from './utils/transitions.mjs';
+import { supports } from './waapi/supports.mjs';
+
+/**
+ * A list of values that can be hardware-accelerated.
+ */
+const acceleratedValues = new Set(["opacity"]);
+const createMotionValueAnimation = (valueName, value, target, transition = {}) => {
+    return (onComplete) => {
+        const valueTransition = getValueTransition(transition, valueName) || {};
+        /**
+         * Most transition values are currently completely overwritten by value-specific
+         * transitions. In the future it'd be nicer to blend these transitions. But for now
+         * delay actually does inherit from the root transition if not value-specific.
+         */
+        const delay = valueTransition.delay || transition.delay || 0;
+        /**
+         * Elapsed isn't a public transition option but can be passed through from
+         * optimized appear effects in milliseconds.
+         */
+        let { elapsed = 0 } = transition;
+        elapsed = elapsed - secondsToMilliseconds(delay);
+        const keyframes = getKeyframes(value, valueName, target, valueTransition);
+        /**
+         * Check if we're able to animate between the start and end keyframes,
+         * and throw a warning if we're attempting to animate between one that's
+         * animatable and another that isn't.
+         */
+        const originKeyframe = keyframes[0];
+        const targetKeyframe = keyframes[keyframes.length - 1];
+        const isOriginAnimatable = isAnimatable(valueName, originKeyframe);
+        const isTargetAnimatable = isAnimatable(valueName, targetKeyframe);
+        warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${valueName} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+        let options = {
+            keyframes,
+            velocity: value.getVelocity(),
+            ...valueTransition,
+            elapsed,
+            onUpdate: (v) => {
+                value.set(v);
+                valueTransition.onUpdate && valueTransition.onUpdate(v);
+            },
+            onComplete: () => {
+                onComplete();
+                valueTransition.onComplete && valueTransition.onComplete();
+            },
+        };
+        if (!isOriginAnimatable ||
+            !isTargetAnimatable ||
+            instantAnimationState.current ||
+            valueTransition.type === false) {
+            /**
+             * If we can't animate this value, or the global instant animation flag is set,
+             * or this is simply defined as an instant transition, return an instant transition.
+             */
+            return createInstantAnimation(options);
+        }
+        else if (valueTransition.type === "inertia") {
+            /**
+             * If this is an inertia animation, we currently don't support pre-generating
+             * keyframes for this as such it must always run on the main thread.
+             */
+            const animation = inertia(options);
+            return () => animation.stop();
+        }
+        /**
+         * If there's no transition defined for this value, we can generate
+         * unqiue transition settings for this value.
+         */
+        if (!isTransitionDefined(valueTransition)) {
+            options = {
+                ...options,
+                ...getDefaultTransition(valueName, options),
+            };
+        }
+        /**
+         * Both WAAPI and our internal animation functions use durations
+         * as defined by milliseconds, while our external API defines them
+         * as seconds.
+         */
+        if (options.duration) {
+            options.duration = secondsToMilliseconds(options.duration);
+        }
+        if (options.repeatDelay) {
+            options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
+        }
+        const visualElement = value.owner;
+        const element = visualElement && visualElement.current;
+        const canAccelerateAnimation = supports.waapi() &&
+            acceleratedValues.has(valueName) &&
+            !options.repeatDelay &&
+            options.repeatType !== "mirror" &&
+            options.damping !== 0 &&
+            typeof options.ease !== "function" &&
+            visualElement &&
+            element instanceof HTMLElement &&
+            !visualElement.getProps().onUpdate;
+        if (canAccelerateAnimation) {
+            /**
+             * If this animation is capable of being run via WAAPI, then do so.
+             */
+            return createAcceleratedAnimation(value, valueName, options);
+        }
+        else {
+            /**
+             * Otherwise, fall back to the main thread.
+             */
+            const animation = animate(options);
+            return () => animation.stop();
+        }
+    };
+};
+
+export { createMotionValueAnimation };

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

@@ -1,18 +1,25 @@
-function decay({ velocity = 0, from = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget, }) {
+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: from };
+    const state = { done: false, value: origin };
     let amplitude = power * velocity;
-    const ideal = from + amplitude;
+    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 - from;
+        amplitude = target - origin;
     return {
         next: (t) => {
             const delta = -amplitude * Math.exp(-t / timeConstant);

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

@@ -4,7 +4,12 @@ import { decay } from './decay.mjs';
 import { sync, cancelSync } from '../../frameloop/index.mjs';
 import { interpolate } from '../../utils/interpolate.mjs';
 
-const types = { decay, keyframes, spring };
+const types = {
+    decay,
+    keyframes: keyframes,
+    tween: keyframes,
+    spring,
+};
 function loopElapsed(elapsed, duration, delay = 0) {
     return elapsed - duration - delay;
 }
@@ -23,26 +28,29 @@ const framesync = (update) => {
         stop: () => cancelSync.update(passTimestamp),
     };
 };
-function animate({ from, autoplay = true, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
+function animate({ duration, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, keyframes, autoplay = true, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
     var _a, _b;
-    let { to } = options;
     let driverControls;
     let repeatCount = 0;
-    let computedDuration = options
-        .duration;
+    let computedDuration = duration;
     let latest;
     let isComplete = false;
     let isForwardPlayback = true;
     let interpolateFromNumber;
-    const animator = types[Array.isArray(to) ? "keyframes" : type];
-    if ((_b = (_a = animator).needsInterpolation) === null || _b === void 0 ? void 0 : _b.call(_a, from, to)) {
-        interpolateFromNumber = interpolate([0, 100], [from, to], {
+    const animator = types[keyframes.length > 2 ? "keyframes" : type];
+    const origin = keyframes[0];
+    const target = keyframes[keyframes.length - 1];
+    if ((_b = (_a = animator).needsInterpolation) === null || _b === void 0 ? void 0 : _b.call(_a, origin, target)) {
+        interpolateFromNumber = interpolate([0, 100], [origin, target], {
             clamp: false,
         });
-        from = 0;
-        to = 100;
+        keyframes = [0, 100];
     }
-    const animation = animator({ ...options, from, to });
+    const animation = animator({
+        ...options,
+        duration,
+        keyframes,
+    });
     function repeat() {
         repeatCount++;
         if (repeatType === "reverse") {
@@ -97,6 +105,9 @@ function animate({ from, autoplay = true, driver = framesync, elapsed = 0, repea
             onStop && onStop();
             driverControls.stop();
         },
+        sample: (t) => {
+            return animation.next(Math.max(0, t)).value;
+        },
     };
 }
 

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

@@ -2,12 +2,13 @@ import { animate } from './index.mjs';
 import { velocityPerSecond } from '../../utils/velocity-per-second.mjs';
 import { frameData } from '../../frameloop/data.mjs';
 
-function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
+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 boundaryNearest(v) {
+    function findNearestBoundary(v) {
         if (min === undefined)
             return max;
         if (max === undefined)
@@ -17,6 +18,8 @@ function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant =
     function startAnimation(options) {
         currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();
         currentAnimation = animate({
+            keyframes: [0, 1],
+            velocity: 0,
             ...options,
             driver,
             onUpdate: (v) => {
@@ -37,9 +40,12 @@ function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant =
             ...options,
         });
     }
-    if (isOutOfBounds(from)) {
+    if (isOutOfBounds(origin)) {
         // Start the animation with spring if outside the defined boundaries
-        startSpring({ from, velocity, to: boundaryNearest(from) });
+        startSpring({
+            velocity,
+            keyframes: [origin, findNearestBoundary(origin)],
+        });
     }
     else {
         /**
@@ -50,10 +56,10 @@ function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant =
          * If it is, we want to check per frame when to switch to a spring
          * animation
          */
-        let target = power * velocity + from;
+        let target = power * velocity + origin;
         if (typeof modifyTarget !== "undefined")
             target = modifyTarget(target);
-        const boundary = boundaryNearest(target);
+        const boundary = findNearestBoundary(target);
         const heading = boundary === min ? -1 : 1;
         let prev;
         let current;
@@ -63,12 +69,12 @@ function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant =
             velocity = velocityPerSecond(v - prev, frameData.delta);
             if ((heading === 1 && v > boundary) ||
                 (heading === -1 && v < boundary)) {
-                startSpring({ from: v, to: boundary, velocity });
+                startSpring({ keyframes: [v, boundary], velocity });
             }
         };
         startAnimation({
             type: "decay",
-            from,
+            keyframes: [origin, 0],
             velocity,
             timeConstant,
             power,

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

@@ -1,5 +1,6 @@
 import { easeInOut } from '../../easing/ease.mjs';
 import { interpolate } from '../../utils/interpolate.mjs';
+import { isEasingArray, easingDefinitionToFunction } from '../utils/easing.mjs';
 
 function defaultEasing(values, easing) {
     return values.map(() => easing || easeInOut).splice(0, values.length - 1);
@@ -11,28 +12,35 @@ function defaultOffset(values) {
 function convertOffsetToTimes(offset, duration) {
     return offset.map((o) => o * duration);
 }
-function keyframes({ from = 0, to = 1, ease, offset, duration = 300, }) {
+function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duration = 300, }) {
+    keyframeValues = [...keyframeValues];
+    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.
+     * Easing functions can be externally defined as strings. Here we convert them
+     * into actual functions.
      */
-    const state = { done: false, value: from };
+    const easingFunctions = isEasingArray(ease)
+        ? ease.map(easingDefinitionToFunction)
+        : easingDefinitionToFunction(ease);
     /**
-     * Convert values to an array if they've been given as from/to options
+     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+     * to reduce GC during animation.
      */
-    const values = Array.isArray(to) ? to : [from, to];
+    const state = { done: false, value: origin };
     /**
      * Create a times array based on the provided 0-1 offsets
      */
-    const times = convertOffsetToTimes(
+    const absoluteTimes = convertOffsetToTimes(
     // Only use the provided offsets if they're the correct length
     // TODO Maybe we should warn here if there's a length mismatch
-    offset && offset.length === values.length
-        ? offset
-        : defaultOffset(values), duration);
+    times && times.length === keyframes.length
+        ? times
+        : defaultOffset(keyframeValues), duration);
     function createInterpolator() {
-        return interpolate(times, values, {
-            ease: Array.isArray(ease) ? ease : defaultEasing(values, ease),
+        return interpolate(absoluteTimes, keyframeValues, {
+            ease: Array.isArray(easingFunctions)
+                ? easingFunctions
+                : defaultEasing(keyframeValues, easingFunctions),
         });
     }
     let interpolator = createInterpolator();
@@ -43,7 +51,7 @@ function keyframes({ from = 0, to = 1, ease, offset, duration = 300, }) {
             return state;
         },
         flipTarget: () => {
-            values.reverse();
+            keyframeValues.reverse();
             interpolator = createInterpolator();
         },
     };

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

@@ -33,32 +33,34 @@ const velocitySampleDuration = 5;
 /**
  * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
  */
-function spring({ from = 0.0, to = 1.0, restSpeed = 2, restDelta = 0.01, ...options }) {
+function spring({ keyframes, restSpeed = 2, restDelta = 0.01, ...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: from };
-    let { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
+    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 = to - from;
+        const initialDelta = target - origin;
         const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
         /**
          * If we're working within what looks like a 0-1 range, change the default restDelta
          * to 0.01
          */
         if (restDelta === undefined) {
-            restDelta = Math.min(Math.abs(to - from) / 100, 0.4);
+            restDelta = Math.min(Math.abs(target - origin) / 100, 0.4);
         }
         if (dampingRatio < 1) {
             const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
             // Underdamped spring
             resolveSpring = (t) => {
                 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-                return (to -
+                return (target -
                     envelope *
                         (((initialVelocity +
                             dampingRatio * undampedAngularFreq * initialDelta) /
@@ -69,7 +71,7 @@ function spring({ from = 0.0, to = 1.0, restSpeed = 2, restDelta = 0.01, ...opti
         }
         else if (dampingRatio === 1) {
             // Critically damped spring
-            resolveSpring = (t) => to -
+            resolveSpring = (t) => target -
                 Math.exp(-undampedAngularFreq * t) *
                     (initialDelta +
                         (initialVelocity + undampedAngularFreq * initialDelta) *
@@ -82,7 +84,7 @@ function spring({ from = 0.0, to = 1.0, restSpeed = 2, restDelta = 0.01, ...opti
                 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 (to -
+                return (target -
                     (envelope *
                         ((initialVelocity +
                             dampingRatio * undampedAngularFreq * initialDelta) *
@@ -115,19 +117,19 @@ function spring({ from = 0.0, to = 1.0, restSpeed = 2, restDelta = 0.01, ...opti
                     }
                 }
                 const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
-                const isBelowDisplacementThreshold = Math.abs(to - current) <= restDelta;
+                const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
                 state.done =
                     isBelowVelocityThreshold && isBelowDisplacementThreshold;
             }
             else {
                 state.done = t >= duration;
             }
-            state.value = state.done ? to : current;
+            state.value = state.done ? target : current;
             return state;
         },
         flipTarget: () => {
             initialVelocity = -initialVelocity;
-            [from, to] = [to, from];
+            [origin, target] = [target, origin];
             createSpring();
         },
     };

package/dist/es/animation/utils/default-transitions.mjs

@@ -1,15 +1,13 @@
-import { isKeyframesTarget } from './is-keyframes-target.mjs';
-
 const underDampedSpring = () => ({
     type: "spring",
     stiffness: 500,
     damping: 25,
     restSpeed: 10,
 });
-const criticallyDampedSpring = (to) => ({
+const criticallyDampedSpring = (target) => ({
     type: "spring",
     stiffness: 550,
-    damping: to === 0 ? 2 * Math.sqrt(550) : 30,
+    damping: target === 0 ? 2 * Math.sqrt(550) : 30,
     restSpeed: 10,
 });
 const linearTween = () => ({
@@ -17,11 +15,10 @@ const linearTween = () => ({
     ease: "linear",
     duration: 0.3,
 });
-const keyframes = (values) => ({
+const keyframesTransition = {
     type: "keyframes",
     duration: 0.8,
-    values,
-});
+};
 const defaultTransitions = {
     x: underDampedSpring,
     y: underDampedSpring,
@@ -38,16 +35,14 @@ const defaultTransitions = {
     color: linearTween,
     default: criticallyDampedSpring,
 };
-const getDefaultTransition = (valueKey, to) => {
-    let transitionFactory;
-    if (isKeyframesTarget(to)) {
-        transitionFactory = keyframes;
+const getDefaultTransition = (valueKey, { keyframes }) => {
+    if (keyframes.length > 2) {
+        return keyframesTransition;
     }
     else {
-        transitionFactory =
-            defaultTransitions[valueKey] || defaultTransitions.default;
+        const factory = defaultTransitions[valueKey] || defaultTransitions.default;
+        return factory(keyframes[1]);
     }
-    return { to, ...transitionFactory(to) };
 };
 
 export { criticallyDampedSpring, getDefaultTransition, linearTween, underDampedSpring };

package/dist/es/animation/utils/keyframes.mjs

@@ -0,0 +1,41 @@
+import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.mjs';
+import { isAnimatable } from './is-animatable.mjs';
+import { isZero, getZeroUnit } from './transitions.mjs';
+
+function getKeyframes(value, valueName, target, transition) {
+    const isTargetAnimatable = isAnimatable(valueName, target);
+    let origin = transition.from !== undefined ? transition.from : value.get();
+    if (origin === "none" && isTargetAnimatable && typeof target === "string") {
+        /**
+         * If we're trying to animate from "none", try and get an animatable version
+         * of the target. This could be improved to work both ways.
+         */
+        origin = getAnimatableNone(valueName, target);
+    }
+    else if (isZero(origin) && typeof target === "string") {
+        origin = getZeroUnit(target);
+    }
+    else if (!Array.isArray(target) &&
+        isZero(target) &&
+        typeof origin === "string") {
+        target = getZeroUnit(origin);
+    }
+    /**
+     * If the target has been defined as a series of keyframes
+     */
+    if (Array.isArray(target)) {
+        /**
+         * Ensure an initial wildcard keyframe is hydrated by the origin.
+         * TODO: Support extra wildcard keyframes i.e [1, null, 0]
+         */
+        if (target[0] === null) {
+            target[0] = origin;
+        }
+        return target;
+    }
+    else {
+        return [origin, target];
+    }
+}
+
+export { getKeyframes };