Intermediate
Scrub the meter
The meter fills by itself as soon as the page loads. Tie it to the scroll box instead, so it is empty at the top, full at the end, and follows the scroll bar both ways.
Use ScrollTrigger with the scroll box as scroller, starting when the meter's top meets the 80% line and ending when its bottom meets the 30% line.
What Check tests
- At the top of the scroller the meter is empty
- Scrolled to the middle of the range the meter is about half full
- Scrolled to the bottom the meter is full, and back at the top it is empty again
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.