Skip to main content

Motion Paths — exercises and bug fixes

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

    Define a motion path

    easy10 min

    Move #box along a diagonal path from 0,0 to 100,100.

  2. 2

    Place along the path

    easy10 min

    Put #box halfway along its path.

  3. 3

    Keep the element upright

    easy10 min

    Stop #box turning as it travels, by locking its rotation to 0 degrees.

  4. 4

    Set the anchor point

    easy10 min

    Anchor #box by its centre.

  5. 5

    Animate along the path

    medium10 min

    Attach a path, start at 25%, and follow the tangent.

Find the bug(5)

  1. 1

    Fix the unquoted path

    easy8 min

    The path data must be a quoted string.

  2. 2

    Fix the distance with no unit

    easy8 min

    offset-distance needs a length or percentage.

  3. 3

    Fix the fixed rotation

    easy8 min

    This element should follow the path direction, not hold a 90 degree angle.

  4. 4

    Fix the misspelled property

    easy8 min

    The property is offset-anchor.

  5. 5

    Fix the path on the wrong element

    easy8 min

    The moving box needs the path, 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