Web Animation · Exercise 4 of 4 Previous
Advanced
A calm version with matchMedia
The headline and button animate for everybody, including people who asked for less motion. Use gsap.matchMedia() so only visitors with no reduced-motion preference get the animation.
For a reduced-motion visitor the headline and the button must simply be there, fully visible, at once. Switch Reduced motion on in the timeline to try it.
What Check tests
- With full motion the headline slides in and fades in
- As a reduced-motion user nothing is animated
- As a reduced-motion user the headline and the button are fully visible 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.
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.