This tutorial will show you how to build an animated map using SVG and GSAP.js. The goal is to create an eye-catching interaction that is uncomplicated, lightweight, and doesn’t require the use of a third-party map API.

The Setup

We’ll use an SVG element to create our responsive stage. It contains:

a map image,

a path,

circles marking the start and end of the route,

and two groups for “camera” movement

GSAP draws the path, moves our point-of-view, and ties our timeline progress to scroll position. For this, you’ll need to include the following scripts:

gsap.min.js

ScrollTrigger.min.js

DrawSVGPlugin.min.js

MotionPathPlugin.min.js

Here’s a minimal demo with all of this working together.

Let’s break down the HTML and CSS before walking through the JS:

<section id="s1"> (scroll down) </section>

<section id="s2"> <svg class="map" viewBox="0 0 1500 1500" preserveAspectRatio="xMidYMid slice"> <g class="pov"> <g fill="#fff" stroke="#223e6b" stroke-width="2" stroke-linejoin="round"> <image…