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 are two approaches that I can think of to make an easing function that's slower in the middle:

Vertex as the point of tangency

A traditional quadratic ease-in-out function has two parabolas meeting at their sides, but if they instead meet at their vertexes, it results in a middle easing.

Side

Vertex

Inverted function

Inverting the function results in the same curve, but mirrored and rotated by 90 degrees.

There are sites that provide inverse function calculators, such as:

https://www.wolframalpha.com/input?i=inverse+of+function

and

https://www.symbolab.com/solver/function-inverse-calculator