Web Animation · Exercise 1 of 4Next
Intermediate
Sequence the hero
Three tweens start together when you press Play. Turn them into one timeline that plays in order: the headline (0.5 s), then the Volt right after it, then the price starting 0.25 s after the Volt starts.
Use the position parameter, not delays. Then step through it on the timeline.
What Check tests
- 250 ms after Play only the headline has started: the Volt is still hidden
- At 650 ms the Volt is on its way and the price has not started
- At 900 ms the price is on its way and not finished
- At 1.5 s everything is fully visible
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
animations
0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
frames
Console
Nothing logged yet.