This content originally appeared on Blog and was authored by Blog
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.)
Resources
- Full release notes on each release is on Github
- Full documentation
- In case you missed it: GSAP 3.1 highlights (previous release)
- Getting started with GSAP
- Learning resources
- Community forums
Happy tweening!
This content originally appeared on Blog and was authored by Blog
Blog | Sciencx (2020-03-24T13:55:00+00:00) GSAP 3.2 Released. Retrieved from https://www.scien.cx/2020/03/24/gsap-3-2-released/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.