❮ Previous

GSAP MotionPathHelper (Visual Path Editor)

  • MotionPathHelper lets you visually edit GSAP motion paths directly in the browser, saving time and effort.

  • Introduction

    MotionPathHelper is a developer tool in GSAP that helps you visually edit and debug motion paths directly in the browser.

    Instead of guessing SVG path values, you can drag points visually and get perfect motion paths.

    This tool works with MotionPathPlugin from GreenSock GSAP.

Installation / Setup 

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/MotionPathHelper.min.js"></script>
gsap.registerPlugin(MotionPathPlugin, MotionPathHelper);

  • Basic Concept

    • MotionPathPlugin animates elements along a path

    • MotionPathHelper shows and edits that path visually

    • You can move anchor points and curves

    • Final SVG path can be copied into code

Basic Syntax 

MotionPathHelper.create(".box");

Simple Motion Path + Helper 

gsap.to(".box", {
  duration: 4,
  motionPath: {
    path: "M50,300 C150,100 350,100 450,300",
    align: ".box"
  },
  ease: "none"
});

MotionPathHelper.create(".box");

  • Edit Path Visually

    • Drag anchor points

    • Adjust curves

    • Watch animation update in real-time

    • Copy updated path from console

    ✔ No SVG editor required

Helper with SVG Path 

gsap.to(".rocket", {
  motionPath: {
    path: "#path",
    align: "#path",
    autoRotate: true
  },
  duration: 5
});

MotionPathHelper.create(".rocket");

  • Best Practices

    • Enable helper only in dev mode

    • Remove helper before deployment

    • Use helper to refine curves visually

    • Combine with SVG paths for precision

  • Comparison

    ToolPurpose
    MotionPathPluginAnimate along path
    MotionPathHelperVisual editor/debugger
    SVG EditorCreate initial path
    CSS transformLinear motion only

  • Quick Summary

    • MotionPathHelper is a visual dev tool

    • Helps edit GSAP motion paths

    • Saves time and effort

    • Works with MotionPathPlugin

    • Not for production use

❮ Previous