GSAP 1.19.0 Released

Sign in to follow this   Followers 0

GSAP version 1.19.0 introduces some exciting new features for advanced users as well as conveniences for everyone (even the "greenest" novices). The most noteworthy improvements are summarized below:

Function-based values

Instead of a number (x:100) or string (width:"300px") or relative value (y:"+=50"), you can now define most values as a function that'll get called once for each target the first time the tween renders, and whatever is returned by that function will be used as the value. This can be very useful for randomizing things or applying conditional logic. See it in action in the demos below.

Parameters: index, target

The function is passed two parameters:

1. index (integer) - the target's position in the array of targets. For example, if there are 3 <div> elements with the class ".box", and you TweenLite.to(".box", ...), the function would get called 3 times (once for each target) and the index would be 0 first, then 1, and finally 2.
2. target (object) - the target itself (the <div> element in this case)

Using the index parameter makes it easy to increment the value accordingly. There are lots of ways to get creative. The demo below uses the index parameter to tween each element's x value in increments of 100.

New ModifiersPlugin

"modifiers" allow you to intercept the values that GSAP would normally set during each update of a tween and modify them using your own functions. It's kinda like the function-based values described above, but instead of getting called once at the beginning, they're called each time the tween updates (on each "tick") and they receive the about-to-be-applied value so that you can run whatever logic you want and return a new value that GSAP then applies. This can help perform tasks like snapping, clamping, or dynamic values. It's completely up to you! For example, change the x of one object based on the y of another object or change rotation based on the direction it is moving. The possibilities are endless. Below are some examples that will help you get familiarized with the syntax.

Snap rotation

The tween below animates 360 degrees but the modifier function forces the value to jump to the closest 45-degree increment. Take note how the modifier function gets passed the value of the property that is being modified, in this case a rotation number.

Parameters: value, target

The modifier functions are passed two parameters:

1. value (number | string) - the about-to-be-applied value from the regular tween. This is often a number, but could be a string based on whatever the property requires. For example if you're animating the x property, it would be a number, but if you're animating the left property it could be something like "212px", or for the boxShadow property it could be "10px 5px 10px rgb(255,0,0)".
2. target (object) - the target itself

Clamp with Modulus

The tween below animates x to 500 but the modifier function forces the value to wrap so that it's always between 0 and 100.

Carousel Wrap

Have you ever built a carousel and wrestled with making it loop seamlessly? Perhaps you duplicated each asset or wrote some code that moved each item back to the beginning when it reached the end. With ModifiersPlugin you can get a seamless repeating carousel with a single staggerTo()! The example below tweens each box to a relative x position of "+=500". Click the "show overflow" button to see each box get reset to x:0 when it goes beyond 500...

Advanced demos

We've only scratched the surface of what ModifiersPlugin can do. Our moderator Blake Bowen has been putting this new plugin to the test and has an impressive collection of demos that will surely inspire you. Caveats:

• ModifiersPlugin requires TweenLite or TweenMax version 1.19.0 or later.
• ModifiersPlugin is not included inside of TweenMax; you need to load it separately for it to work.
• RoundPropsPlugin taps into the same mechanism internally as ModifiersPlugin (to maximize efficiency, minimize memory, and keep kb down). Think of a roundProps tween as just a shortcut that creates a modifier that applies Math.round(), thus you cannot do BOTH roundProps and a modifier on the same property. It's easy to get that functionality, though, by just doing Math.round() inside the modifier function.

ScrollToPlugin: scroll to any element

ScrollToPlugin now recognizes selector text (or a DOM element or jQuery object) as the value so that instead of passing in a number for the scroll position, you just pass it the element itself that you want to scroll into view.

TweenMax.to(window, 2, {scrollTo:"#someID"})
//or
TweenMax.to(window, 2, {scrollTo:{y:".someClass", x:"#someID"}}); 

You can also optionally pass offsetX and/or offsetY numeric values if you want to offset the destination from the element.

//scroll #someID into view with 50 pixels from the top (like a margin)
TweenMax.to(window, 2, {scrollTo:{y:"#someID", offsetY:50});

The demo below uses the offsetY so that each section scrolls into view just under the navigation. Click the section buttons in the demo below. Check out the JS source.

SplitText: custom word delimiters

Ever need to split a long string of text into words but didn't want any spaces? Custom word delimiters to the rescue! Now you can place any character you want to mark where words should be split and SplitText will remove them during the split. #AwesomeForLongHashTags.

...and more

GSAP 1.19.0 is more ES6-friendly (for example, you can npm install gsap and then import {TweenLite, Elastic, TimelineMax} from "gsap" in your project). Plenty of bug fixes too. See the whole list in the github changelog. DOWNLOAD GSAP TODAY

Happy tweening!