Jump to content

GSAP 3.2 Released

| GreenSock

GSAP 3.2 has some groundbreaking features for converting coordinates and aligning elements. Check out the video explanation below. Warning: it's a bit advanced, but hopefully you'll see how crazy-useful these capabilities can be. 

New: "alignOrigin" for motion paths

MotionPathPlugin recognizes a new alignOrigin property that pins a certain spot on the target to the path. For example, alignOrigin: [0.5, 0.5] pins the center of the target on the path and sets the transformOrigin accordingly so that rotations are around that point as well. To get a similar effect before 3.2, you'd need to set the transformOrigin separately as well as a -50 xPercent/yPercent.

Use the Array syntax to define progress values along the x and y axis, so [1, 0.5] would be the right side, centered vertically. Or use a point object like {x: 20, y: 50} to specify a coordinate (measured from the top left corner in pixels at its native size).

Sample code

// Move the element along a path, rotating it along with the line
gsap.to("#spaceship", {
  duration: 5,
  motionPath: {
    path: "#path",
    autoRotate: true,
    align: "#path",
    alignOrigin: [0.5, 0.5] // aligns the center of the target on the path

See the MotionPathPlugin docs for details.

New: getRelativeDistance() that transcends coordinate spaces

Have you ever wanted to move one element to another element even if they're in different containers... which may have various transforms, warping the coordinate systems and making it super difficult to calculate? If so, you will love this magical function which is explained in the video at the top of this page.

See the getRelativePosition() docs for details.

New: convert coordinates between elements/contexts

GSAP can now take a local coordinate from inside one element and calculate exactly where that coordinate lines up inside of ANOTHER element's local coordinate space! So you could take a "click" pointer event from the window and map that to an element's local coordinate system even if it's deeply nested inside various containers that have transforms applied! Or, as you can see in the demo below, convert between coordinate spaces to make the blue arm stay connected with the rotating red arm:

See the convertCoordinates() docs for details.

And more...

GSAP 3.2 also delivers various bug fixes, so install the latest version today (3.2.6). There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, etc.)


Happy tweening!

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

Join the Club

We consider it a privilege to serve you. Glad you're here.

- Team GreenSock

User Feedback

Recommended Comments

Call me crazy but I really want to tell you how I got to this page. I signed up and absolutely I want the newsletters but first let me say that I'm not a developer and probably will never learn how to do animation. However, I do surf to see great logos, creative art, and label design. I actually got to your site from the "Logo Of The Day" site who put your logo up back in 2014 https://logooftheday.com/2014-11-07-gsap I am so darn glad to see you are still going strong!

I am seeing a lot of inspiration here and look forward to visiting again. Thanks!



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