Web Animation · Exercise 1 of 5Next
Beginner
A reading bar from the scroll
The bar fills over two seconds by itself, because it runs on the clock. Make it follow the box's scroll: empty at the top, half full half way, full at the end. Keep the keyframes.
What Check tests
- The bar is a scroll-driven animation
- At the top the bar is empty
- Half way down the bar is about half full
- At the end the bar is full
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.