❮ Previous

GSAP MotionPath Plugin – Animate Elements Along a Path

  • Learn how to move elements smoothly along SVG paths using GSAP MotionPath plugin with practical, real-world examples.

  • Introduction

    GSAP MotionPath allows you to animate elements along a custom path, usually an SVG path.

    Instead of moving elements only in straight lines (x and y), MotionPath lets you create curved, natural, and complex animations.

    It is widely used in:

    • SVG animations

    • Website hero animations

    • Interactive storytelling

    • Product walkthroughs

    • Scroll-based animations

    MotionPath is a plugin provided by GreenSock.

Basic MotionPath animation: 

gsap.to(".box", {
  duration: 2,
  motionPath: {
    path: "#path",
    align: "#path"
  }
});

  • Parameters / Options

    OptionDescriptionDefault
    pathSVG path or array of pointsrequired
    alignAlign element to pathnone
    autoRotateRotates element with path directionfalse
    startStart point of path (0–1)0
    endEnd point of path (0–1)1

Basic SVG Path Animation 

gsap.to(".dot", {
  duration: 3,
  repeat: -1,
  motionPath: {
    path: "#curve",
    align: "#curve",
    autoRotate: true
  }
});

Path Animation with ScrollTrigger 

gsap.to(".plane", {
  scrollTrigger: {
    trigger: ".section",
    scrub: true
  },
  motionPath: {
    path: "#flightPath",
    align: "#flightPath"
  }
});

  • Best Practices

    • Always define SVG viewBox

    • Use autoRotate only when needed

    • Keep SVG paths simple for performance

    • Test on different screen sizes

    • Combine with ScrollTrigger for advanced UX

❮ Previous