From 639816adbb441269627f94757e332592f48c1de0 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Wed, 3 Nov 2021 16:20:10 +0100 Subject: [PATCH 1/3] 5.2.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a3a3a4a1f7..125621fc18 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "framer-motion", - "version": "5.1.0", + "version": "5.2.0", "description": "A simple and powerful React animation library", "main": "dist/framer-motion.cjs.js", "module": "dist/es/index.mjs", From 42cddc9d508228d5ed7ed7a875be728bcda69f02 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 5 Nov 2021 11:47:31 +0100 Subject: [PATCH 2/3] Fixing x unit conversion --- cypress/integration/unit-conversion.ts | 13 ++++++++++ .../Animation-between-value-types-x.tsx | 25 ++++++++++++++++++ dev/tests/unit-conversion.tsx | 26 +++++++++++++++++++ src/render/dom/utils/unit-conversion.ts | 16 ++++++++---- 4 files changed, 75 insertions(+), 5 deletions(-) create mode 100644 cypress/integration/unit-conversion.ts create mode 100644 dev/examples/Animation-between-value-types-x.tsx create mode 100644 dev/tests/unit-conversion.tsx diff --git a/cypress/integration/unit-conversion.ts b/cypress/integration/unit-conversion.ts new file mode 100644 index 0000000000..b133dd187e --- /dev/null +++ b/cypress/integration/unit-conversion.ts @@ -0,0 +1,13 @@ +describe("Unit conversion", () => { + it("Animate x from 0 to calc", () => { + cy.visit("?test=unit-conversion") + .wait(50) + .get("#box") + .trigger("click") + .wait(30) + .should(([$box]: any) => { + const { left } = $box.getBoundingClientRect() + expect(left).to.equal(150) + }) + }) +}) diff --git a/dev/examples/Animation-between-value-types-x.tsx b/dev/examples/Animation-between-value-types-x.tsx new file mode 100644 index 0000000000..738c0f0941 --- /dev/null +++ b/dev/examples/Animation-between-value-types-x.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import { motion, useCycle } from "@framer" + +/** + * An example of animating between different value types + */ + +export const App = () => { + const [x, cycleX] = useCycle(0, "calc(3 * var(--width))") + + return ( + 0.5 }} + style={{ + width: 100, + height: 100, + background: "white", + "--width": "100px", + }} + onClick={() => cycleX()} + /> + ) +} diff --git a/dev/tests/unit-conversion.tsx b/dev/tests/unit-conversion.tsx new file mode 100644 index 0000000000..ad47805f6f --- /dev/null +++ b/dev/tests/unit-conversion.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import { motion, useCycle } from "@framer" + +/** + * An example of animating between different value types + */ + +export const App = () => { + const [x, cycleX] = useCycle(0, "calc(3 * var(--width))") + + return ( + 0.5 }} + style={{ + width: 100, + height: 100, + background: "#ffaa00", + "--width": "100px", + }} + onClick={() => cycleX()} + id="box" + /> + ) +} diff --git a/src/render/dom/utils/unit-conversion.ts b/src/render/dom/utils/unit-conversion.ts index f883777d01..3a007745e0 100644 --- a/src/render/dom/utils/unit-conversion.ts +++ b/src/render/dom/utils/unit-conversion.ts @@ -4,7 +4,7 @@ import { isKeyframesTarget } from "../../../animation/utils/is-keyframes-target" import { invariant } from "hey-listen" import { MotionValue } from "../../../value" import { transformProps } from "../../html/utils/transform" -import { VisualElement } from "../../types" +import { ResolvedValues, VisualElement } from "../../types" import { findDimensionValueType } from "../value-types/dimensions" import { Box } from "../../../projection/geometry/types" @@ -121,6 +121,7 @@ const convertChangedValueTypes = ( const element = visualElement.getInstance() const elementComputedStyle = getComputedStyle(element) const { display } = elementComputedStyle + const origin: ResolvedValues = {} // If the element is currently set to display: "none", make it visible before // measuring the target bounding box @@ -131,6 +132,13 @@ const convertChangedValueTypes = ( ) } + /** + * Record origins before we render and update styles + */ + changedKeys.forEach((key) => { + origin[key] = positionalValues[key](originBbox, elementComputedStyle) + }) + // Apply the latest values (as set in checkAndConvertChangedValueTypes) visualElement.syncRender() @@ -140,10 +148,8 @@ const convertChangedValueTypes = ( // Restore styles to their **calculated computed style**, not their actual // originally set style. This allows us to animate between equivalent pixel units. const value = visualElement.getValue(key) as MotionValue - setAndResetVelocity( - value, - positionalValues[key](originBbox, elementComputedStyle) - ) + + setAndResetVelocity(value, origin[key]) target[key] = positionalValues[key](targetBbox, elementComputedStyle) }) From 1d55565a6a83076ed58e9dc622d30681b6ecb776 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Fri, 5 Nov 2021 11:49:49 +0100 Subject: [PATCH 3/3] Updating changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b4ccec580..930aaf3a06 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/). +## [5.2.1] 2021-11-05 + +### Fixed + +- Fixing unit conversion for `x` and `y` styles. [Issue](https://github.com/framer/motion/issues/1336) + ## [5.2.0] 2021-11-04 ### Added