Motion path animations can bring e-learning to life. In Storyline, you can trigger motion path animations to occur at certain points on the timeline or in response to learners’ actions. We’ll cover both options in this tutorial.

Practice Activities:

  1. Trigger Motion Path Animations to Occur at a Specific Time
  2. Trigger Motion Path Animations to Occur When an Object Is Clicked

Practice Activity: Trigger Motion Path Animations to Occur at a Specific Time

Let’s add a couple motion path animations and trigger them to occur automatically at a specific time. Watch this video demonstration, then follow the steps below to practice.

  1. Open the Storyline folder in your practice files, then open the 03C_Triggered_Motion_Paths_360.story file and go to the first slide in the project.

    There are duplicate slides in the sample project. We’ll use the first and second slides to create motion path interactions in this tutorial. The third and fourth slides are demos so you can preview the finished examples.
  2. Since the blue and orange books are currently in their final destinations, we need to move them to their starting points before we add motion paths. Drag the blue and orange books so they’re centered with the Sexual Harassment book, then temporarily hide the Sexual Harassment book by clicking the eye icon beside it in the timeline panel.
  3. Now add Turn motion path animations to the blue and orange books so they move to their respective bookshelves.
    • Select both books, go to the Animations tab on the ribbon, click Add Motion Path, and choose Turn.
    • Resize each motion path till the final landing spot for each book rests on the bookshelves.
    • Give each motion path a recognizable name by entering text in the Name field on the ribbon. Call the motion path for the blue book Manager. Call the other one Employee.
  4. By default, motion path animations occur when the objects first appears on the slide. But in this activity, we want them to occur at specific points on the timeline. Let’s start by adding cue points where we want to trigger the animations.
    • Click the timeline at the 2-second mark to move the playhead to that position, then press the C key on your keyboard to add a cue point.
    • Click the timeline at the 3-second mark to move the playhead to that position, then press the C key again.
  5. Now we can adjust the motion path triggers to occur at the cue points we just added.
    • Double-click the Manager motion path in the Triggers panel to edit it. Change the When property to Timeline reaches, then select cue point #1. Click OK to close the trigger wizard.
    • Double-click the Employee motion path in the Triggers panel to edit it. Change the When property to Timeline reaches, then select cue point #2. Click OK to close the trigger wizard.
  6. Unhide the Sexual Harassment book by clicking the eye icon beside it in the timeline panel.
  7. Click the Preview drop-down arrow on the ribbon and choose This Slide to see how your slide behaves.

Tip: When you sync motion paths with cue points, you can change the timing of the motion paths simply by dragging the cue points along the timeline.

Practice Activity: Trigger Motion Path Animations to Occur When an Object Is Clicked

Sometimes you don’t want a motion path animation to happen until the learner does something. Let’s trigger a motion path to occur when the learner clicks a button. Watch this video demonstration, then follow the steps below to practice.

  1. Open the Storyline folder in your practice files, then open the 03C_Triggered_Motion_Paths_360.story file and go to the second slide in the project.

    There are duplicate slides in the sample project. We’re using the first and second slides to create motion path interactions in this tutorial. The third and fourth slides are demos so you can preview the finished examples.
  2. First, we’ll add two motion path animations to the blue box, one that moves to the left and one that moves to the right.
    • Select the blue box, go to the Animations tab on the ribbon, click Add Motion Path, and choose Line.
    • By default, Line animations move downward, but we want it to move to the left. No problem. Click Path Options on the ribbon and choose Left.
    • Give your motion path a recognizable name by entering text in the Name field on the ribbon. Call it Left.
    • Repeat the previous three steps to add another Line motion path that moves to the right.
  3. Now we can adjust the motion path triggers to occur when learners click the Left and Right buttons on the slide.
    • Double-click the Left motion path in the Triggers panel to edit it. Change the When property to User clicks, and change the last Object property to the Left button on the slide.
    • Double-click the Right motion path in the Triggers panel to edit it. Change the When property to User clicks, and change the last Object property to the Right button on the slide.
  4. Since we’re letting learners trigger more than one motion path on the same object, we want each successive motion path to start where the previous one left off. Just select the blue box on the slide, then go to the Animations tab on the ribbon, click Path Options, and choose Relative Start Point.
  5. Click the Preview drop-down arrow on the ribbon and choose This Slide to see how your interaction behaves.

Summary

In this tutorial, you learned how to create engaging interactions with motion path animations and triggers. To learn more about syncing motion path animations, see these user guides:

In the next tutorial, we’ll create a tabs interaction.