Skip to content

Add regression test for linear motion-value animation (#2826) #3727

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mattgperry wants to merge 1 commit into
base: main
Choose a base branch
from
+68 −0
Open

Add regression test for linear motion-value animation (#2826) #3727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions dev/react/src/tests/issue-2826-linear-motion-value.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { animate, motion, useMotionValue } from "framer-motion"
import { useEffect } from "react"

/**
* Reproduces the scenario from issue #2826:
* useMotionValue + animate(motionValue, [0, 1], { ease: "linear",
* type: "keyframes", times: [0, 1] }) wired to motion.div opacity.
* The animation should progress linearly across its duration.
*/
export const App = () => {
const opacity = useMotionValue(0)

useEffect(() => {
animate(opacity, [0, 1], {
duration: 10,
ease: "linear",
type: "keyframes",
times: [0, 1],
})
}, [])

return (
<motion.div
id="box"
style={{
width: 100,
height: 100,
background: "red",
opacity,
}}
/>
)
}
35 changes: 35 additions & 0 deletions packages/framer-motion/cypress/integration/issue-2826-linear-motion-value.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
describe("issue 2826: animate(motionValue) with ease: 'linear' renders linearly", () => {
it("opacity progresses linearly across the duration", () => {
const tolerance = 0.1
Copy link
Copy Markdown

@greptile-apps greptile-apps Bot May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Tolerance may be too wide to catch subtle regressions

A tolerance of 0.1 (±10 %) means the test passes as long as opacity is anywhere between 0.15–0.35, 0.40–0.60, and 0.65–0.85. A regression that replaced the linear ease with a mild ease-in or ease-out curve could produce values that fall inside those windows and go undetected. The wide band is understandable for wall-clock–based CI timing, but pairing it with cy.clock() / cy.tick() would allow a much tighter tolerance (e.g. 0.02) and make this a stronger regression guard without flakiness risk.


cy.visit("?test=issue-2826-linear-motion-value")
.wait(2500)
.get("#box")
.then(([$element]: any) => {
const opacity = parseFloat(
getComputedStyle($element).opacity
)
// 25% through 10s should be ~0.25
expect(opacity).to.be.greaterThan(0.25 - tolerance)
expect(opacity).to.be.lessThan(0.25 + tolerance)
})
.wait(2500)
.then(([$element]: any) => {
const opacity = parseFloat(
getComputedStyle($element).opacity
)
// 50% through 10s should be ~0.5
expect(opacity).to.be.greaterThan(0.5 - tolerance)
expect(opacity).to.be.lessThan(0.5 + tolerance)
})
Comment on lines +17 to +24
Copy link
Copy Markdown

@greptile-apps greptile-apps Bot May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Stale subject reuse for 50 % and 75 % checks

After the first .then() returns undefined, Cypress keeps the original jQuery subject from .get("#box") and passes it through the subsequent .wait()/.then() calls. This works correctly because $element is a live DOM reference and getComputedStyle reads the current value at call time — but the pattern is subtle. If this chain is ever refactored (e.g. an early return is added, or a cy.wrap() is inserted), the 2nd and 3rd .then() blocks could silently receive the wrong subject. Consider re-querying with .get("#box") before each check for clarity and resilience.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

.wait(2500)
.then(([$element]: any) => {
const opacity = parseFloat(
getComputedStyle($element).opacity
)
// 75% through 10s should be ~0.75
expect(opacity).to.be.greaterThan(0.75 - tolerance)
expect(opacity).to.be.lessThan(0.75 + tolerance)
})
})
})