Web Animation · Exercise 4 of 4 Previous
Advanced
A drawer that closes on Escape
This small drawer opens with a spring. It does not close on Escape, does not give focus back to Cart, and ignores reduced motion.
Fix all three: Escape closes it, closing focuses Cart, and with reduced motion it does not travel (it is in place at once).
What Check tests
- Opening ends in place
- Escape closes it
- Focus is back on the Cart button
- Reduced motion: it is in place after one 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.