How Can I Use a Slider to Create a Moving Timeline?

During Articulate training sessions, we often encounter questions that make us think of the new possibilities within Storyline. For me, this happened recently when an attendee asked if it would be possible to create a timeline that could move back and forth (or up and down) using a slider. The more we talked, the more excited I became at the possibility of creating a timeline that would not only be a more robust course design, but also more memorable and engaging for the learner!

Take a look at what I came up with:  Select here to view the “Moving Timeline” in action.

Completing the Timeline

Let’s take a look at the steps I used to build this example. Depending on how long of a time frame you want to display, this part of the development can take the most time. For example, the fascinating 4,000 year history of the kayak may be a more time-consuming design than one that discusses last year’s sales performance.

Once you’ve solidified the content, create and/or insert all the elements (images, text boxes, markers, captions, etc.) on the slide, and then group them together.

Tip: Make sure you have all the elements on your timeline created before grouping them. If an element is not part of the group you’ve created, it won’t move with the rest of the timeline when the learner moves the slider.

Adding the Slider

Insert a slider and make any design changes you’d like using the Slider Tools | Design and Format tabs (such as the length and width of the slider, track color, thumb design, etc.). You’ll also want to adjust the total number of steps the slider will have (i.e. adjusted for the length of your timeline–longer timelines will have a greater number of steps).

Naming the Slider and Slider Variable

Remember, sliders function using a numeric variable, so once you have your slider built the way you want, be sure to name the slider in both the variable panel and the timeline! This will prevent any additional confusion later.

Creating the Two Motion Paths for the Entire Timeline Group

Depending on your design, you will most likely be using either left/right or up/down motion paths for your timeline. Whichever you choose, be sure to set both motion paths to have a relative start point. This allows the motion path to pick up where it left off each time the learner moves the slider. Building both of these motion paths will automatically create two triggers you will need to adjust later. For this build, I set “Line Motion Path 1” to go to the left and “Line Motion Path 2” to go to the right.

Tip: You may want to shorten the duration of your motion paths so the exercise doesn’t take too long for the learner. You don’t want them to get bored while waiting for your motion paths to finish moving!

Creating the Numeric “Chaser” Variable

The most important part of this development is the numeric “chaser” variable. This vital piece of information allows the slider and the motion paths on the timeline to “talk” to each other by telling the timeline group how and when to move along the correct motion path. To do this, build a numeric variable and name it “Chaser.” You should now have two variables listed.

Creating and Adjusting Your Triggers

The trigger that goes along with the chaser variable is also very important. Build this trigger so it will always have a value equal to the value of the slider whenever the slider moves. For example, if we move the slider to position #1 (which gives our slider variable a value of 1), the chaser variable will also have a value of 1.

Now we need some additional triggers based on the next time the slider moves:

• If the value of the slider is greater than what it just was (1 in our example), move the timeline group to the left (Line Motion Path 1).
• If the value of the slider is less than what it just was, move the timeline group to the right (Line Motion Path 2).

This continues to work regardless of how many times you move the slider because the slider variable value and the chaser variable values continue to adjust based on where the slider moves. Pretty cool, huh?

Tip: Keep in mind that the trigger order does matter for this build. I have found that the following trigger order works best…

Summary

Using the above steps as a guide will help you create a much more interactive example than the standard timeline presented in picture or table form. Also, this is just one of the many possible solutions. You may have some ideas of your own. The big question is whether or not the “juice is worth the squeeze.” In other words, “If I build this, will the learner benefit?” Although this is ultimately up to you as the designer, it’s a safe bet that any sort of timeline that moves will definitely engage your learners.

Want to grab the source file that I used for this example? Click here to download the Moving Timeline Storyline file.

Good luck, and let me know what questions or comments you have. And remember, with Storyline, if you build it, they will learn!

~John

Update: Please note that the interface of the faster new trigger workflow (in Storyline 360 update 3.33.20625.0 or later) will appear slightly different! While the process is the same, this article uses screen captures from the classic trigger workflow.