ScrollyTelling with FreeCamera API snippet

100%

ScrollyTelling with FreeCamera API snippet

✓ Published0🌍 Public

Last edited Aug 4, 2021

Created on Aug 4, 2021

This example demonstrates scroll-driven animation in a Mapbox GL map, syncing a free camera’s position and view target along geographic routes. Using Turf.js’s `length` and `along` functions, it interpolates points based on scroll rate, then sets the camera’s mercator coordinates and look-at point via `map.getFreeCameraOptions` and `map.setFreeCameraOptions`. A scroll event listener triggers `requestAnimationFrame` to update the view smoothly. The code shows route and camera path synchronization, with altitude fixed, rendering an animated flythrough tied to page scroll.

AI-generated description

Similar vizzes

Loading thumbnail…

Mapbox - ScrollyTelling with FreeCamera API

A scrolling narrative climbs Mt. Fuji using a Mapbox map with the FreeCamera API. As the user scrolls, the camera moves along a defined route while the view follows a hiking path drawn as a line layer, with terrain exaggeration and an atmospheric sky. The example combines Mapbox GL JS, D3.js for CSV data loading, and Turf.js to interpolate the camera and target routes.

HHirosaji

85% match

Loading thumbnail…

Position Helper

Built with Mapbox GL JS v1.5.0 and the Mapbox Geocoder plugin, this interactive map acts as a position helper for scrollytelling projects. A fixed crosshair target sits at the screen center, while a side panel continuously displays the map’s current center coordinates, zoom level, pitch, and bearing. The tool updates these parameters on every map move, and also adds a 3D building extrusion layer from the Mapbox composite source. This provides a practical way to copy camera settings for storytelling sequences, as demonstrated in the linked Mapbox blog example.

HHirosaji

68% match

Loading thumbnail…

Scrollytelling Template

This scrollytelling template uses Mapbox GL JS and Scrollama to guide viewers through a narrative about crime statistics in Tokyo, overlaying data on a map of the city. It shows the geographic distribution of crimes, Olympic venue locations, and popular residential rankings, with map layers and camera positions changing as the viewer scrolls. The code uses Mapbox GL JS’s `setPaintProperty` to adjust layer opacity and the IntersectionObserver API to trigger chapter transitions. Data is sourced from the Tokyo Metropolitan Police and SUUMO rankings.

HHirosaji

67% match

Loading thumbnail…

Fork of Sample_Leaflet_scrollytelling2

This example demonstrates a scrollytelling interaction where scrolling through text sections triggers corresponding map views in a fixed panel. It uses a scrollable column with content sections and a fixed column containing a Leaflet map, along with hidden alternative fixed content. The JavaScript listens to scroll events on the scrollable column, checks section visibility with `getBoundingClientRect()`, and calls `map.flyTo()` to animate the map to different coordinates and zoom levels for each section. The map itself uses Leaflet with CartoDB Voyager tiles, and the interaction is built with vanilla JavaScript and CSS, without additional frameworks like React.

FFrancesco Di Filippo

65% match

Loading thumbnail…

Pixymaps (Scrolling)

A scrolling map of San Francisco pans continuously leftward, with a tile-based image rendered to a Canvas element. The example uses the `pixymaps` library to manage view coordinates and tile loading, while the D3.js timer drives a subtle acceleration that increases scroll speed. Map tiles are loaded from CloudMade, and the view is projected using `d3.geo.mercator` to center the map. The animation updates the canvas by panning the view and re-rendering the image each frame.

Mmbostock

63% match

Loading thumbnail…

Gist d9599cfc20b6d22a16a88e65dfa45115

Scrolleo demonstrates a scrolling-driven video playback technique, where page scroll position controls video frames with an inertial easing effect. The page presents two HTML5 videos that play and scrub as the user scrolls, mimicking Apple’s product page interactions. The implementation relies on the Scrolleo plugin, which uses `requestAnimationFrame` for smooth updates and applies an acceleration value to create momentum-based scrubbing. Videos are embedded directly in the page’s flow, with large vertical spacers ensuring ample scroll space. The code computes video timing based on scroll offset and duration, enabling frame-accurate control without explicit user interaction.

EEelsie

61% match

Loading thumbnail…

Mapbox Storytelling

This interactive map tells a scrollytelling story about Philadelphia’s bicycle infrastructure. Using the Mapbox GL JS API, a fixed map is paired with scroll-driven chapters that reveal and hide separate layers—such as bike lanes, Indego bike-share stations, and trail networks—by adjusting their paint property opacities. The Scrollama library and Intersection Observer handle the chapter activation, while a JavaScript config file defines the narrative content and camera positions.

TThandolwethu Shakes Dlamini

61% match

Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example shows a continuously rotating and reprojecting world map rendered onto a canvas texture inside a 3D A-Frame scene. It demonstrates how geographic data can be integrated with WebVR-style environments, drawing country polygons, graticules, and the sphere outline using D3 v4’s `d3.geoMercator` projection, `d3.geoPath`, and `d3.geoGraticule`. The animation runs via `d3.timer`, updating the projection rotation each frame and clearing/redrawing the canvas context. The map uses GeoJSON world land data loaded from `land.geojson` and displays alongside a simple A-Frame box primitive.

AAlexanderDavidson

61% match