Skip to main content

Scroll Animations — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Scroll Animations lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Drive an animation by scroll

    easy10 min

    Tie the animation on #box to the scroll progress.

  2. 2

    Use a view timeline

    easy10 min

    Tie the animation on #box to its visibility in the viewport.

  3. 3

    Name and drive together

    easy10 min

    Attach the fade keyframes and a scroll timeline.

  4. 4

    Hold the end state

    easy10 min

    Use a view timeline and keep the final frame.

  5. 5

    Build a scroll reveal

    medium10 min

    Fade in as the element enters the view, holding both ends.

Find the bug(5)

  1. 1

    Fix the missing parentheses

    easy8 min

    scroll is a timeline function and needs parentheses.

  2. 2

    Fix scroll used where view was meant

    easy8 min

    This should react to the element entering the viewport.

  3. 3

    Fix the missing animation name

    easy8 min

    A timeline drives nothing without keyframes attached.

  4. 4

    Fix the fill mode

    easy8 min

    Both ends should be held, not just the last frame.

  5. 5

    Fix the timeline on the wrong element

    easy8 min

    The animated box needs the timeline, not the wrapper.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace