Command Palette

Search for a command to run...

Hectal
Phase 10: Layout Animation and FLIP
Web Animation · Exercise 4 of 5 PreviousNext
Intermediate

Open a panel to its natural height

The panel opens to height: auto and snaps. Make it open in 300 ms.

For reduced-motion users it must open at once.

What Check tests

  1. 150 ms after the click the panel is part way open
  2. It ends at its natural height
  3. With reduced motion it opens at once

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.
00:00.000
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.