A visual guide to Easing Functions in Webflow

We’ve had this easing functions project sitting in our account for a while. We used it as a nice visual guide when we were just starting off with Webflow. When stumbling upon it the other day it seemed like a good idea to flesh it out a bit and share it as a visual guide to the default easing functions in Webflow. Below you’ll find a visual guide, as well as link to a more fleshed out cloneable, and a list of the available easing functions with a description of what they do. But lets kick it off with a bit of the history of easing functions.

The Mathematical Roots

At the heart of easing functions lies a rich mathematical foundation. The concept of easing can be traced back to the study of physics and calculus, where the principles of acceleration and deceleration govern the movement of objects in the real world. Mathematicians and physicists developed formulas to describe these natural motions, laying the groundwork for what would eventually be applied in digital animation. The quadratic, cubic, quartic, and quintic functions, among others, offer a mathematical basis for simulating the subtleties of movement and speed, enabling animations to move beyond the limitations of linear progression.

The Evolution in Animation

The transition from mathematics to animation began with traditional, hand-drawn techniques. Early animators, such as those in the pioneering days of Disney, intuitively applied the principles of easing to bring their creations to life, long before the term "easing" was formally coined. They observed real-world motion, capturing its essence frame by frame, to create animations that flowed naturally and conveyed emotion and character. This meticulous attention to the dynamics of movement laid the foundation for easing functions, although it was all done manually at the time.

The Digital Revolution

With the advent of computer graphics and digital animation, the principles of easing found new ground to flourish. The digital era allowed for the precise control and manipulation of motion curves, enabling animators and designers to implement complex mathematical functions with ease (pun intended). Computer software began to incorporate these easing functions, providing users with predefined options such as "ease-in," "ease-out," and "elastic" to animate objects in a visually appealing manner.

Easing Functions in User Interface Design

The application of easing functions extended beyond traditional animation, finding a crucial role in user interface (UI) and user experience (UX) design. As digital interfaces became more interactive, designers recognised the importance of easing functions in making transitions feel more natural and intuitive. The smooth expansion of a menu, the bounce of a notification, or the fade-in of a dialogue box—all these interactions benefited from easing functions, enhancing the user's experience by mimicking the fluidity of the natural world.

Today's Digital Canvas

Today, easing functions are an indispensable tool in the digital designer's toolkit, seamlessly integrated into web design platforms like Webflow, animation libraries, and UI design software. They empower designers to create immersive, engaging digital experiences that capture the user's imagination and hold their attention. From the mathematical equations of the past to the interactive web pages of today, easing functions have traveled through time, evolving and adapting, yet their core mission remains the same: to breathe life into the digital world, making it as rich and dynamic as the world outside our windows.

You can scroll through the interaction above or view the full project and cloneable here.

Finally we get to the meat, what does each easing function do?

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

Origin & Meaning: Quad originates from "quadratic," referring to a polynomial of the second degree. It's like taking a gentle walk that gradually picks up pace.
What it Does: Animations with a QUAD easing function start off slow and accelerate smoothly as they progress, following a quadratic curve. It's subtler than some of its more dramatic counterparts, perfect for soft transitions and simple movements.

CUBIC

Origin & Meaning: Stemming from "cubic," this function relates to a polynomial of the third degree. Imagine a car smoothly accelerating from a stop sign - it starts slowly but picks up speed more noticeably than QUAD.
What it Does: CUBIC animations begin even more gently than QUAD but accelerate faster, creating a more pronounced curve. This makes them great for drawing attention while still maintaining a smooth progression.

QUART

Origin & Meaning: Quart comes from "quartic," a polynomial of the fourth degree. This is like a sprinter exploding out of the blocks, with a gradual buildup leading to a swift acceleration.
What it Does: With a QUART easing function, animations start very slowly and then quickly pick up speed, creating a steep acceleration curve. It's ideal for dynamic movements that need to emphasize a significant change or arrival.

QUINT

Origin & Meaning: Quint is derived from "quintic," relating to a polynomial of the fifth degree. Picture a rocket launch: a momentary pause on the launchpad before a powerful ascent.
What it Does: QUINT animations have the slowest start of this group but then accelerate dramatically, offering a very sharp curve. This function is perfect for dramatic entrances or when you want to create a strong visual impact.

SINE

Origin & Meaning: Sine is based on the mathematical sine wave, known for its smooth and oscillating nature. It's like the gentle ebb and flow of waves on a beach.
What it Does: SINE easing provides a smooth, harmonic oscillation in the speed of the animation. This creates a natural, organic movement that's soothing and pleasing to the eye, great for subtle transitions.

EXPO

Origin & Meaning: Expo is short for "exponential," indicating growth at an increasingly rapid rate. Imagine the accelerating curve of a roller coaster as it races downwards.
What it Does: EXPO animations start almost imperceptibly and then explode into motion, providing an extremely steep acceleration curve. This function is ideal for fast-paced, high-energy transitions that need to grab attention quickly.

CIRC

Origin & Meaning: Circ relates to "circular," embodying the motion of moving in or out along a circular path. Think of the smooth arc of a ball being tossed through the air.
What it Does: CIRC easing animations move with the smoothness and precision of a circular arc, starting slow and speeding up in a manner that feels both natural and elegant. It's perfect for elements that need to move or transition with a sense of grace and fluidity.

BACK

Origin & Meaning: Back implies a motion that goes beyond the start or end point and then returns, like pulling back a slingshot before releasing.
What it Does: BACK easing causes animations to overshoot their target before settling into place, creating a playful bounce-back effect. It adds a lively, elastic quality to transitions, making them feel more dynamic and engaging.

ELASTIC

Origin & Meaning: Elastic, as the name suggests, embodies the behavior of an elastic band stretching and snapping back. It’s the drama queen of easing functions, offering a showy, exaggerated motion.
What it Does: ELASTIC animations stretch and bounce with a lively, exaggerated elasticity, making elements feel as though they're moving with the energy and flexibility of a rubber band. This function is perfect for eye-catching, vibrant animations that add a touch of whimsy and fun.

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.

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.

And that’s basically that, the history of easing functions is a fascinating saga of innovation, an intertwining of art and science, reflecting humanity's enduring quest to replicate the beauty and complexity of motion in our creations