Command Palette

Search for a command to run...

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

Skip the cards that did not move

The button swaps the first two cards. The FLIP code animates all six, although four did not move.

Skip any card whose dx and dy are both under half a pixel, so that only two animations run.

What Check tests

  1. Only the two swapped cards animate
  2. The cards are swapped
  3. Both slides last 400 ms

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.