Storyline 2: Creating Interactivity with Triggered Motion Path Animations

Article Last Updated

This article applies to:

In this tutorial, you'll learn about Articulate Storyline's motion path animations, which let you move objects along an invisible track on your slide. Motion paths can be triggered at a certain point on the timeline or by a learner's actions.

If you'd like to work along with the video and you haven't already downloaded the practice files, you can get a copy here. Watch the video first, then follow the steps below to practice.

Practice Activity

For this exercise we'll build two motion path animation slides, one that's timed to the timeline and one that's triggered when a learner clicks a button. To get started, open 03C_Triggered_Motion_Paths.story from your practice files and go to the first slide.

  1. The first thing we'll do is hide the large "Sexual Harassment" book (Group 1) using the Show/Hide button on the timeline.
  2. Then we'll stack the blue Frontline Managers book and the yellow Warehouse Employees book over where the large book was located before we hid it.
  3. Since we're working on the Managers book first, go ahead and hide the yellow Employees book.
  4. Now select the blue Managers book and add a Turns motion path to it. Position the animation so that it will end with the blue book sitting on the Frontline Managers shelf. Your slide should look something like the one shown below.
  5. Preview the slide to see how the motion path works.
  6. Return to your slide and select the blue Managers book. On the Animations tab, double-click the Animation Painter button to copy the motion path we added to the Managers book. 
  7. In the timeline, unhide the Employees book, then click the Employees book to paint the same animation to it that we used on the Mangers book.
  8. Click the Animation Painter again to turn it off.
  9. Select the new motion path and position its endpoint so it's on the Warehouse Employees shelf.
  10. Preview the slide to see how the motion paths are working.

We want these books to animate at a certain point on the timeline. To do that we'll add some cue points and use them to trigger the animations.

  1. On the timeline, create one cue point at the 1-second mark and another cue point at the 2-second mark.
  2. Double-click the existing trigger for the Manager object. Modify the trigger so that the Manager object will move when the timeline reaches cue point #1.
  3. Update the existing trigger for the Employee object to move when the timeline reaches cue point #2.
  4. Preview the slide and see how it works.
  5. When you're done, don't forget to unhide the Sexual Harassment book that we hid earlier.

Now we'll look at another example that's animated based on triggers. In this case, we'll add buttons that trigger an animation to the left or to the right, depending on which button is clicked.

  1. Go to the second slide in your practice file and select the blue box shape at the bottom of the slide.
  2. Add a Line motion path and use the Path Options to set the direction to the left.
  3. Add another Line motion path on that same shape and set it to move to the right.

Now we'll set up the triggers so that clicking the left button will move the box left and clicking the right button will move it to the right.

  1. Modify the trigger for the first motion path so the box moves on motion path 1 when the user clicks the left button.
  2. Modify the second motion path so the box moves on motion path 2 when the user clicks the right button.
  3. Preview the slide and see how it works. Try clicking the left button twice in a row and notice what happens.
  4. Return to the slide and update the Path Options for both motion paths to use a Relative Start Point.
  5. Now Preview your slide again and notice the difference when you click the same button more than once.

Now you know how to create motion paths and trigger them based on the timeline and on user actions.

In our next tutorial, you'll see how easy it is to create a tabs interactions in Storyline.