Fixing defaults for hardware-accelerated animations

CHANGELOG.md

@@ -4,6 +4,12 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [8.0.2] 2022-12-23
+
+### Fixed
+
+-   Fixing defaults for hardware-accelerated animations.
+
 ## [8.0.1] 2022-12-21
 
 ### Added

packages/framer-motion/src/animation/utils/__tests__/transitions.test.ts

@@ -5,6 +5,7 @@ describe("isTransitionDefined", () => {
         expect(isTransitionDefined({})).toBe(false)
         expect(isTransitionDefined({ when: "beforeChildren" })).toBe(false)
         expect(isTransitionDefined({ delay: 0 })).toBe(false)
+        expect(isTransitionDefined({ elapsed: 0 })).toBe(false)
         expect(isTransitionDefined({ duration: 1 })).toBe(true)
         expect(isTransitionDefined({ delay: 0, duration: 1 })).toBe(true)
         expect(isTransitionDefined({ type: "tween" })).toBe(true)

packages/framer-motion/src/animation/utils/transitions.ts

@@ -16,8 +16,9 @@ export function isTransitionDefined({
     repeatType,
     repeatDelay,
     from,
+    elapsed,
     ...transition
-}: Transition) {
+}: Transition & { elapsed?: number }) {
     return !!Object.keys(transition).length
 }
 

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

@@ -19,7 +19,7 @@ export function createAcceleratedAnimation(
     valueName: string,
     { onUpdate, onComplete, ...options }: AnimationOptions
 ) {
-    let { keyframes, duration = 0.3, elapsed = 0, ease } = options
+    let { keyframes, duration = 300, elapsed = 0, ease } = options
 
     /**
      * If this animation needs pre-generated keyframes then generate.

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

@@ -25,7 +25,7 @@ afterEach(() => {
 })
 
 describe("WAAPI animations", () => {
-    test("opacity animates with WAAPI", () => {
+    test("opacity animates with WAAPI at default settings", () => {
         const ref = createRef<HTMLDivElement>()
         const Component = () => (
             <motion.div
@@ -38,6 +38,17 @@ describe("WAAPI animations", () => {
         rerender(<Component />)
 
         expect(ref.current!.animate).toBeCalled()
+        expect(ref.current!.animate).toBeCalledWith(
+            { opacity: [0, 1], offset: undefined },
+            {
+                delay: -0,
+                duration: 300,
+                easing: "linear",
+                iterations: 1,
+                direction: "normal",
+                fill: "both",
+            }
+        )
     })
 
     test("WAAPI is called with expected arguments", () => {
@@ -95,7 +106,7 @@ describe("WAAPI animations", () => {
             {
                 easing: "ease-in",
                 delay: -0,
-                duration: 0.3,
+                duration: 300,
                 direction: "normal",
                 fill: "both",
                 iterations: 1,
@@ -124,7 +135,7 @@ describe("WAAPI animations", () => {
             {
                 easing: "ease-out",
                 delay: -0,
-                duration: 0.3,
+                duration: 300,
                 direction: "normal",
                 fill: "both",
                 iterations: 1,
@@ -153,7 +164,7 @@ describe("WAAPI animations", () => {
             {
                 easing: "ease-in-out",
                 delay: -0,
-                duration: 0.3,
+                duration: 300,
                 direction: "normal",
                 fill: "both",
                 iterations: 1,
@@ -182,7 +193,7 @@ describe("WAAPI animations", () => {
             {
                 easing: "cubic-bezier(0, 0.65, 0.55, 1)",
                 delay: -0,
-                duration: 0.3,
+                duration: 300,
                 direction: "normal",
                 fill: "both",
                 iterations: 1,
@@ -211,7 +222,7 @@ describe("WAAPI animations", () => {
             {
                 easing: "cubic-bezier(0.55, 0, 1, 0.45)",
                 delay: -0,
-                duration: 0.3,
+                duration: 300,
                 direction: "normal",
                 fill: "both",
                 iterations: 1,
@@ -240,7 +251,7 @@ describe("WAAPI animations", () => {
             {
                 easing: "cubic-bezier(0.31, 0.01, 0.66, -0.59)",
                 delay: -0,
-                duration: 0.3,
+                duration: 300,
                 direction: "normal",
                 fill: "both",
                 iterations: 1,
@@ -269,7 +280,7 @@ describe("WAAPI animations", () => {
             {
                 easing: "cubic-bezier(0.33, 1.53, 0.69, 0.99)",
                 delay: -0,
-                duration: 0.3,
+                duration: 300,
                 direction: "normal",
                 fill: "both",
                 iterations: 1,

yarn.lock

@@ -7909,8 +7909,8 @@ __metadata:
     cache-loader: ^1.2.5
     convert-tsconfig-paths-to-webpack-aliases: ^0.9.2
     fork-ts-checker-webpack-plugin: ^6.2.0
-    framer-motion: ^8.0.0
-    framer-motion-3d: ^8.0.0
+    framer-motion: ^8.0.1
+    framer-motion-3d: ^8.0.1
     path-browserify: ^1.0.1
     react: ^18.2.0
     react-dom: ^18.2.0
@@ -7976,14 +7976,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"framer-motion-3d@^8.0.0, framer-motion-3d@workspace:packages/framer-motion-3d":
+"framer-motion-3d@^8.0.1, framer-motion-3d@workspace:packages/framer-motion-3d":
   version: 0.0.0-use.local
   resolution: "framer-motion-3d@workspace:packages/framer-motion-3d"
   dependencies:
     "@react-three/fiber": ^8.2.2
     "@react-three/test-renderer": ^9.0.0
     "@rollup/plugin-commonjs": ^22.0.1
-    framer-motion: ^8.0.0
+    framer-motion: ^8.0.1
     react-merge-refs: ^2.0.1
   peerDependencies:
     "@react-three/fiber": ^8.2.2
@@ -7993,7 +7993,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"framer-motion@^8.0.0, framer-motion@workspace:packages/framer-motion":
+"framer-motion@^8.0.1, framer-motion@workspace:packages/framer-motion":
   version: 0.0.0-use.local
   resolution: "framer-motion@workspace:packages/framer-motion"
   dependencies: