GSAP 1.20.0 Released

Sign in to follow this   Followers 0

Here are some of the highlights of the GSAP 1.20.0 release...

yoyoEase

Now you can specify an ease for the yoyo (backwards) portion of a repeating TweenMax animation. Set it to a specific ease like yoyoEase:Power2.easeOut or to flip the existing ease, use the shortcut yoyoEase:true.

TweenMax is smart enough to automatically set yoyo:true if you define a yoyoEase, so there's less code for you to write. Score!

Animate CSS Variables (custom properties)

PixiPlugin

PixiJS is a canvas library that can utilize WebGL for insanely fast rendering, plus it has all sorts of crazy filters and fun effects. You could always use GSAP to animate PixiJS objects (after all, GSAP can tween any property of any JS object), but it was a tad cumbersome with certain properties because they're tucked inside sub-objects in PixiJS's API, like object.position.x, object.scale.y, object.skew.x, etc. Plus PixiJS defines rotational values in radians instead of degrees which isn't as intuitive for most developers/designers. PixiPlugin saves you the headaches:

//old way (without plugin): 
TweenMax.to(pixiObject.scale, 1, {x:2, y:1.5});
TweenMax.to(pixiObject.skew, 1, {x:30 * Math.PI / 180});
TweenMax.to(pixiObject, 1, {rotation:60 * Math.PI / 180});

//new way (with plugin): 
TweenMax.to(pixiObject, 1, {pixi:{scaleX:2, scaleY:1.5, skewX:30, rotation:60}});

PixiJS requires that you define color-related values in a format like 0xFF0000 but with PixiPlugin, you can define them the same way you would in CSS, like "red" | "#F00" | "#FF0000" | "rgb(255,0,0)" | "hsl(0, 100%, 50%)" | 0xFF0000. You can even do relative HSL values! "hsl(+=180, +=0%, +=0%)". Another big convenience is that PixiPlugin recognizes some special values like saturation, brightness, contrast, hue, and colorize (which all leverage a ColorMatrixFilter under the hood). Or if you have a custom ColorMatrixFilter, just pass that in as the colorMatrixFilter property and it'll handle animating between states.

Lastly, PixiPlugin recognizes blur, blurX, and blurY properties, so it's very simple to apply a blur without having to create a new BlurFilter instance, add it to the filters array, and animate its properties separately. PixiPlugin significantly improves developer ergonomics for anyone animating in PixiJS. Less code, fewer headaches, and faster production. See the docs for details.

Draggable snap points

Now you can implement snapping that's based on both x and y positional data simultaneously (previously snapping was single-dimensional). snap and liveSnap properties now accept a "points" value which can be either an array of points like [{x:0, y:0}, {x:100, y:50}, ...] to snap to (along with a radius that defines the distance at which snapping kicks in) or a modifier function that gives you total control over the snapping logic. The demo below creates a bunch of randomly positioned dots. The position of each dot is stored in an array that is being used for snapping.

The next demo has similar functionality but grabs points from and SVG polyline. Drag and throw the blue circles to see how they snap to the orange circles!

For ultimate control, use a modifier function that intercepts the point Draggable would normally move your object to and run custom logic and return a new [modified] point.

Emoji support in TextPlugin

'Nuf said.

...and more

There are quite a few little improvements and bug fixes as well, which are listed in the changelog at the github repository. Download GSAP today. Happy tweening!