Using Scrolling Panels in E-Learning (2020) #273

I'll shed some light on how this came together:
https://josephsuarez.com/portfolio/ELC/273/reveal

It uses a couple masking techniques and strategically places objects behind, inside, or above the scrolling panel. Things inside move, things behind or above stay in place.

The map (inside) is a PNG image created in Photoshop and only the trail is transparent. This allows a simple shape in Storyline (behind) to show through and give the illusion that it animates as it scrolls.

The text for the states (inside) is masked by a couple white shapes (above). Since the shapes were white they blended into background and looked invisible. I also used a subtle gradient fill on these shapes from white to transparent to make it look like the text was fading in and out.

Really nice interaction. Could you please enlighten us with information ofhow you did it?

That's great. Can you describe how you did the animation on the trail?

This is really great Joseph!

I'm guessing the trail is a cutaway in the map and we're seeing a static shape beneath it as the map moves? Very clever and very effective.

I've always wanted to do the Appalachian Trail too.

Joseph - I love the scrolling technique you used for the line that moves down from Maine to Georgia. How did you do that? I also love the Appalachian trail. I used to hike parts of it when I lived in Pennsylvania and I've always admired people who hiked the entire trail. I saw this really cool documentary about this guy that ran the entire trail. Pretty cool.

Brilliant. Brilliant. Brilliant. Brilliant. Brilliant.

that is a very cool scrolling panel, and gives us all inspiration of just what can be achieved.
another one for my 'must try' list

Really love the way that works well done. Going to have to try that .png technique

Wow, the graphics in that were really cool. Amazing how fluid you made it. Nice work!

Hi Joseph, that's an amazing visualization!!! Thank you for explaining how you did it!