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
aligncapabilities 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! -
autoRotatemakes the target rotate automatically in the direction of the path as it moves. -
Define specific
startand/orendpositions 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:
- Convert native SVG shapes like <circle>, <rect>, etc. into an equivalent <path> (convertToPath())
- Calculate the relative position data between any two DOM elements so that you can move one to align perfectly with another, even if they're inside different containers that have various transforms applied! (getRelativePosition())
- Convert SVG <path> data into raw cubic bezier data/numbers (or the other way around) (stringToRawPath()/rawPathToString())
- Get matrix data for converting between coordinate spaces (convertCoordinates() / getGlobalMatrix() / getAlignMatrix())
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
-
2
Recommended Comments
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 accountSign in
Already have an account? Sign in here.
Sign In Now