GSAP MotionPath — Animating Along SVG Paths

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about GSAP MotionPath. We cover key concepts, practical examples, and best practices to help you master this topic.

GSAP MotionPath plugin animates elements along SVG path data, supporting path strings, path references, alignment, and path-based easing.

What You'll Learn

By the end of this guide, you will animate elements along SVG paths, use path easing for non-linear motion along a path, align element rotation to path direction, modify paths dynamically, and create complex path sequences.

Basic MotionPath

gsap.to('.plane', {
    motionPath: {
        path: '#flight-path',
        align: '#flight-path',
        alignOrigin: [0.5, 0.5],
        autoRotate: true
    },
    duration: 3,
    ease: 'power1.inOut'
});

Inline Path Data

gsap.to('.ball', {
    motionPath: {
        path: 'M0,0 C100,200 200,200 300,0',
        autoRotate: false
    },
    duration: 2
});

Path Easing

gsap.fromTo('.dot',
    { motionPath: { path: '#path', start: 0, end: 0 } },
    { motionPath: { path: '#path', start: 0, end: 1 }, duration: 3 }
);

Multiple Points on Path

var tl = gsap.timeline();

[dot1, dot2, dot3].forEach(function(dot, i) {
    tl.fromTo(dot,
        { motionPath: { path: '#path', progress: 0 } },
        { motionPath: { path: '#path', progress: 1 }, duration: 2 },
        i * 0.3
    );
});

Common Mistakes

1. Missing Path Reference

The path option requires a valid path string or element selector. An empty or invalid path causes errors.

2. alignOrigin Not Set

alignOrigin defaults to [0.5, 0.5]. For large elements, the pivot point can appear off-center.

3. autoRotate Issues

autoRotate: true rotates the element to match the path tangent. For horizontal paths, the initial rotation may flip.

4. Path Coordinate Space

Path coordinates are in SVG viewBox space. The element may start at a different position than expected if the path is not at 0,0.

5. MotionPath on Non-GSAP Elements

MotionPath only works with GSAP-eligible targets (DOM elements). It does not work with canvas.

Practice Questions

Q1: What plugin is needed for MotionPath? A: GSAP MotionPath plugin. Include it after gsap core.

Q2: How do you align an element to the path direction? A: Set autoRotate: true in the motionPath config.

Q3: How do you use an SVG path element? A: Pass the path element's id as a string: path: '#my-path'.

Q4: What does alignOrigin do? A: It sets the pivot point for alignment and rotation as a fraction of the element's size.

Q5: How do you get the current path progress? A: Access the tween's motionPath.progress property.

Challenge: Create a solar system animation with planets orbiting the sun on elliptical paths. Each planet has a different duration and path size.

FAQ

Can I use MotionPath with canvas elements?

No. MotionPath works with DOM and SVG elements only.

Does MotionPath support 3D?

No. MotionPath is 2D only. Use z with CSS transforms for 3D effects.

Can I update the path during animation?

Yes. Use tween.vars.motionPath.path = newPath and tween.invalidate().

How do I make a looping path?

Use a closed path (Z command) and set repeat: -1 on the tween.

Can I use MotionPath with ScrollTrigger?

Yes. The scroll progress drives the path position.

Try It Yourself

Animate a plane along a flight path.

<!DOCTYPE html>
<html>
<head>
    <title>GSAP MotionPath Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12/MotionPathPlugin.min.js"></script>
    <script>gsap.registerPlugin(MotionPathPlugin);</script>
    <style>
        .plane { font-size: 32px; position: absolute; left: 0; top: 0; }
        svg { width: 100%; height: 300px; }
    </style>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Motion Path</h2>
<button onclick="playPath()">Fly</button>
<button onclick="resetPlane()">Reset</button>
<div style="position:relative;">
    <svg viewBox="0 0 600 300">
        <path id="flight-path" d="M50,150 Q100,50 200,150 T350,150 T500,150" fill="none" stroke="#e0e0e0" stroke-width="2" stroke-dasharray="5,5"/>
    </svg>
    <div class="plane" id="plane">&#9992;</div>
</div>
<script>
gsap.set('#plane', { x: 50, y: 150 });

function playPath() {
    gsap.to('#plane', {
        motionPath: {
            path: '#flight-path',
            align: '#flight-path',
            alignOrigin: [0.5, 0.5],
            autoRotate: true
        },
        duration: 3,
        ease: 'power1.inOut'
    });
}

function resetPlane() {
    gsap.killTweensOf('#plane');
    gsap.set('#plane', { x: 50, y: 150, rotation: 0 });
}
</script>
</body>
</html>

What's Next

Use Draggable for interactive elements.

Draggable — GSAP Draggable. Text Plugin — Text animation plugin.

← Previous GSAP Timeline Controls — Sequencing and Managing Animations Next → GSAP Draggable — Interactive Drag-and-Drop Elements

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Gsap