• Blog
  • Meet Our Trainers
  • Training Schedule
  • Contact
  • Privacy

As heard in training...

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

June 10, 2015   Yukon Learning    13 Comments

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.

Moveable Timeline Group picTimeline going off the screen

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).

Slider Tools_FormatSlider Tools_Design

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.

KayakHistory_Timeline Name Kayak History_Variable Name

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.

Motion PathsMotion Path Options Menu

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.

Chaser Variable

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.

Chaser Variable Trigger

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).

Greater Than Trigger

Less Than Trigger

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…

Trigger Order

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 Berendes

~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.

Comments

  1. Robert DeSimone says

    June 12, 2015 at 10:56 am

    Great project! Do you have someplace where I can download the .story file?

    Reply
    • Yukon Learning says

      June 12, 2015 at 1:55 pm

      Rob,

      Thank you for your feedback! We had a great time building this one. Absolutely, we can provide the source file…I am pulling that link for you now and will send it over shortly.

      Reply
    • Yukon Learning says

      June 15, 2015 at 9:08 am

      Rob,

      Please view the updated post above in order to download the .story file and let us know if you should have any questions or need anything else. Thanks and enjoy!

      Reply
  2. Linda Lorenzetti says

    May 8, 2016 at 1:06 am

    Thanks for this John. I downloaded the file, but some of the triggers are incomplete. Change state of unassigned to Disabled when the timeline starts and change the state of unassigned to normal when the slider moves if KayakHistory is equal to 10.00. Can you please tell me what the missing unassigns are?

    Reply
    • Yukon Learning says

      May 10, 2016 at 11:45 am

      Hi, Linda and thank you for the comment! We have corrected the file, removing the trigger that was no longer needed. The updated file has been saved to our site and can be accessed using the same link as before within the blog post.

      Thanks and hope you have a great day!

      Reply
  3. Rachel A Frost says

    March 27, 2018 at 12:08 pm

    Thank you SO much for this! Your tutorial walked me through right what I needed to do.

    Reply
    • Yukon Learning says

      April 2, 2018 at 1:54 pm

      Thank you for the comment, Rachel! I’m so glad you were able to put it to use!

      Reply
  4. Arthur Bigotti says

    March 30, 2018 at 2:34 pm

    This doesn’t seem to work anymore. Can you publish an updated version? I tried it in Chrome and Firefox.

    Reply
    • Yukon Learning says

      April 2, 2018 at 2:20 pm

      You’re right, Arthur! It was only published for Flash! Thanks for letting us know! The link should now work!

      Reply
  5. Neil says

    January 19, 2021 at 11:17 am

    has anyone tested this recently? I used this back in early 2019 and the slider has never worked like it should. Sometimes its slides too far and other times slides not far enough.

    Reply
    • Yukon Learning says

      January 19, 2021 at 11:56 am

      Hey there, Neil!

      We actually hosted a webinar session on this build in our Beyond the Conference series in 2020. We have hosted the recording on our webinars archive page where you can follow along with us step by step: https://www.yukonlearning.com/webinars/#Fresh_Ideas

      Let us know if there’s more we can do to assist!

      Reply
  6. Melina says

    January 24, 2024 at 4:11 pm

    Hi, this design is great! I’m having the same issue as Neil and the webinar link no longer works. Any tips? Thanks!

    Reply
    • Yukon Learning says

      January 24, 2024 at 4:53 pm

      Hi Melina,

      Sorry about that! We moved the recording and it can be found here: https://www.yukonlearning.com/webinars/#Fresh_Ideas.

      Thank you!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Join  

Enter your name and email  below to instantly subscribe to The Articulate Trainer blog:

 
 
 

We take your privacy seriously. No spam ever.

  • Home
  • Blog
  • Meet Our Trainers
  • Training Schedule
  • Contact
  • Privacy

Copyright © 2025 The Articulate Trainer

Articulate, Articulate Storyline, and Articulate 360 are the trademarks or registered trademarks of Articulate Global, Inc.
Yukon Learning and Making E-Learning Easy for Everyone are the trademarks or registered trademarks of Yukon Group, Inc.