Scroll-to-pan

Scroll-to-pan

Scroll-to-pan

What Problem Does This Solve?

Missing narrative connecting a story or set of places.

When to Use This Pattern

Add a narrative to the data you want to showcase, i.e. typically a set of connected or related places (e.g. soccer stadiums of the World Cup) or a sequence of events or locations like a multi-day hike or tour.

What’s the Solution?

Provide an interface that indicates to users that scrolling will reveal more content. As the user starts scrolling, the map simultaneously pans (and/or zooms) to the new extent.

Why Use This Pattern?

Guiding the user through a set of places lets the author of the map tell the intended story. Users navigate the application with the familiar scrolling pattern while relying on the map to synchronize content and map extent.

Special Considerations

Ways to indicate the ability to scroll include:

  • Add a scrollbar
  • Reveal parts of the next section below the fold
  • Add carousel navigation (dots and arrows)
  • Utilize micro interactions to hint scrolling

Examples

Scroll-to-pan (Ddot)

Scroll-to-pan (Ddot)

Scroll-to-pan (Esri Map Journal StoryMap)

Scroll-to-pan (Esri Map Journal StoryMap)

Leave a Reply