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

As heard in training...

Is There a Way to Make a Scrolling Panel Automatically Scroll?

September 16, 2015   Yukon Learning    22 Comments

I love the scrolling panel in Storyline…Is there a way to make it automatically scroll?

This is a great question! We liked this question so much, in fact, that we’ve now added the solution to our workshop materials. Let’s jump right into how to build the auto-scrolling panel, and then we’ll look at some possible use cases.

Building the Scrolling Panel

  1. Insert a Scrolling Panel

Tip: Keep in mind that the scrolling panel may cover your content, so you’ll want to make sure it’s out of the way. 

2. Insert a text box (above or below the scrolling panel) and populate it with text.

3. Move the text box into the scrolling panel.

4. Add a Line Motion Path to the text box (not to the scrolling panel).

01_2015_September

5. Change the Path Options to the following:

a. Change Direction to Up.

b. Change Easing Direction to None.

c. Adjust Duration so that the text is not moving too fast. (Don’t you hate it when it does that in movies?)

02_2015September

Note: 59 seconds is the maximum length of duration for an animation in Storyline.

6. Adjust the motion path’s end point.

Tip: Move the motion path end point to where you can see the bottom of the text box at the bottom of the scrolling panel. 

7. Adjust the trigger as necessary. For example, you can change the timing of the animation to start at a cue point or a specific time in the timeline.

03_2015September

Tip: Since this will be an “auto scrolling” panel, you may not need or want to see the built-in scroll bar. One option is to cover it up, but that might be challenging if you have a textured or picture background. A more elegant solution is to drag the size of your panel wide enough so that the scroll bar extends beyond the edge of your canvas. This may present a challenge to those of you who always color inside the lines, but try it anyway…be a rebel! “Where the sidewalk ends…” ~Shel Silverstein

04_2015September

Now, let’s think about some other options…

Need to synchronize your scrolling panel with your audio?

You can easily adjust the duration to match the pace of your narration. Or, you could use a shorter motion path (for example, the same height as your scrolling panel) and then set the path options to a Relative Start Point. Now you could use cue points in your timeline to determine when to trigger the motion path. The Relative Start Point allows you to trigger the same motion path multiple times.

Need a horizontal scrolling panel?

For a ticker-type motion (think MSNBC), you can move your text box in a horizontal direction. You can also add a trigger to move the box again when the animation completes.

Download our sample .story to see the three different auto-scrolling panel techniques mentioned in this blog entry. 

When will you use this?

An auto-scrolling panel is a simple, yet elegant solution, but what’s it solving? Other than it being a cool looking option, when would you use this? Here are a couple of cases to consider:

  • We often receive requests from organizations who are trying to make their e-Learning courses more handicap accessible (ADA 508, WCAG, CDPA, etc.). Using the auto-scroll panel to create Closed Captioning may help meet some of these guidelines.
  • Mobile learning options are often challenging for many reasons. One of those reasons is the limited amount of screen real estate with which to work. Scrolling panels are helpful for adding more content in smaller spaces. And let’s face it, sometimes that scroll arrow is just really small on a mobile device.
  • If you are publishing to HTML5, the standard scrolling panel supports swipe gestures, so you may not need to auto-scroll. However, swipe is not supported in the Articulate Mobile Player, so the auto-scroll panel may be a great option to consider.

Note: Using a motion path to create an auto-scroll does not negate the swipe option in HTML5. 

Building an auto-scroll panel is quite simple, yet it yields some pretty cool results. Check out our sample and give it a try. Be sure to let us know how it worked for you!

That’s Storyline, and I’m sticking to it!

ron

~Ron

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. Patrick Gurczynski says

    September 17, 2015 at 10:58 am

    Wow! Well done! This is genuis. Can’t wait to try it out.

    Reply
    • Yukon Learning says

      October 12, 2015 at 9:34 am

      Thanks, Patrick!

      Reply
  2. alphonso says

    October 7, 2015 at 3:37 am

    This directly answers a question that I had – up until now that is. Thank you for sharing in a manner that makes learning process accessible. Much appreciated.

    Reply
    • Yukon Learning says

      October 12, 2015 at 9:34 am

      Great, thanks Alphonso!

      Reply
  3. Vladimir Homola says

    October 20, 2015 at 7:50 am

    Very useful example.
    Many thanks

    Reply
    • Yukon Learning says

      October 20, 2015 at 8:08 am

      So glad it was helpful, Vladimir!

      Reply
  4. Vladimir Homola says

    October 20, 2015 at 9:23 am

    Very nice! Useful for me. Thanks

    Vlado

    Reply
  5. Randy Schmidt says

    November 28, 2016 at 4:29 pm

    Ron,
    Thanks for sharing these options. Is there any way to “fine tune” the length of the relative start point motion path?

    I have text moving 6 times, with two lines of text visible each time. Each time the movement (up) triggers it goes a hair too far. When dragging the motion path shorter, the cumulative motion is now slightly too short. I’ve tried dragging the path stop (red button) both direction to tune, and cannot find a “happy medium”.

    Any ideas to fine tune?

    Reply
    • Yukon Learning says

      November 28, 2016 at 4:59 pm

      Hello Randy

      That is a great question. The good news is that the answer is YES. The bad news is that it is not all that intuitive to find. Of course, you know that or you would not need to ask this question. Let me try to explain the steps here, but feel free to reach out to me directly (price@yukongroupinc.com) and I can send a quick video demonstration as well.

      Here are the steps:
      1. Right click on of the objects on the screen
      2. Choose “Size and Position”
      3. This opens up the “Size and Position” dialogue box – You will notice the size and position information for your object. Leave this dialogue open.
      4. Choose the animation tab
      5. Click on the motion path animation that you want to adjust. You should notice that the size and position information has changed. It is now telling you about the length and position of the path
      6. Adjust the numbers here and you can edit these charateristics pixel by pixel.

      I hope that helps.

      Reply
      • Randy Schmidt says

        November 29, 2016 at 9:57 am

        Thank you for the pro-tip Ron!

        This has allowed me to synchronize my closed caption feature with my audio driven timeline.

        These Articulate Trainers really know their stuff!

        Randy

        Reply
      • Terry Bell says

        June 1, 2017 at 5:29 pm

        Thanks – this post was exactly what I needed.. and I’m so glad I read the comments, because I had no idea about using the Size and Position dialog for motion paths!
        Awesome!

        Reply
        • Yukon Learning says

          June 1, 2017 at 5:45 pm

          Glad we could help, Terry!

          Reply
  6. Jane Hall says

    July 10, 2018 at 9:13 am

    Thank you! This was really helpful. I needed to put a large amount of text on a slide and the scrolling box seemed like the best solution. It worked well, but it was difficult to grab the scroll bar. I was pulling my hair trying to make the scroll bar larger, when I thought wouldn’t it be nice if it would just scroll automatically. I googled for directions and found your article with clear directions to boot. It works wonderfully. Thank you so much!!
    Jane

    Reply
    • Yukon Learning says

      July 10, 2018 at 10:10 am

      That’s great, Jane! I’m so glad it worked for you!

      Reply
  7. Eswarkumar says

    December 20, 2018 at 2:21 am

    Thankyou for sharing this

    Reply
    • Yukon Learning says

      November 14, 2023 at 9:07 am

      Thank you – we hope you found it helpful!

      Reply
  8. Julie says

    November 13, 2023 at 4:08 pm

    Thank you so very much for this tutorial it is brilliant, like Jane above I too was scouring the net trying to find out how to get this effect when I found your article. I am a little confused on the application of the size and position controls but I will have a play and see if I can better understand the benefits and how to use that on motion paths.
    Again thanks so much 🙂

    Reply
    • Yukon Learning says

      November 14, 2023 at 9:07 am

      Hi Julie! We’re so glad you found it helpful. We try to answer questions learners ask in class, so we’re glad this one was one you needed. Have fun playing!

      Reply
  9. Julie says

    November 13, 2023 at 7:00 pm

    Hi Ron
    I am not sure if this page is still being monitored
    I have setup the auto cinema scroll screen and have two issues I can’t seem to overcome
    1. line path animation does not start moving from where I have set it on the timeline there is
    significant delay
    2 I want to allow the user to replay the animation from the beginning if desired: I inserted a button and set its trigger ‘move animation (text) along line path 1 when animation completes (text) on line path 1, with the condition ‘if he state of button 1 =selected.’ When i test it the button changes to selected state but the animation doesn’t restart/loop as expected.
    Any ideas or help would be very greatly appreciated.
    Many thanks
    Julie

    Reply
    • Yukon Learning says

      November 14, 2023 at 9:09 am

      Hi Julie! Yes, we’re monitoring this page, and Ron is on your email. He’ll reach out to you directly and take great care of you.

      Reply
  10. Jodi Sansone says

    August 16, 2024 at 1:39 pm

    Thank you for this post. Even though it’s several years old I had forgotten how to do this! I reminds me of my first session with you in 2016 when we were moving the canoe around the screen!

    Reply
    • Yukon Learning says

      August 16, 2024 at 1:53 pm

      So glad you found it again and it was helpful! We hope you are doing awesome! See you at DevLearn?

      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.