Jump to content
GreenSock


| GreenSock
171850

Animate anything (SVG, DOM, canvas, generic objects, whatever) along a motion path in any browser. Define the path using an SVG <path> or an Array of points. The magical "align" feature bends coordinate systems and really sets it apart. You can even edit the path in-browser using MotionPathHelper!

Video

Feature highlights

  • Magical align capabilities that bend coordinate systems in order to position the target exactly on top of the path (or move the path to the target), regardless of how deeply nested they are inside different transformed containers! This is insanely convenient and no other tool on the web offers this functionality!
  • autoRotate makes the target rotate automatically in the direction of the path as it moves.
  • Define specific start and/or end positions on the path (progress values from 0-1). Even wrap around or go backwards!
  • A separate MotionPathHelper tool for Club GreenSock members enables interactive editing of the path directly in the browser!
  • No need to supply an SVG path - you can provide raw coordinates through which to plot a curved path, complete with adjustable curviness, or if your Array has cubic bezier coordinates just set type: "cubic".
  • You can even have a path go through non-positional properties like scale, rotation, or ANYTHING! That will basically smooth out the velocity changes as it hits each value, like: [{scale:0.5, rotation:10}, {scale:1, rotation:-10}, {scale:0.8, rotation:3}].
  • Loads of helper methods for doing advanced things like:

Check out the MotionPathPlugin Demos collection on CodePen!

Demo

Sample code

gsap.to("#div", {
    motionPath: {
        path: "#path",
        align: "#path",
        alignOrigin: [0.5, 0.5],
        autoRotate: true
    },
    duration: 5,
    ease: "power1.inOut"
});

Usage details (docs)

Check out the MotionPathPlugin docs for all the details.

How do I get it?

MotionPathPlugin is included in the free download, so it's available via the CDN, Github, NPM, and Yarn too! See the installation page for all the options. MotionPathHelper (which lets you live-edit the path inside the browser) is a members-only benefit of Club GreenSock. If you're not a member yet, animation superpowers await!

Demos

  • Like 2

Get an all-access pass to premium plugins, offers, and more!

Join the Club

With great power comes great responsibility. Tween wisely.

- Team GreenSock



User Feedback

Recommended Comments

This is awesome. Can I take D3 for example and create the SVG and convert that to a path for the motion plugin. Then can I pipe that into pixi for webgl performance. 

Link to comment
Share on other sites

Not really certain on that really, sounds pretty complex! But sure, you could grab path data from d3 to use, I guess you could also use the values from drawSVG to influence objects in pixi too. 

Sounds like it'll be fun to explore ☺️

  • Like 1
Link to comment
Share on other sites

13 hours ago, Cassie said:

Not really certain on that really, sounds pretty complex! But sure, you could grab path data from d3 to use, I guess you could also use the values from drawSVG to influence objects in pixi too. 

Sounds like it'll be fun to explore ☺️

Hmm, I thought about it some more. The only reason to use the D3 would be because it would create the right beezer curves i.e. smothing of the lines but not sure if I can do what I am talking about. First I need to get the pix and gsap part working first. 

Link to comment
Share on other sites



Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×