jquery easing graphs

Question

Just found the illustration (graphical) of jQuery Easing plugin http://james.padolsey.com/demos/jquery/easing/

What does these graphs exactly represent.

I tried to work/analyze the Easing Plugin several times, but I never understand how it really functions

Can someone explain me how to figure it out

Answer 1

It's the initial velocity, middle velocity and final velocity of an animation.

Answer 2

Read the paragraph - it explains what the graphs represent.

Answer 3

Think of it this way...

• The bottom left corner of the box is the starting point of the animation.
• The right side is the end point of the animation. The higher up, the further from the starting point.
• The length of the bottom (or top) displays how much of the total animation time has passed.
• The easing function determines how to animate the element within the distance over the set amount of animation time between the two points, or rate which is distance/time.

So, if you see a horizontal line plotted or a curve approach a horizontal line, then there won't be any animation (or minimal) as the distance hasn't changed over time.

And the steeper the line (up or down), the faster the element is moving across the distance.