Storyline: Explore the Appalachian Trail - E-Learning Examples

Graphic Designer

Find out how many states the Appalachian Trail runs through in this great example of using scrolling panels to display maps.

Explore this project.

12 Comments

Ashleigh Turvey

4 years ago04/16/20 at 9:21 am (UTC)

This is awesome!! Love it. How did you do that?!

Tammy Miller

4 years ago04/16/20 at 11:32 am (UTC)

I absolutely love this!

Billi Switalski

4 years ago04/16/20 at 2:31 pm (UTC)

really neat - I would like to know how this was created as well.

Tamara Staton

4 years ago04/17/20 at 4:51 am (UTC)

Wow, impressive. I, as well, am curious about how you did this!

Rachna Ghiya

almost 4 years ago04/20/20 at 10:28 am (UTC)

Loved it.

Reginald Dunn

almost 4 years ago04/20/20 at 2:34 pm (UTC)

This is NICE!!!!

Annette Caneda

almost 4 years ago04/21/20 at 4:50 pm (UTC)

Impressive! I like it.

Sherri Sagers

almost 4 years ago04/30/20 at 10:41 pm (UTC)

I'm curious how you did this, too! Any chance of us seeing what's happening on the back end? Love it!

kathryn brown

almost 4 years ago05/07/20 at 5:45 pm (UTC)

I agree with everyone else. This is awesome!!! How did you do this?

Steven Haigh

almost 4 years ago05/13/20 at 1:40 pm (UTC)

That is incredible, how on earth did you do it?

Susan Alderson

almost 4 years ago06/10/20 at 1:54 pm (UTC)

This is very nice and simple. Would love to understand the approach for the animation for the path changing with the scroll.

Holly Avery

over 3 years ago10/07/20 at 10:36 pm (UTC)

Figured out how it was built! I haven't reconstructed it so I don't have a file for ya'll but I took a peak at the code to verify. - (middle layer) The map is a png within a scroll panel. The white trail part of the map is cutout/transparent. The red text is also within the scroll panel, lined up along the map next to the corresponding states. - (bottom layer) Below the scroll panel (not within it) and aligned with the trail is a static yellow rectangle. - (top layer) On top of everything, and to the right of the map, are two static rectangles with transparent gradients. They cover all the the text you cannot see while scrolling. There is space between them to reveal the name of one state name at a time.