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

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

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

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.

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

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