The basic parts
every motion is made of
Take the 69 studies apart and only a few dozen basic motions remain. Each page lets you drag the parameters, read the formula, take a frame-rate-independent reference implementation, and see which studies use it.
Valuevalue
Stateless functions: give t, a distance or an index, get a number back. Easing, mapping, wrapping, randomness, periodic signals, distributions.
Power easing幂次缓动
Bend a linear 0→1 into fast-then-slow, slow-then-fast, or slow at both ends. The most used easing on the site.
Cubic Bézier easing三次贝塞尔缓动
Four points define a timing curve; moving the two control points changes its feel.
Smoothstep平滑阶跃
Turn an input interval into a 0→1 transition that settles at both ends.
Clamp and map钳制与区间映射
Convert one interval to another and decide whether values may overshoot.
Periodic wrap周期回绕
Fold positive and negative positions into one period so loops work in both directions.
Stagger distribution错峰分布
Assign start times by index or distance to give a group a readable rhythm.
Oscillator振荡信号
Generate periodic motion from absolute time, with separate controls for frequency, amplitude and phase.
Random and noise随机与噪声
Random values create variation; a seed makes it repeatable, and interpolated noise makes it continuous.
Radial falloff径向衰减
Influence grows near the pointer and reaches zero at the radius.
Inputinput
Where signals come from and how to read them: pointer, drag, wheel, keys, plus velocity estimation, axis locking and thresholds.
Pointer position指针坐标
Turn a pointer into local pixels and coordinates relative to the element centre.
Drag arbitration拖拽判定
When a finger goes down you do not yet know the intent: a tap, a horizontal drag, or just scrolling the page? Watch a few pixels, then decide.
Release velocity释放速度
Estimate throw speed from recent positions and expire it after the pointer stops.
Virtual scroll虚拟滚动
Combine wheel, drag and keys into one bounded progress value, then smooth its display.
Wheel stepper滚轮分档
Treat a stream of wheel events as one page step, advancing once after a threshold.
Dynamicsdynamics
Stateful rules that carry values from frame to frame: tween, damp, spring, inertia, snap. This layer must be frame-rate independent.
Tween定时补间
Move from the current value to a target over a fixed duration, even when interrupted.
Damp阻尼跟随
Keep pulling the current value a fraction of the way toward its target — measured in time, not in frames.
Spring弹簧
Describe a return with stiffness, damping and mass, carrying position and velocity forward.
Inertia惯性衰减
Decay release velocity over time and predict the landing point at release.
Snap吸附
Choose a target from the current or projected landing point, then arrive with a spring.
Channelchannel
The visual property actually written. Only properties that change count.
Transform变换
Put translation, rotation and scale in one transform. Change the order and you change the path.
Fade and blur淡入与模糊
Drive opacity, rise, scale and blur from the same progress value.
Clip and mask裁剪与遮罩
A clip gives content a hard edge; a gradient mask gives its edge a soft reveal.
Text content文字内容
Animate the characters or number itself while keeping the final meaning available to readers.
Patternpattern
How many elements, phases or states are organised: timeline, layout function, infinite wrap, shared bounds, fields, text split, state machine.
Timeline时间线
Put several tweens on one clock and specify which follow, overlap or align.
Layout function布局函数
Map an index to a position and orientation; swap the function to change the arrangement.
Infinite wrap无限折返
Remap a finite strip to the copy nearest the viewport so dragging has no visible end.
Shared bounds共享边界过渡
Make the detail view appear to grow from the exact card that was clicked.
Proximity field邻近场
One pointer position drives a whole field of nearby elements.
Text split拆字进场
Animate a headline by character or word while preserving one readable name.
State machine状态机
Give opening and closing explicit states and allowed events so repeated clicks have predictable results.
Runtimeruntime
Invisible infrastructure that decides quality: a single-writer frame loop, frame-time clamping, background pause, reduced motion.