How to Design an Animation | kciter.so<br>kciter.so devlog<br>Articles Bookshelf Thoughts

ESC

How to Design an Animation<br>Written on February 18, 2026 · 한국어 ·English<br>Animation Is a Graph<br>Math, the Toolkit for Animation<br>Easing and Bézier Curves<br>Exponential Approach<br>Spring Animation<br>Physics Simulation<br>Natural Direction Changes<br>Periodic Motion with Trigonometry<br>Sawtooth Waves

Designing an Animation<br>Split the Graph<br>What Does the Value Depend On?<br>Pipelining<br>Designing with State Transitions<br>Property Splitting<br>Randomness<br>Bidirectionality

What About Really Complex Animations?<br>Closing

Every so often you come across an animation on a website or in an app that catches your eye. Animation does more than add some fun. It helps people understand what is happening, makes the result of an interaction clear, and carries the personality of a brand.

Things are different when you’re the one who has to build it. You’ve probably watched a prototype video from a designer and wondered how on earth you were supposed to implement it. Or maybe you’ve had a motion pictured clearly in your head but no idea where to start turning it into code.

Animation, it turns out, can be designed . Motion that looks complicated is, once you break it down, a combination of simple state changes, and each of those state changes can be expressed mathematically. This article goes through how to decompose and design animation in a systematic way.

Animation Is a Graph

To design something, two conditions have to hold. You have to be able to reproduce it, and you have to be able to combine it. If a motion only exists as a feeling in your head, it is hard to recreate the same movement twice, and hard to weave several movements together in any organized way. So we need an engineering representation of motion, and a graph works well for this. Every animation can be expressed as a graph, and once you adopt that view, even complicated movement becomes something you can analyze and build systematically.

Think of a fade-in animation, where an element’s opacity goes from 0 to 1. Drawn as a graph, the horizontal axis is time and the vertical axis is opacity. For example, you could draw a graph that starts at 0 seconds, ends at 2 seconds, and climbs from 0 to 1 in between.

Fade-in — opacity goes from 0 to 1 over time

The same goes for movement. An element sliding from left to right can be drawn as a time-position graph, and an animation where something grows becomes a time-scale graph. The horizontal axis doesn’t have to be time, either. In a parallax effect, where elements appear as the page scrolls, the scroll offset becomes the horizontal axis. Whatever the animation, in the end it is a value changing according to some input , and that change can be drawn as a graph.

What matters here is that the shape of the graph determines the feel of the motion. Even with the same start and end points, the form of the curve can give a completely different impression. Producing that curve the way you want it is the core of animation design, and the tool for doing so is math.

Math, the Toolkit for Animation

So how do you make a graph with the shape you want? This is where math comes in. This section looks at the mathematical tools that come up often in animation and how they control the shape of the graph. Math may feel unfamiliar, but there’s no need to worry. You don’t need to understand the concepts in depth. What you want is a sense of how each tool changes the feel of the animation.

Easing and Bézier Curves

The simplest animation is linear, where the value changes at a constant speed from start to finish. But motion in the real world isn’t linear. A thrown ball is fast at first and gradually slows down, and a car starts off slowly and picks up speed. Easing functions are how this kind of natural acceleration and deceleration gets expressed.

An easing function takes a progress value between 0 and 1 and returns an adjusted progress value. ease-in starts slow and ends fast, while ease-out starts fast and ends slow. The most widely used way to express this mathematically is the cubic Bézier curve .

A cubic Bézier curve defines its shape with four control points. For easing, the start point (0, 0) and end point (1, 1) are fixed, so in practice you only adjust the two control points (x1, y1) and (x2, y2). The curve doesn’t pass through the control points. Instead, each control point pulls the curve toward itself, bending its path a bit like a magnet would.

So how does a curve get built from control points? The answer is linear interpolation, applied recursively . Linear interpolation between two points is simple. When the progress t is 0 you get the start point, when it’s 1 you get the end point, and when it’s 0.5 you get the exact midpoint.

function lerp(a, b, t) {<br>return a + (b - a) * t;<br>A Bézier curve repeats this interpolation over several stages. Suppose we have four control points, P0, P1, P2, and P3.

Interpolate between P0–P1, P1–P2, and P2–P3 at t, giving...