Command Palette

Search for a command to run...

Hectal
Phase 14: GSAP
Web Animation · Exercise 3 of 4 PreviousNext
Intermediate

Split the headline, keep its name

The headline's letters rise one by one, but a screen reader cannot read it as a sentence: the split was told not to handle accessibility.

Change one option so the heading keeps the name "Ride the hills" and every letter piece is hidden from screen readers. The animation must still work.

What Check tests

  1. The heading has the name "Ride the hills" for screen readers
  2. The split letters are hidden from screen readers
  3. The letters still rise: halfway through the first is partly visible
  4. At the end the text is complete and every letter is visible

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.