- Scene
- 05
- Take
- 01
- Level
- Intermediate
- Runtime
- ~2 h
Easing and Timing
Why the same 400 ms can feel quick or lazy: easing curves, cubic-bezier() inside, linear() for bounces and springs, choosing a curve by job, and stagger, ending with the Lumen product grid reveal.
Two animations can start together, end together and look nothing alike. What differs is easing: how the speed changes while the thing moves. This phase opens the box. You see what a curve is, how cubic-bezier() turns four numbers into a shape, and how linear() draws any shape you like, including bounces and springs.
Then you learn to choose. Product interfaces use a few curves for a few jobs: things that arrive, things that leave, things that move between two places, and things that never stop. You judge side-by-side pairs, then read the numbers off the Motion Timeline.
The last topic is stagger: making a group arrive one after another without making anyone wait. You finish by revealing the Lumen accessory cards with a capped stagger that shows at once when there is no JavaScript and when someone asks for reduced motion.
▶ Roll: 5.1Scene 05 · the brief from Lumen
Mei, motion designer at Lumen Bikes
“It moves, and it still feels wrong. It leaves the start too gently and then slams on the brakes. I cannot say why, but I can feel it.”
Mei has watched the toast from Phase 4 fifty times. It slides 16 pixels in 220 ms, exactly as she specified, and she is not happy. "It is the speed," she says. "It leaves the start line too gently and then slams on the brakes." Kofi had left the default timing.
She opens the timeline with him and steps through the first frames. The numbers explain what her eyes already knew: how far the toast has moved at each frame depends on a curve nobody chose.
Then Ama points at the accessories section. Six cards arrive in one frame and the page feels abrupt. Mei draws a storyboard: one card after another, each a little later than the last, never more than a third of a second in all. By the end of this phase the launch page has that reveal, and the team has a rule for which curve belongs to which job.
In this scene
You will learn
- Read an easing curve, and say how a 400 ms move can feel fast or slow
- Write cubic-bezier() and linear() curves, with their limits and fallbacks
- Choose a curve by job: arriving, leaving, moving, looping
- Stagger a group with a custom property and a cap, and reveal the Lumen accessory cards
You write code in
In your lumen-motion project (npm run dev) and in the editor on this page
Files you touch
- src/styles/tokens.css
- src/styles/components.css
- src/js/main.js
Shot list · 6 shots, widths by reading time
- 5.1What an Easing Curve IsAn easing curve says how much of the move is done at each moment of the time. It does not change how long a move takes, but it decides where the fast and slow parts are, and so how the move feels. 22 min 4 live
- 5.2Inside cubic-bezier()
cubic-bezier(x1, y1, x2, y2)draws an easing curve with two handles. The two x values must stay between 0 and 1; the two y values may go outside, and that is how a move overshoots its target. 20 min 2 live - 5.3Choosing an EasingPick the curve by the job the motion does: arriving things use ease-out, leaving things ease-in, things moving between two places on screen ease-in-out, and endless motion linear. Lumen keeps one token for each. 19 min 3 live
- 5.4linear() and Custom Curves
linear()takes a list of points and draws straight lines between them. With enough points it can copy any curve, including a bounce or a spring, whichcubic-bezier()cannot. It works in every current browser, but older ones ignore it, so give it a fallback. 21 min 2 live - 5.5Stagger and ChoreographyA stagger starts the members of a group one after another, each a little later than the last. Give each item its number in a custom property, multiply it by a step, and cap the number so a long list never makes anyone wait. 22 min 3 live
- 5.6Build: The Product Grid RevealbuildThe six accessory cards arrive one after another with Lumen's ease-out token and a stagger capped at 300 ms. The grid still shows at once with no JavaScript and with reduced motion. 36 min 2 live
Dailies · 4 checked exercises
A film crew watches the day's shots every evening. Build each one yourself and press Check: the page freezes its clock and checks your motion at exact moments, its cost, and its reduced-motion version.
linear and feels like it waits before it moves.IntermediateD02A pop that settlesThe new-item badge grows from scale(0.6) to scale(1) in 400 ms with ease-out. Give it a small overshoot: it must grow past 1.02 (but not past 1.1), then settle at exactly 1 by 400 ms.IntermediateD03Cap the staggerThirty chips fade in, each 50 ms after the last. The last one waits almost 1.5 seconds.IntermediateD04A reveal that never hides the listThe feature cards are hidden by CSS and shown by JavaScript. If the script fails, the page is blank.Intermediate