Web Animation · Exercise 5 of 5 Previous
Advanced
Reveal once, and never hide for good
The features are hidden in plain CSS (opacity: 0), so a failed script leaves them invisible, and reduced motion hides them too. Rewrite the effect as in the Volt build: hide only under html.reveal-ready, which the script adds; reveal each feature once with an IntersectionObserver (add is-visible when it is in view or above the box, then stop observing it); with reduced motion do not add reveal-ready at all.
What Check tests
- The feature in view at load is shown, the others wait
- Scrolling to a feature shows it
- Scrolling back up does not hide it again (once)
- Without reveal-ready the features are visible (nothing is hidden by plain CSS)
- With reduced motion nothing is hidden and reveal-ready is not added
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.