From 0bcd83e2812d377e41f29ada55e3e3f22f4ea00c Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Wed, 14 Dec 2022 15:57:30 +0100 Subject: [PATCH 1/5] Fixing easing error --- CHANGELOG.md | 6 ++ .../src/animation/waapi/easing.ts | 24 ++++- .../src/animation/waapi/index.ts | 4 +- .../src/motion/__tests__/waapi.test.tsx | 87 +++++++++++++++++++ 4 files changed, 118 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 70725e1ffb..20a5f5b7c3 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. +## [7.9.1] 2022-12-14 + +### Fixed + +- Fixing mapping Framer Motion easing names to WAAPI. + ## [7.9.0] 2022-12-14 ### Added diff --git a/packages/framer-motion/src/animation/waapi/easing.ts b/packages/framer-motion/src/animation/waapi/easing.ts index 419f8235b4..616dc7c8f0 100644 --- a/packages/framer-motion/src/animation/waapi/easing.ts +++ b/packages/framer-motion/src/animation/waapi/easing.ts @@ -1,4 +1,26 @@ -import { BezierDefinition } from "../../easing/types" +import { BezierDefinition, EasingDefinition } from "../../easing/types" +import { camelToDash } from "../../render/dom/utils/camel-to-dash" export const cubicBezierAsString = ([a, b, c, d]: BezierDefinition) => `cubic-bezier(${a}, ${b}, ${c}, ${d})` + +const validWaapiEasing = new Set([ + "linear", + "ease-in", + "ease-out", + "ease-in-out", +]) + +export function mapEasingName(easingName: string): string { + const name = camelToDash(easingName) + return validWaapiEasing.has(name) ? name : "ease" +} + +export function mapEasingToNativeEasing( + easing?: EasingDefinition +): string | undefined { + if (!easing) return undefined + return Array.isArray(easing) + ? cubicBezierAsString(easing) + : mapEasingName(easing) +} diff --git a/packages/framer-motion/src/animation/waapi/index.ts b/packages/framer-motion/src/animation/waapi/index.ts index b7b743f3dd..360ebeb89d 100644 --- a/packages/framer-motion/src/animation/waapi/index.ts +++ b/packages/framer-motion/src/animation/waapi/index.ts @@ -1,4 +1,4 @@ -import { cubicBezierAsString } from "./easing" +import { mapEasingToNativeEasing } from "./easing" import { NativeAnimationOptions } from "./types" export function animateStyle( @@ -19,7 +19,7 @@ export function animateStyle( { delay, duration, - easing: Array.isArray(ease) ? cubicBezierAsString(ease) : ease, + easing: mapEasingToNativeEasing(ease), fill: "both", iterations: repeat + 1, direction: repeatType === "reverse" ? "alternate" : "normal", diff --git a/packages/framer-motion/src/motion/__tests__/waapi.test.tsx b/packages/framer-motion/src/motion/__tests__/waapi.test.tsx index d7fef3ad11..c549032e04 100644 --- a/packages/framer-motion/src/motion/__tests__/waapi.test.tsx +++ b/packages/framer-motion/src/motion/__tests__/waapi.test.tsx @@ -74,6 +74,93 @@ describe("WAAPI animations", () => { ) }) + test("Maps 'easeIn' to 'ease-in'", () => { + const ref = createRef() + const Component = () => ( + + ) + const { rerender } = render() + rerender() + + expect(ref.current!.animate).toBeCalled() + expect(ref.current!.animate).toBeCalledWith( + { opacity: [0, 1], offset: undefined }, + { + easing: "ease-in", + delay: -0, + duration: 0.3, + direction: "normal", + fill: "both", + iterations: 1, + } + ) + }) + + test("Maps 'easeOut' to 'ease-out'", () => { + const ref = createRef() + const Component = () => ( + + ) + const { rerender } = render() + rerender() + + expect(ref.current!.animate).toBeCalled() + expect(ref.current!.animate).toBeCalledWith( + { opacity: [0, 1], offset: undefined }, + { + easing: "ease-out", + delay: -0, + duration: 0.3, + direction: "normal", + fill: "both", + iterations: 1, + } + ) + }) + + test("Maps 'easeInOut' to 'ease-in-out'", () => { + const ref = createRef() + const Component = () => ( + + ) + const { rerender } = render() + rerender() + + expect(ref.current!.animate).toBeCalled() + expect(ref.current!.animate).toBeCalledWith( + { opacity: [0, 1], offset: undefined }, + { + easing: "ease-in-out", + delay: -0, + duration: 0.3, + direction: "normal", + fill: "both", + iterations: 1, + } + ) + }) + test("WAAPI is called with pre-generated spring keyframes", () => { const ref = createRef() const Component = () => ( From a1a394854eeb2e9bb854b004b24a5fadbb3e010f Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Wed, 14 Dec 2022 15:58:54 +0100 Subject: [PATCH 2/5] Adding tests --- dev/examples/WAAPI-background-color.tsx | 23 +++++++++++++ .../src/motion/__tests__/waapi.test.tsx | 33 +++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 dev/examples/WAAPI-background-color.tsx diff --git a/dev/examples/WAAPI-background-color.tsx b/dev/examples/WAAPI-background-color.tsx new file mode 100644 index 0000000000..e58f890292 --- /dev/null +++ b/dev/examples/WAAPI-background-color.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import { useState } from "react" +import { motion } from "framer-motion" + +const style = { + width: 100, + height: 100, + background: "white", +} + +export const App = () => { + const [state, setState] = useState(false) + + return ( + setState(!state)} + transition={{ duration: 1 }} + style={style} + /> + ) +} diff --git a/packages/framer-motion/src/motion/__tests__/waapi.test.tsx b/packages/framer-motion/src/motion/__tests__/waapi.test.tsx index c549032e04..bf2c8819ac 100644 --- a/packages/framer-motion/src/motion/__tests__/waapi.test.tsx +++ b/packages/framer-motion/src/motion/__tests__/waapi.test.tsx @@ -161,6 +161,39 @@ describe("WAAPI animations", () => { ) }) + /** + * TODO: Wait for comments and either bump these back to the main thread, + * generate keyframes, or generate linear() easing. + */ + test("Maps remaining easings to 'ease'", () => { + const ref = createRef() + const Component = () => ( + + ) + const { rerender } = render() + rerender() + + expect(ref.current!.animate).toBeCalled() + expect(ref.current!.animate).toBeCalledWith( + { opacity: [0, 1], offset: undefined }, + { + easing: "ease", + delay: -0, + duration: 0.3, + direction: "normal", + fill: "both", + iterations: 1, + } + ) + }) + test("WAAPI is called with pre-generated spring keyframes", () => { const ref = createRef() const Component = () => ( From 488aacee48da8dc0689fe37e533614dc26ac246d Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Wed, 14 Dec 2022 16:00:13 +0100 Subject: [PATCH 3/5] Latest --- packages/framer-motion/src/motion/__tests__/waapi.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/framer-motion/src/motion/__tests__/waapi.test.tsx b/packages/framer-motion/src/motion/__tests__/waapi.test.tsx index bf2c8819ac..d7a565878a 100644 --- a/packages/framer-motion/src/motion/__tests__/waapi.test.tsx +++ b/packages/framer-motion/src/motion/__tests__/waapi.test.tsx @@ -163,7 +163,7 @@ describe("WAAPI animations", () => { /** * TODO: Wait for comments and either bump these back to the main thread, - * generate keyframes, or generate linear() easing. + * generate keyframes, generate linear() easing, or create similar cubic beziers. */ test("Maps remaining easings to 'ease'", () => { const ref = createRef() From 00ca3c43f5901b4749a1cd43e18f1b8a7376cb13 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Wed, 14 Dec 2022 16:01:08 +0100 Subject: [PATCH 4/5] Running all tests --- packages/framer-motion/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/framer-motion/package.json b/packages/framer-motion/package.json index b47bda1d78..b8e92d0b62 100644 --- a/packages/framer-motion/package.json +++ b/packages/framer-motion/package.json @@ -39,7 +39,7 @@ "clean": "rm -rf types dist lib", "test": "yarn test-server && yarn test-client", "test-ci": "yarn test", - "test-client": "jest --config jest.config.json --max-workers=2 src/motion/__tests__/waapi.test.tsx", + "test-client": "jest --config jest.config.json --max-workers=2", "test-server": "jest --config jest.config.ssr.json ", "test-watch": "jest --watch --coverage --coverageReporters=lcov --config jest.config.json", "test-appear": "yarn run collect-appear-tests && start-server-and-test 'pushd ../../; python -m SimpleHTTPServer; popd' http://0.0.0.0:8000 'cypress run -s cypress/integration/appear.chrome.ts --config baseUrl=http://localhost:8000/'", From 0477e6e777e91d59428d683c94bc1ff5e7422435 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Wed, 14 Dec 2022 16:02:13 +0100 Subject: [PATCH 5/5] Updating lockfile --- yarn.lock | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/yarn.lock b/yarn.lock index a875cebf38..56d31770d0 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: ^7.8.1 - framer-motion-3d: ^7.8.1 + framer-motion: ^7.9.0 + framer-motion-3d: ^7.9.0 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@^7.8.1, framer-motion-3d@workspace:packages/framer-motion-3d": +"framer-motion-3d@^7.9.0, 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: ^7.8.1 + framer-motion: ^7.9.0 react-merge-refs: ^2.0.1 peerDependencies: "@react-three/fiber": ^8.2.2 @@ -7993,7 +7993,7 @@ __metadata: languageName: unknown linkType: soft -"framer-motion@^7.8.1, framer-motion@workspace:packages/framer-motion": +"framer-motion@^7.9.0, framer-motion@workspace:packages/framer-motion": version: 0.0.0-use.local resolution: "framer-motion@workspace:packages/framer-motion" dependencies: