The Animator's Almanac: A visual guide to Webflow's default Easing Functions

We've put together this visual easing function guide / cloneable that was originally used internally when we wanted to quickly check what easing function would be best for a given interaction when Milk Moon Studio was just starting out with Webflow. We've decided to add a bit more detail on all the functions at the bottom of this page and share it with anyone needing a quick visual guide. The full post is here. For guides and cloneables check out our blog.

Linear
Ease
Ease In
Ease Out
Ease In Out
In Quad
In Cubic
In Quart
In Quint
In Sine
In Expo
In Circ
In Back
In elastic
Out Quad
Out Cubic
Out Quart
Out Quint
Out Sine
Out Expo
Out Circ
Out Bounce
Out Back
Out elastic
In Out Quad
In Out Cubic
In Out Quart
In Out Quint
In Out Sine
In Out Expo
In Out Circ
In Out Back
In Out elastic
Bounce
Bounce Past
Swing From To
Swing From
Swing To

What are easing functions and how to they work?

Easing functions are the secret sauce that adds life and rhythm to animations and transitions. They dictate how an animation progresses over time, providing that extra dash of realism, drama, or playfulness to interactions on a web page.

LINEAR (NONE)

Linear (none)

Origin & Meaning: As straightforward as a highway in the desert. Linear implies a uniform rate of change – no acceleration, no deceleration, just a steady pace from start to finish.

What it Does: Moves or fades objects at a constant speed. Perfect for those who appreciate simplicity and predictability in their animations.

EASE

Ease

Origin & Meaning: Think of easing into a hot bath. It starts slow, speeds up, and then slows down again, providing a smooth, comforting transition.

What it Does: Adds a natural feel to animations by starting slow, becoming faster in the middle, and then slowing down at the end. It’s the default go-to for a reason!

EASE IN

Ease In

Origin & Meaning: Like tiptoeing into that aforementioned bath, it’s all about beginning gently.

What it Does: Starts the animation slowly and then accelerates. Great for drawing attention to elements appearing on the screen.

EASE OUT

Ease Out

Origin & Meaning: The opposite of easing in – like finally relaxing fully into the bath.

What it Does: Begins more abruptly and decelerates to a smooth stop. Ideal for elements leaving the scene.

EASE IN OUT

Ease In Out

Origin & Meaning: Combines the best of both worlds – a gentle start and finish with a bit of zest in the middle.

What it Does: Starts and ends slowly, with acceleration in the middle. The jack-of-all-trades for transitions that need to feel dynamic yet smooth.

QUAD, CUBIC, QUART, QUINT, SINE, EXPO, CIRC, BACK, ELASTIC

In elastic

Origin & Meaning: These are mathematical functions that describe acceleration curves. Quad (quadratic), Cubic, Quart (quartic), Quint (quintic), Sine (sinusoidal), Expo (exponential), Circ (circular), Back (overshooting past the end and coming back), Elastic (like an elastic band stretching and snapping back).

What it Does: Each provides a unique acceleration pattern, from gentle (Quad) to extreme (Elastic). Use these to add sophistication and character to your animations.

SWING FROM TO, SWING FROM, SWING TO

Bounce

Origin & Meaning: Picture a pendulum or a swing – these interactions capture the essence of swinging motion, either from one side to the other, starting or ending with a swing.

What it Does: Adds an elegant, swinging motion to elements, creating a sense of rhythm and flow. Ideal for drawing attention in a subtle, sophisticated manner.

BOUNCE, BOUNCE PAST

Swing From To

Origin & Meaning: Just like a bouncing ball, these interactions mimic the physics of bouncing against a surface, with Bounce Past adding a bit of overshoot for drama.

What it Does: Creates a playful, engaging effect where elements bounce before settling into place. It adds life and energy to the page.