Follow SVG Path on Scroll

Live Preview

Documentation

Webflow

Code

Setup: External Scripts

HTML

Copy

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/MotionPathPlugin.min.js"></script>

Step 1: Copy structure to Webflow

Copy to Webflow

Webflow structure is not required for this resource.

Step 1: Add HTML

HTML

Copy

<div data-motionpath="wrap" class="motionpath-wrap">
  <div class="motionpath-content">
    <h1 class="motionpath-content-title">SPACES</h1>
    <div class="motionpath-content-inner">
      <div class="motionpath-content-path">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1366 603" fill="none" preserveaspectratio="none" class="motionpath-svg">
          <path data-motionpath="path" d="M1115.94 0C1297.33 38.9693 1626.89 444.65 993.816 562.057C407.372 670.816 89.0772 533.413 0 436.157" stroke="transparent"></path>
        </svg>
      </div>
      <div class="motionpath-content-wrap">
        <div class="motionpath-content-list">
          <div data-motionpath="item" class="motionpath-content-item">
            <div class="motionpath-content-item__visual">
              <img src="https://cdn.prod.website-files.com/684fe83006c8046ffc2d3616/685bbbdbe72f870106909210_Minimalist%20Terracotta%20Room.avif" class="motionpath-content-item__img">
            </div>
            <div data-motionpath="item-details" class="motionpath-content-item__details">
              <span class="motionpath-content-item__label">Image 001</span>
              <h3 class="motionpath-content-item__title">Master bedroom</h3>
            </div>
          </div>
          <div data-motionpath="item" class="motionpath-content-item">
            <div class="motionpath-content-item__visual">
              <img src="https://cdn.prod.website-files.com/684fe83006c8046ffc2d3616/685bbbdb2a4dda2ba7fc3147_Terracotta%20Dining%20Room.avif"  class="motionpath-content-item__img">
            </div>
            <div data-motionpath="item-details" class="motionpath-content-item__details">
              <span class="motionpath-content-item__label">Image 002</span>
              <h3 class="motionpath-content-item__title">Dining room</h3>
            </div>
          </div>
          <div data-motionpath="item" class="motionpath-content-item">
            <div class="motionpath-content-item__visual">
              <img src="https://cdn.prod.website-files.com/684fe83006c8046ffc2d3616/685bbbdbe72f870106909213_Terracotta%20Kitchen%20Design.avif"  class="motionpath-content-item__img">
            </div>
            <div data-motionpath="item-details" class="motionpath-content-item__details">
              <span class="motionpath-content-item__label">Image 003</span>
              <h3 class="motionpath-content-item__title">Open kitchen</h3>
            </div>
          </div>
          <div data-motionpath="item" class="motionpath-content-item">
            <div class="motionpath-content-item__visual">
              <img src="https://cdn.prod.website-files.com/684fe83006c8046ffc2d3616/685bbbde57b0bf84b0d815c1_Luxurious%20Terracotta%20Bathroom.avif"  class="motionpath-content-item__img">
            </div>
            <div data-motionpath="item-details" class="motionpath-content-item__details">
              <span class="motionpath-content-item__label">Image 004</span>
              <h3 class="motionpath-content-item__title">Spacious bathroom</h3>
            </div>
          </div>
          <div data-motionpath="item" class="motionpath-content-item">
            <div class="motionpath-content-item__visual">
              <img src="https://cdn.prod.website-files.com/684fe83006c8046ffc2d3616/685bbbdbdfeae088022b8ee7_Minimalist%20Terracotta%20Room%20(1).avif"  class="motionpath-content-item__img">
            </div>
            <div data-motionpath="item-details" class="motionpath-content-item__details">
              <span class="motionpath-content-item__label">Image 005</span>
              <h3 class="motionpath-content-item__title">Terrace</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

HTML structure is not required for this resource.

Step 2: Add CSS

CSS

Copy

.motionpath-wrap {
  width: 100%;
  height: 450vh;
  position: relative;
  overflow: clip;
}

.motionpath-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.motionpath-content {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}

.motionpath-content-inner {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.motionpath-content-path {
  width: 100vmax;
  height: 100%;
  max-height: 45vh;
}

.motionpath-svg {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.motionpath-content-wrap {
  z-index: 1;
  position: absolute;
}

.motionpath-content-item {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: absolute;
}

.motionpath-content-item__visual {
  aspect-ratio: 1 / 1.5;
  border-radius: .75em;
  flex: none;
  width: max(24vw, 12rem);
  overflow: hidden;
}

.motionpath-content-item__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.motionpath-content-item__details {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  white-space: nowrap;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 2em;
  display: flex;
}

.motionpath-content-item__title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2em;
  font-weight: 500;
  line-height: 1;
}

.motionpath-content-item__label {
  color: #13131399;
  background-color: #fff;
  border-radius: 100em;
  padding: .5em .75em;
  font-size: .75em;
  font-weight: 500;
  line-height: 1.2;
}

.motionpath-content-title {
  z-index: 0;
  color: #1313130f;
  margin-top: 0;
  margin-bottom: 0;
  font-family: PP Neue Corp Tight, Arial, sans-serif;
  font-size: 30vw;
  line-height: .8;
  position: absolute;
}

@media screen and (max-width: 767px) {
  .motionpath-content-inner {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .motionpath-content-path {
    max-height: 70vh;
  }

  .motionpath-content-item {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }

  .motionpath-content-item__details {
    grid-column-gap: .5em;
    grid-row-gap: .5em;
    padding-top: 1em;
  }

  .motionpath-content-item__title {
    font-size: 1.25em;
  }

  .motionpath-content-item__label {
    font-size: .625em;
  }
}

Step 2: Add custom Javascript

Step 2: Add Javascript

Step 3: Add Javascript

Javascript

Copy

gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);

function initImagesOnPathScroll() {
  const wrap = document.querySelector('[data-motionpath="wrap"]');
  const path = wrap.querySelector('[data-motionpath="path"]');
  const items = wrap.querySelectorAll('[data-motionpath="item"]');
  const itemDetails = wrap.querySelectorAll('[data-motionpath="item-details"]')

  // Set z-index on items, to make sure the 1st item is on top
  gsap.set(items, {
    zIndex: (i, target, all) => all.length - i
  });

  // if there’s an old timeline, grab its progress, reset it, then kill it
  const oldTl = initImagesOnPathScroll.tl;
  let progress = 0;
  
  if (oldTl) {
    progress = oldTl.progress();
    oldTl.progress(0).kill();
  }

  // create a new timeline + ScrollTrigger
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: wrap,
      start: 'top top',
      end: 'bottom bottom',
      scrub: true
    },
    defaults: {
      ease: 'none',
      stagger: 0.3 // Define the space between each item
    }
  });

  tl.to(items, {
      duration: 1,
      motionPath: { path, align: path, curviness: 2, alignOrigin: [0.5, 0.5] }
    })
    .fromTo(items,
      { autoAlpha: 0, },
      { autoAlpha: 1, duration: 0.1 },
      0
    )
    .fromTo(items,
      { filter: 'blur(1.5em)' },
      { filter: 'blur(0em)', duration: 0.5 },
      0
    )
    .fromTo(itemDetails,
      { autoAlpha: 0, yPercent:25 },
      { autoAlpha: 1, yPercent:0, duration: 0.1,},
      0.5
    )    
    .fromTo(items,
      { scale: 0.4 },
      { scale: 1, duration: 0.65 },
      0
    )
    .to(items, { autoAlpha: 0, filter: 'blur(1em)', duration: 0.15 }, 0.85)
    .to(itemDetails, { autoAlpha: 0, duration: 0.05 }, 0.9)
    
    
  // jump back to previous spot and refresh
  tl.progress(progress);
  ScrollTrigger.refresh();

  // store it on the function so we can grab it next time
  initImagesOnPathScroll.tl = tl;

  // on first run bind a single debounced resize listener
  if (!initImagesOnPathScroll.resizeHandler) {
    initImagesOnPathScroll.resizeHandler = debounce(() => {
      initImagesOnPathScroll();
    }, 200);
    window.addEventListener('resize', initImagesOnPathScroll.resizeHandler);
  }

  return tl;
}

function debounce(fn, delay = 200) {
  let timeout;
  return () => {
    clearTimeout(timeout);
    timeout = setTimeout(fn, delay);
  };
}

document.addEventListener("DOMContentLoaded", () =>{
  initImagesOnPathScroll();
});

Step 3: Add custom CSS

Step 2: Add custom CSS

CSS

Copy

/* This is optional! Only add if you're NOT going to use a CMS list. 
The below snippet will stack your items in the Webflow designer and editor only, so you can edit content easier. */

.wf-design-mode .motionpath-content-list,
.w-editor .motionpath-content-list{ 
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: scroll;
}

.wf-design-mode .motionpath-content-item,
.w-editor .motionpath-content-item{ 
  position: relative;
}

Documentation

In this resource we're combining GSAPs ScrollTrigger with the MotionPath plugin to create this very cool scroll effect. This can be used to animate a stack of items (images, cards, links, etc) along any SVG path as the user scrolls. Each item fades, blurs, scales, and reveals its child content at precise scroll positions. Everything can be tweaked to your liking of course!

HTML Structure

Add the following attributes in your HTML:

data-motionpath="wrap" → Container for the scroll-triggered animation. The height of this element determines how long your animation will take to scroll through.
data-motionpath="path" → SVG <path> element defining the motion curve. This can have any shape or size, get creative!
‍data-motionpath="item" → The actual items we will move along the path.
data-motionpath="item-details" → If you have children of your main 'item' elements that need to be animated seperately.

JS Options

For the ScrollTrigger itself we don't do anything special. Besides control your typical start and end points, here's 2 options you may want to play with:

scrub: true → Syncs the timeline with scroll progress. If you combine this with Lenis scroll, it will feel super smooth.
stagger: 0.3 → Change this to define how much space there should be between each item.

The actual 'magic' that makes your items follow the SVG path, all happens in the first tween on our timeline. We have used and defined the below values, but we encourage you to explore some of the other super fun options in the official GSAP docs.

tl.to(items, {
  duration: 1,
  motionPath: { 
    path, // Use our path variable
    align: path, // Align our items to this path
    alignOrigin: [0.5, 0.5], // Determines how the item is aligned to the actual path
    curviness: 2, // Determines how 'curvy' the motion is of your items along the path
  }
})

Responsiveness

As you will notice by checking our example HTML/CSS, we have played a bit with responsive values for the width and height of the path. This is very specific to each project, so feel free to play around with this to match your exact requirements. Notice how we've defined preserveAspectRatio of none on our SVG element, to make the path scale accordingly.

A heads-up for this animation is that it's rather expensive for mobile devices to handle. We're animating blur, and complex transforms. So you might want to keep that in mind! An alternative could be to drop this animation entirely on mobile, and opt for a different layout/design.

For Webflow Users

Our example copies a static list of images. This can easily be adapted to a CMS list! Replace the following items:

.motionpath-content-wrap → your CMS List Wrap
‍.motionpath-content-list → your CMS List
‍.motionpath-content-item → your CMS List Item

If you'd rather use it as a static list, so without the CMS, it can be tricky to edit all the content. That is because our items are stacked on top of each other with position: absolute. That's why we gave a little bit of custom CSS earlier that you can include in your project. This makes sure that your items are all stacked underneath each other, wrapped in a div with overflow: scroll. This way, even a client in edit mode could adjust the content. Although, we strongly recommend using the CMS, in which case you do not

‍

Live Preview

Resource Details

Last updated
June 25, 2025
Type
The Vault
Category
Scroll Animations
Need help?
Join Slack

Advanced

GSAP

Scrolling

SVG

List

Interactive

Scrolltrigger

Timeline

Original source

Ilja van Eck

Follow SVG Path on Scroll

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Documentation

HTML Structure

JS Options

Responsiveness

For Webflow Users

Creator Credits

Welcome to the Vault 👋

Upgrade to lifetime

Osmo Slack Community

Need help?

Follow SVG Path on Scroll

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Documentation

HTML Structure

JS Options

Responsiveness

For Webflow Users

Creator Credits