search

motiondivision / motion

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

Support for `linear()` easing function #2812

Closed mattgperry closed 1 month ago

mattgperry commented 1 month ago

Currently, when a WAAPI animation is defined with an easing function:

animate(
  element,
  { opacity: 0 },
  { ease: (p) => p ** p }
)

Or an easing name not supported by WAAPI:

animate(
  element,
  { opacity: 0 },
  { ease: "anticipate" }
)

Then Motion will pre-generate keyframes for this animation and run it with linear easing.

This can have poor performance characteristics: https://issues.chromium.org/issues/41491098

Likewise for complex values like clip-path and filter this can have the overhead of number -> string conversion.

This PR adds support for the linear() easing function. So when an easing isn't supported by WAAPI, we generate a linear() easing function instead of pre-generating keyframes.