From b88b0810c434793c1da7a045c24b2a4a6231787a Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 23 Dec 2022 08:25:50 +0000 Subject: [PATCH] Fixing defaults for hardware-accelerated animations (#1845) * Update * Updating default * Updating test * updating lockfile * Updating duration --- CHANGELOG.md | 6 +++++ .../utils/__tests__/transitions.test.ts | 1 + .../src/animation/utils/transitions.ts | 3 ++- .../waapi/create-accelerated-animation.ts | 2 +- .../src/motion/__tests__/waapi.test.tsx | 27 +++++++++++++------ yarn.lock | 10 +++---- 6 files changed, 34 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 930053e9fd..98d816a1bc 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/framer-motion/src/animation/utils/__tests__/transitions.test.ts b/packages/framer-motion/src/animation/utils/__tests__/transitions.test.ts index c52ed69582..c4f37ce3e9 100644 --- a/packages/framer-motion/src/animation/utils/__tests__/transitions.test.ts +++ b/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) diff --git a/packages/framer-motion/src/animation/utils/transitions.ts b/packages/framer-motion/src/animation/utils/transitions.ts index 965ea7b58c..2e25b365e2 100644 --- a/packages/framer-motion/src/animation/utils/transitions.ts +++ b/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 } diff --git a/packages/framer-motion/src/animation/waapi/create-accelerated-animation.ts b/packages/framer-motion/src/animation/waapi/create-accelerated-animation.ts index f456b47b25..90b06c893a 100644 --- a/packages/framer-motion/src/animation/waapi/create-accelerated-animation.ts +++ b/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. diff --git a/packages/framer-motion/src/motion/__tests__/waapi.test.tsx b/packages/framer-motion/src/motion/__tests__/waapi.test.tsx index 8a3f1634b4..61717572fe 100644 --- a/packages/framer-motion/src/motion/__tests__/waapi.test.tsx +++ b/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() const Component = () => ( { rerender() 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, diff --git a/yarn.lock b/yarn.lock index 3a9b5a5ade..c9b390d835 100644 --- a/yarn.lock +++ b/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: