GSAP MotionPath

Instead of manually animating x and y positions, MotionPath allows elements to follow complex curves, SVG paths, or coordinate arrays

Table of Contents

Overview

How MotionPath Works

Installation

CDN

ES Modules

Basic Usage

Basic Example

MotionPath Options

Align Element to Path

Auto Rotation

Example — Auto Rotate

Path Progress

Example — Partial Path Animation

MotionPath With Coordinates

Timeline Motion

Scroll-Based Motion

Performance Best Practices

Use SVG Paths

Avoid Excessively Complex Paths

Use ease:"none" for Path Motion

Common Use Cases

Browser Support