javascriptanimation

Slow in the middle easing function


Is there a easing function that animates slower in the middle, and faster at the beginning and end?

The easing functions I've seen so far are: ease, ease-in, ease-out, ease-in-out.

ease seems pretty similar to ease-in-out, which slows the animation at the beginning and end. I kind of want the opposite of that.

I'm creating a javascript animation to animate properties that can't be animated by CSS, such as linear-gradient.


Solution

  • There isn't a standard predefined one like what you're describing. But you can create a custom animation with a custom 'cubic-bezier' ease.

    The alternative is to bring in a custom easing library

    https://developers.google.com/web/fundamentals/look-and-feel/animations/custom-easing?hl=en