Web Animation · Exercise 4 of 4 Previous
Beginner
Write the tween (launch page)
Write tween({ from, to, duration, onUpdate, onDone }) as Phase 1's loop.js does. It must be time-based, call onUpdate with the value on each frame, end exactly on to, call onDone once at the end, and return { cancel() }.
A duration of 0 must finish on the first frame. Write it in the JavaScript tab.
What Check tests
- Half way through, the value is about half way
- It ends exactly on the target and calls onDone once
- cancel() stops it: no more updates and no onDone
- A zero duration finishes on the first frame
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.