Skip to main content

View Transitions — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the View Transitions 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

    Name a transitioned element

    easy10 min

    Give #box the view transition name card.

  2. 2

    Name a second element

    easy10 min

    Give #text the view transition name hero.

  3. 3

    Use unique names

    easy10 min

    Name #box card and #text hero — every name must be unique.

  4. 4

    Tune the duration

    easy10 min

    Name #box card and run its animation over 0.4s.

  5. 5

    Tune the easing too

    medium10 min

    Name it, set a 0.4s duration and ease-in-out easing.

Find the bug(5)

  1. 1

    Fix the name with a space

    easy8 min

    A view transition name is a single identifier.

  2. 2

    Fix the duplicated name

    easy8 min

    Two elements cannot share one view transition name.

  3. 3

    Fix the misspelled property

    easy8 min

    The property is view-transition-name.

  4. 4

    Fix the duration with no unit

    easy8 min

    A duration needs s or ms.

  5. 5

    Fix the name on the wrong element

    easy8 min

    The card name belongs on #box.

Ready to write the code?

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

Open the workspace