Slow in the middle easing function

Question

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 .

Answer 1

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