The first animation I shipped didn’t animate. A panel jumped from one edge of the screen to the other with nothing in between, because I set its final position directly instead of asking where it should be partway there. The fix was one line: a + (b - a) * t.
That line is linear interpolation. It is the most-used piece of maths in motion, and almost everything else you animate sits on top of it. Easing bends the t. Distance decides when things react. The unit circle handles anything that loops. Summation runs the whole thing across a field of particles.
All five demos are draggable, because the maths is the part you can feel.
Interpolation: a line between two values
Pick a start, pick an end, and walk a number t from 0 to 1. At t = 0 you are at the start, at t = 1 the end, and every value between is start + (end - start) * t. Plotted against t it is a straight line, and the two numbers that define it are the slope and where it crosses zero.
The amber tracer is t moving left to right; the dashed drop reads the output off the line. Set the slope to zero and the output flatlines: a value that never moves. The faint curve is y = t². That one bends, and the bending is the next section.
A linear t looks robotic on screen, so real interface motion almost never ships it raw. What it gives you is the spine: the in-between values that easing then reshapes.
Easing comes from algebra
An ease-in is t². An ease-out is 1 - (1 - t)². Those are polynomials. To build or read one you expand and factor brackets, the algebra everyone is told they will never use. (x + a)(x + b) is literally a rectangle, a width times a height. Slice it and the four regions are the four terms of the expansion.
Drag a and b. The big square is always x², the two strips are the middle term, and the corner is the constant. Run it backwards and you are factoring: which two numbers add to the middle and multiply to the end. Square one bracket, (1 - t)(1 - t), and you have just expanded an ease-out by hand.
Cubic-bezier easing is the same idea one degree up. When a curve feels wrong on screen, it is usually the squared term doing too much near t = 0.
t²1−(1−t)²Distance: how motion knows when to react
The length of a vector is √(x² + y²). Every distance you compute in motion is this in disguise: how far the cursor sits from a target, how fast something is moving, when a particle is close enough to snap. The proof is visual. The squares built on the two legs hold exactly as much area as the square on the hypotenuse.
Try a = 3, b = 4. The hypotenuse square always equals the other two combined, so the speed of something moving x across and y up per frame is √(x² + y²). Skip the square root when you only need to compare distances. Comparing the squares is cheaper and gives the same answer.
The unit circle: anything that loops
Rotate a ray of length 1 by an angle θ and its tip lands at (cos θ, sin θ). Cosine is the x, sine is the y. That is the whole definition, and it is every looping animation you will write: orbits, pulsing, a gentle bob, a value that breathes between two extremes forever.
As the ray sweeps, the green height traces a sine wave and the red base traces cosine. Feed the current time into sin() and you get a number oscillating between -1 and 1 that never needs resetting. Multiply by an amplitude, add a phase offset per element, and a row of dots becomes a wave. One full lap is 2π radians; to drive it from the clock, Math.sin(performance.now() / 1000).
Summation: the loop over the field
Σ is a for loop. The index under it is the counter, the number on top is where it stops, and the expression beside it is the body. You meet it the moment one animated thing becomes many: summing forces on a particle, accumulating a stagger delay, averaging positions in a flock.
Press play and watch the stagger happen in real time. Each iteration fires the next dot after i × 150ms. That is all Σ does here: accumulate an offset. Step through it one dot at a time and the code panel follows. The notation looks like a wall until you have written the loop once. After that it reads like code, because it is.
What you can skip
Calculus is not required for most motion work. It shows up in springs and damping, and a good physics library hides it there until you want to look. The Greek alphabet is not a prerequisite either. θ is just the angle, Σ is just the sum. Learn each symbol when an animation actually needs it, not before.