Animate a Scrolling Panel

Mar 13, 2015

Jennifer Barnett-Russell
By Jennifer Barnett-Russell

I'm currently working on a course where all of the pages needed are extremely long.  Because of this, I'll be putting them in scrolling panels.  The issue I have is that often the user will need to scroll all the way down to see a topic that is being discussed in the eLearning or access the hotspot to go to the next page.

This severely limits my ability to do animations and point out the important parts of the page.  It also limits my ability to guide the user to the hotspot when they click elsewhere, which could result in the course being difficult to use for non-techy folks.

I have a few other possible solutions to this issue, but the BEST solution would be to animate the scrolling panel.  I'm just wondering if someone has the JavaScript needed to animate scrolling the scrolling panel.  I'm certainly no JavaScript expert but with the basics I should be able to adjust it as needed.

My alternative option is to just show parts of the page in the course but have buttons that would lightbox other slides with the scrolling panels.  If anyone else has creative ideas for how to circumvent this issue, I'd love to hear them too!

4 Replies
Deanna Brigman
9 years ago03/13/15 at 6:37 pm (UTC)

Hopefully I am understanding what you are looking to do.

You could divide your text up into several layers, with animations, to give the illusion of scrolling. You could set up buttons that when clicked go to the previous and next portion of text. If you are using Storyline 2 you could use the slider bar to do the same thing.

This would allow you to display the text in logical groups, and allow you to do animations when they get to specific portions of text.

Steve Flowers
9 years ago03/13/15 at 8:40 pm (UTC)

The Zoom Region might also be helpful in your case. Depending on what else you have on the slide at the time, setting up zoom regions in your timeline and transitioning between them to focus on a specific area might do it for you. A few tricks& caveats:

  • You'll want to keep a full size (not scaled down) image off to the side of your slide. This will ensure that your image isn't as fuzzy as it would be when zoomed in.
  • Storyline's maximum size of image is a little over 2000 pixels as I remember. You may want to slice up your image if it's bigger than this. You can use the zoom region on a sliced set of images (anything on the slide).
  • You can use things like callouts and graphics. Even animations. Just be sure to scale them down (and possibly slow them down) because the zoom region is like a microscope:)

This discussion is closed. You can start a new discussion or contact Articulate Support.