search

motiondivision / motion

A modern animation library for React and JavaScript
https://motion.dev
MIT License
25.84k stars 850 forks source link

[BUG] easing linear combined with tween not being linear. #2826

Open a-dominiak opened 1 month ago

a-dominiak commented 1 month ago

2. Describe the bug

When I use animate function to linearly transform motionValue from 0 to 1, It does not behave correctly. In the given link I attached a square that should just animate opacity from 0 to 1 and it starts at 0, but at about 50% it flickers.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/framer-motion-keyframes-forked-5wnmqh?file=%2Fsrc%2Findex.tsx%3A14%2C68

4. Steps to reproduce

Steps to reproduce the behavior:

  1. create a useMotionValue
  2. create useEffect that changes that value
  3. base some motion element style on it
  4. It's not happening linearly

5. Expected behavior

The animation should be linear