Intermediate
Keep the end, drop the animation
Pressing Slide moves the panel 120 px to the right and it stays there, but it does it with fill: "forwards": when the slide is over, the finished animation is still attached to the panel and still wins over your styles.
Change the code so the panel stays at 120 px after the slide, and no animation is left on it. Use commitStyles() and cancel().
What Check tests
- Half way through (150 ms) the panel is between 0 and 120 px
- After the slide the panel is at 120 px
- No animation is left on the panel
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.