Web Animation · Exercise 4 of 4 Previous
Intermediate
Fix the janky hero (launch page)
This is the hero as Kofi first built it: the drawing drifts with left, and the glow animates box-shadow. Make it cost nothing on the main thread, with the same look.
Drift with transform, glow with the opacity of .hero-art::before, and stop the drift for reduced motion.
What Check tests
- Nothing costly is animated
- The drawing really drifts (moves at least 8 px in 1.5 s)
- The glow is on a pseudo-element
- With reduced motion, the drawing stands still
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.