3. A simple demo

This section will walk through a simple scrollytelling demo using Maplibre GL JS, a popular open-source mapping library. The demo will include a sticky overlay and scroll-triggered animations to demonstrate the basics of scrollytelling. Click "View code" to see the full code for the demo.

Loading...

Download the code above to try it out yourself.

A recap of what is happening:

• The background is the map with full viewport height and position: sticky.
• The foreground contains the text cards.
• Scrollama is being used to trigger events (i.e. run additional code) based on scroll position. The offset is 0.5 meaning when the card is halfway through the viewport, it will trigger an event. You can see what is returned by Scrollama in the sidebar.
• The event being triggered when the a new card comes into view is to use the flyTo() feature of Maplibre GL JS to fly to a new city.

There are lots of different ways to implement scrollytelling and this demo is just one example. Good scrollytelling takes first and foremost a good story and compelling visuals and second, careful attention to the user experience. Now go off and make cool, impactful things for the web!