Adding duration prop

Author: mattgperry

packages/framer-motion/src/animation/GroupPlaybackControls.ts

@@ -1,6 +1,6 @@
 import { AnimationPlaybackControls } from "./types"
 
-type PropNames = "time" | "speed"
+type PropNames = "time" | "speed" | "duration"
 
 export class GroupPlaybackControls implements AnimationPlaybackControls {
     animations: AnimationPlaybackControls[]
@@ -44,6 +44,14 @@ export class GroupPlaybackControls implements AnimationPlaybackControls {
         this.setAll("speed", speed)
     }
 
+    get duration() {
+        let max = 0
+        for (let i = 0; i < this.animations.length; i++) {
+            max = Math.max(max, this.animations[i].duration)
+        }
+        return max
+    }
+
     private runAll(
         methodName: keyof Omit<AnimationPlaybackControls, PropNames | "then">
     ) {

packages/framer-motion/src/animation/__tests__/GroupPlaybackControls.test.ts

@@ -7,6 +7,7 @@ function createTestAnimationControls(
     return {
         time: 1,
         speed: 1,
+        duration: 10,
         stop: () => {},
         play: () => {},
         pause: () => {},
@@ -193,4 +194,20 @@ describe("GroupPlaybackControls", () => {
         expect(a.speed).toEqual(-1)
         expect(b.speed).toEqual(-1)
     })
+
+    test("Gets max duration", async () => {
+        const a = createTestAnimationControls({
+            duration: 3,
+        })
+        const b = createTestAnimationControls({
+            duration: 2,
+        })
+        const c = createTestAnimationControls({
+            duration: 1,
+        })
+
+        const controls = new GroupPlaybackControls([a, b, c])
+
+        expect(controls.duration).toEqual(3)
+    })
 })

packages/framer-motion/src/animation/__tests__/animate-waapi.test.tsx

@@ -118,6 +118,15 @@ describe("animate() with WAAPI", () => {
         )
     })
 
+    test("Returns duration correctly", async () => {
+        const animation = animate(
+            document.createElement("div"),
+            { opacity: 1 },
+            { duration: 2, opacity: { duration: 3 } }
+        )
+        expect(animation.duration).toEqual(3)
+    })
+
     test("Can accept timeline sequences", async () => {
         const a = document.createElement("div")
         const b = document.createElement("div")

packages/framer-motion/src/animation/animators/__tests__/instant.test.ts

@@ -74,4 +74,18 @@ describe("instantAnimation", () => {
         expect(onUpdate).toBeCalledWith(1)
         expect(onComplete).toBeCalled()
     })
+
+    test("Returns duration: 0", async () => {
+        const animation = createInstantAnimation({
+            delay: 0,
+            keyframes: [0, 1],
+        })
+        expect(animation.duration).toEqual(0)
+
+        const animationWithDelay = createInstantAnimation({
+            delay: 0.2,
+            keyframes: [0, 1],
+        })
+        expect(animationWithDelay.duration).toEqual(0)
+    })
 })

packages/framer-motion/src/animation/animators/instant.ts

@@ -4,7 +4,7 @@ import { noop } from "../../utils/noop"
 
 export function createInstantAnimation<V>({
     keyframes,
-    delay: delayBy,
+    delay,
     onUpdate,
     onComplete,
 }: ValueAnimationOptions<V>): AnimationPlaybackControls {
@@ -22,6 +22,7 @@ export function createInstantAnimation<V>({
         return {
             time: 0,
             speed: 1,
+            duration: 0,
             play: noop<void>,
             pause: noop<void>,
             stop: noop<void>,
@@ -34,10 +35,11 @@ export function createInstantAnimation<V>({
         }
     }
 
-    return delayBy
+    return delay
         ? animateValue({
               keyframes: [0, 1],
-              duration: delayBy,
+              duration: 0,
+              delay,
               onComplete: setValue,
           })
         : setValue()

packages/framer-motion/src/animation/animators/js/__tests__/animate.test.ts

@@ -1242,4 +1242,56 @@ describe("animate", () => {
 
         await animation
     })
+
+    test("Correctly returns duration", async () => {
+        expect(
+            animateValue({
+                keyframes: [0, 100],
+                duration: 1000,
+            }).duration
+        ).toEqual(1)
+    })
+
+    test("Correctly returns duration when delay is defined", () => {
+        expect(
+            animateValue({
+                keyframes: [0, 100],
+                delay: 1000,
+                duration: 1000,
+            }).duration
+        ).toEqual(1)
+    })
+
+    test("Correctly returns duration when repeat is defined", () => {
+        expect(
+            animateValue({
+                keyframes: [0, 100],
+                delay: 1000,
+                duration: 1000,
+                repeat: Infinity,
+            }).duration
+        ).toEqual(1)
+    })
+
+    test("Correctly returns duration when animation is spring", () => {
+        expect(
+            animateValue({
+                keyframes: [0, 100],
+                delay: 1000,
+                duration: 1000,
+                type: "spring",
+            }).duration
+        ).toEqual(1)
+    })
+
+    test("Correctly returns duration when animation is dynamic spring", () => {
+        expect(
+            animateValue({
+                keyframes: [0, 100],
+                stiffness: 200,
+                damping: 10,
+                type: "spring",
+            }).duration
+        ).toEqual(1.2)
+    })
 })

packages/framer-motion/src/animation/animators/js/index.ts

@@ -158,7 +158,9 @@ export function animateValue<V = number>({
         }
 
         // Rebase on delay
-        time = Math.max(time - delay, 0)
+        const timeWithDelay = time - delay
+        const isInDelayPhase = timeWithDelay < 0
+        time = Math.max(timeWithDelay, 0)
 
         /**
          * If this animation has finished, set the current time
@@ -229,15 +231,22 @@ export function animateValue<V = number>({
             elapsed = p * resolvedDuration
         }
 
-        const state = frameGenerator.next(elapsed)
+        /**
+         * If we're in negative time, set state as the initial keyframe.
+         * This prevents delay: x, duration: 0 animations from finishing
+         * instantly.
+         */
+        const state = isInDelayPhase
+            ? { done: false, value: keyframes[0] }
+            : frameGenerator.next(elapsed)
 
         if (mapNumbersToKeyframes) {
             state.value = mapNumbersToKeyframes(state.value)
         }
 
         let { done } = state
 
-        if (calculatedDuration !== null) {
+        if (!isInDelayPhase && calculatedDuration !== null) {
             done = time >= totalDuration
         }
 
@@ -323,6 +332,14 @@ export function animateValue<V = number>({
                 startTime = animationDriver.now() - newTime / speed
             }
         },
+        get duration() {
+            const duration =
+                generator.calculatedDuration === null
+                    ? calculateDuration(generator)
+                    : generator.calculatedDuration
+
+            return millisecondsToSeconds(duration)
+        },
         get speed() {
             return speed
         },

packages/framer-motion/src/animation/animators/waapi/create-accelerated-animation.ts

@@ -169,6 +169,9 @@ export function createAcceleratedAnimation(
         set speed(newSpeed: number) {
             animation.playbackRate = newSpeed
         },
+        get duration() {
+            return millisecondsToSeconds(duration)
+        },
         play: () => {
             if (hasStopped) return
             animation.play()

packages/framer-motion/src/animation/interfaces/motion-value.ts

@@ -73,19 +73,6 @@ export const animateMotionValue = (
             },
         }
 
-        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)
-        }
-
         /**
          * If there's no transition defined for this value, we can generate
          * unqiue transition settings for this value.
@@ -110,6 +97,19 @@ export const animateMotionValue = (
             options.repeatDelay = secondsToMilliseconds(options.repeatDelay)
         }
 
+        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)
+        }
+
         /**
          * Animate via WAAPI if possible.
          */

packages/framer-motion/src/animation/types.ts

@@ -74,6 +74,7 @@ export type ElementOrSelector =
 export interface AnimationPlaybackControls {
     time: number
     speed: number
+    duration: number
     stop: () => void
     play: () => void
     pause: () => void