01
Start without motion
A checkbox, a switch, and a segmented control can change a value with no animation. The new value is correct. You still have to look for it, because nothing moved. The list below names the parts used in the rest of the page.
No motion yet
- Border. A 1px line drawn on top of the control. It is the same in both states.
- Knob. The part that travels. Off, it is dark. On, it turns cream.
- Fill. The orange color, faded in over the track. The track shape itself does not change.
- Highlight. The shape behind the selected option of a segmented control.
- Track. The rounded shape the knob sits in. The knob is the same distance in from every edge.
- Inset. That padding. It is also the only space the knob may use when it passes the end.
In every section after this, the value still changes the same way. What changes is how the control shows it.
02
Add a duration
If the knob jumps, you lose it and have to find it again. If it moves across the track, you can follow it. Around 200 ms still feels immediate. Much longer starts to feel like waiting.
Jump, then move
Move the knob with a transform. Changing left makes the browser lay out the page again on every frame. A transform only moves a layer that is already painted. For many controls, a short move with no stretch is enough.
03
Keep the ends round
Stretch shows direction and speed. Scaling the whole knob is the quick way to do it, and it turns the circle into an oval. The ends should stay the same shape they have at rest.
Two ways to build it
The scaled knob becomes an oval. The built one is two copies of the resting circle, plus a rectangle in the space between them, so the ends stay round. It is longest while it is fastest, and round again before it arrives.
04
How it stops
Moving across the track is the simple part. What separates the settings is how the knob stops. At zero bounce it reaches the end and stays there. Raise bounce and it passes the end, comes back, and settles.
The arrival curve
While the knob is stretched, it gets a little shorter. As it arrives, its height goes past the resting height. Sideways overshoot stays inside the inset around the knob. The track clips anything that still sticks out.
05
Four easings
Duration is how long the move takes. Easing is how that time is spent. These four take the same time to cross the same track. Only the spring is allowed to pass the end.
Same duration, different easing
- Linear. Speed stays constant, so the knob stays stretched through the move. It returns to a circle as the front runs out of room. Use it for a meter, a scrubber, or progress that should feel neutral. On a control people use all day, the stop feels abrupt.
- Ease out. It starts stretched and is round again before it arrives. It cannot pass the end. This is the usual choice for a click: fast at first, then quiet. Use it when something enters, or for a setting that should not overshoot. Skip it when the moving part should feel like it has mass.
- Ease in out. It is longest in the middle, and it cannot pass the end. Both ends are calm, so it fits a long move between two resting states: a panel, a large surface, a shared element. On a short toggle it feels late, because the first moments are spent speeding up.
- Spring. This is the only curve that can pass the end and come back. That overshoot is what makes the stop feel heavy. Use it when the arrival matters, which is what Settle and Rubber do. Skip it for fades, type, and layout, and for a control where the extra swing would delay the next click.
Snap is a short move with no stretch. Settle and Rubber use this spring, with different amounts of overshoot. The fill and the icon fade in about 180 ms. Putting a spring on a color makes the control feel late.
06
Respond on press
A click is confirmed when the pointer comes up. By then the knob should already be moving. If it waits for the release, the control feels like it ignored the press.
Hold, then release
While you hold, the knob shifts toward the state it is about to take, and waits. On release, the animation starts from that shift. Drag off the control and it returns, because the press was cancelled. The wide highlight shifts less than the knob, relative to its own width.
07
Where you press
A switch toggles from anywhere on the track. A segmented control moves only to the option you press. One changes a single on or off value. The other chooses between options.
Press the track, then press an option
Press the selected option. It should stay.
The switch toggles wherever you press on the track. The segmented control ignores the option that is already selected, and moves only when you press the other one.
08
Interrupt the move
An animation that can only play to the end ignores a second click. Click again before the knob arrives. The new animation starts from the pose on screen and keeps the speed it already has.
Click again mid-move
Click once, then click again while it is stretched.
It does not play backwards. The second move starts from the stretch you can see.
09
Three timings
The value changes the moment you release. The fill fades in over 180 ms. The knob uses the rest of the duration. One gesture, three different timings.
Value, fill, and knob
From the keyboard, Space or Enter changes the value and the knob stays where it is. The same thing happens when reduced motion is on.
10
Don’t block the ending
The thing you just turned on is often the thing that freezes the page, while the knob is still mid-move. If the rest of the animation is scheduled from script, the knob waits there, stretched, until the page is free again.
Block the main thread
The knob on the right is one animation, handed to the browser at the click, so it finishes while the thread is blocked. The one on the left reaches its longest pose and holds, because the rest of the move was still waiting on script. Hand the whole animation over at once.
11
Choose a setting
Each setting is four numbers: stretch, squash, bounce, and duration. Edit them in the bench above. Snap is enough for most controls. Settle is the one to use day to day. Rubber is for when the motion itself is the point.