Web Animation · Exercise 5 of 5 Previous
Advanced
A FLIP that respects reduced motion
The button reverses the cards with FLIP. For reduced-motion users no card may move: the order still changes, and nothing animates.
Add the check with matchMedia("(prefers-reduced-motion: reduce)") before the animation.
What Check tests
- Normally the cards slide
- The order is reversed
- With reduced motion nothing animates but the order changes
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.