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.
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)
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
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
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
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
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
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
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
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.