Web Animation · Exercise 1 of 5Next
Intermediate
Slide the box home
The button moves the box to the right end by changing the layout, and the box jumps.
Use FLIP: measure First, change the class, measure Last, and play a 400 ms ease-out animation of transform from the old place to the new one.
What Check tests
- Right after the click the box has not jumped
- It ends at the right end
- Nothing costly is animated
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.