A compact theory of what drives motion in software: keyframes, springs, gestures, and physics;
how they differ mathematically; how they compose; and why this matters when steering Codex.
The video: animation techniques differ by what controls the object's motion. It introduces keyframes, spring/easing behavior, gestures, and physics, and emphasizes that these techniques can be combined.
A useful formalization is to represent the visual state of an element at time t as:
x(t) = state of the visual element at time t
The state may include position, rotation, scale, opacity, color, shape, velocity, or deformation.
The central question is therefore:
What rule determines the next visual state x(t)?
Each animation family answers that question differently.
2. Keyframes — choose values and timing
The video: keyframes are appropriate when you want an authored sequence: define positions, sizes, opacity, color, or shape at selected times, and let the framework interpolate between them.
Suppose horizontal position is represented by x(t). You may specify:
x(0) = 0, x(1) = 100, x(2.4) = 50
More generally:
x(ti) = xi
where ti is a chosen keyframe time and xi is the chosen value. The animation system fills in the states between keyframes.
A UI element can be modeled as a vector:
x⃗(t) = [ px(t), py(t), s(t), θ(t), α(t) ]ᵀ
px, py: position
s: scale
θ: rotation
α: opacity
Best use case
Use keyframes when you know the choreography in advance.
0.0 s character idle
0.3 s raises coffee cup
0.8 s cup reaches mouth
1.2 s pause
1.7 s lowers cup
2.0 s returns to idle
Model: you specify where and when; the software fills in the path.
3. Springs — respond, then settle
The video: spring motion is useful for UI elements such as buttons and other responsive interactions. Different parameter choices can make motion feel gentle, snappy, or bouncy.
Instead of specifying all intermediate positions, a spring animation typically defines a destination and the dynamics of how the object approaches it.
m ẍ + c ẋ + k(x − xtarget) = 0
x: current position
xtarget: destination
m: effective mass
c: damping
k: spring stiffness
ẋ: velocity
ẍ: acceleration
This differential-equation formalization is added here for rigor; the video discusses the behavior conceptually rather than writing this equation.
A linear transition might look like:
0 → 20 → 40 → 60 → 80 → 100
A spring might look like:
0 → 45 → 85 → 108 → 96 → 101 → 100
The overshoot and settling produce a sense of momentum, weight, and elasticity.
Why springs feel natural
Human perception notices abrupt starts and stops. Spring dynamics naturally generate acceleration and deceleration, so they work well for buttons, modals, cards, snapping, and drag-release interactions.
4. Easing — shape velocity over time
The video: easing functions determine how an animation accelerates and decelerates, and they substantially change how an interaction feels.
For a transition from point A to point B, use an easing function E(t):
x(t) = A + (B − A) E(t)
Examples:
Linear
E(t) = t
Constant speed.
Ease-in
Slow start, faster finish.
Ease-out
Fast start, slow finish.
Ease-in-out
Slow → fast → slow.
Distinction: easing prescribes the timing curve of a transition; a spring models a dynamical system that settles toward equilibrium.
5. Gestures — follow the user
The video: gesture-driven motion depends on where the cursor, finger, or hand moves. This makes objects feel draggable, responsive, and alive.
Key idea: gesture animation is input-driven rather than timeline-driven.
6. Gesture + spring
The video: the original iPhone-style fling is an example where a gesture establishes motion and spring-like behavior or overshoot determines how the interface settles.
The spring or inertial system then begins with these initial conditions. This preserves continuity between the user's physical action and the subsequent software motion.
7. Physics — simulate forces and collisions
The video: physics is useful when you want the environment itself to determine motion—gravity, collision, bouncing, device orientation, and other simulated physical behavior.
The general model is:
m x⃗̈ = Σ F⃗i
m: mass
x⃗: position
x⃗̈: acceleration
F⃗i: forces acting on the object
For gravity:
F⃗g = m g⃗
For a simple one-dimensional bounce:
vafter = −e vbefore
where e is the coefficient of restitution:
e = 0: no bounce
e ≈ 1: highly elastic bounce
Keyframes vs. physics
Keyframes
Physics
Specify motion directly.
Specify rules that generate motion.
Good for choreography.
Good for emergent interaction.
Trajectory is authored.
Trajectory is simulated.
The device-orientation example
If a phone's gyroscope changes the orientation of gravity in screen coordinates:
g⃗screen = R(θ) g⃗
R(θ): rotation induced by device orientation
g⃗: gravity vector
gyroscope → gravity direction changes → object accelerates → collisions constrain it → object rolls/bounces
8. Composition — the real sophistication
The video: the animation techniques are not isolated. The puzzle app in the video combines gesture motion, particles, bounce, layout transitions, shaders, keyframed character motion, SVG masks, and Rive state-machine animation.
Consider dragging a puzzle piece into place:
Gesture: the piece follows the pointer.
Spring: after release near the destination, it snaps and settles into place.
Particles: sparkles or confetti signal completion.
Layout transition: the finished board rearranges.
Keyframed reaction: a character celebrates and returns to idle.
The perceived polish comes from coherent composition of small effects rather than from one oversized animation.
9. Unified taxonomy: where does motion information come from?
Technique
Primary driver
Formal view
Keyframes
Author
x(t) = f(t; θauthor)
Springs
Target state + dynamics
ẍ = f(x, ẋ, xtarget)
Gestures
User input
x(t) = f(u(t))
Physics
Forces + constraints
ẍ = f(F⃗, x, ẋ)
Decision rule: ask, “What should control the next frame?” The answer usually identifies the correct animation primitive.
10. Why this matters for Codex
The video: vague instructions such as “make animations” are insufficient for high-quality results. The human needs enough vocabulary and taste to steer the agent toward the right technique and then visually validate the output.
A weak prompt:
Add some animations and make this feel premium.
A stronger prompt:
While dragging, bind the piece to pointer position.
On release inside the valid drop zone:
1. spring it to the slot with slight overshoot,
2. emit a short particle burst when it settles,
3. transition the completed row into its new layout,
4. trigger a short character celebration,
5. return the character to its resting state.
Core principle: do not ask the agent only for an aesthetic outcome. Specify the motion driver, the transition logic, the intended feel, and the composition of effects.
11. Compact mental model
Keyframes
Question: Do I know the choreography in advance?
Springs
Question: Should this react and naturally settle?
Gestures
Question: Should the user's movement directly control it?
Physics
Question: Should behavior emerge from forces, collisions, or constraints?
The broader lesson: the quality jump comes from understanding these primitives well enough to compose them deliberately, then using Codex to execute the implementation rather than asking Codex to invent taste from scratch.