The latest version of GSAP delivers some fun new features that open up entirely new animation possibilities. Check out the videos and demos below that show what's so exciting about 1.18.0. Here's a quick summary:
- New "cycle" property allows you to add rich variations to staggered animations
- Relative HSL color tweens (affect just the hue, saturation or lightness)
-
Complex string tweening like
"1px 5px rgb(255,0,0)" - Numerous improvements and bug fixes (see github)
New "cycle" property for staggered animations
Have you ever wanted to animate a bunch of elements/targets and alternate between certain values (or even randomize them) in a staggered fashion? The new super-flexible "cycle" property does exactly that. Instead of defining a single value (like x:100, rotation:90), you can define an Array of values to cycle through (like cycle:{x:[100,-100], rotation:[30,60,90]}cycle:{x:function() { return Math.random() * 200; }}
Demo: array-based and function-based "cycle" values
See the Pen Basic staggerTo() using cycle by GreenSock (@GreenSock) on CodePen.
Advanced "cycle" effects with SplitText
See the Pen SplitText with stagger and cycle by GreenSock (@GreenSock) on CodePen.
Caveats
-
The
cycleproperty is available only in thestaggerTo(),staggerFrom(), andstaggerFromTo()methods in TweenMax, TimelineLite and TimelineMax. -
When using function-based values the function will be passed an argument which represents the index of the current tween. Inside the function body, the scope (
this) refers to the target of the current tween (see source of first demo above).
Relative HSL color animation
Have you ever wanted to tween a color to something a little darker or lighter without having to guess at cryptic hex values? How about tween a hue to 180 degrees around the color wheel? With relative HSL tweening, it's easy. You can now use familiar relative prefixes ("+=" and "-=") directly inside hsl() strings!
//30% darker backgroundColor:"hsl(+=0, +=0%, -=30%)" //to grayscale (0% saturation) backgroundColor:"hsl(+=0, 0%, +=0%)" //opposite color (180 degrees around the other side of the color wheel) backgroundColor:"hsl(+=180, +=0%, +=0%)"
Relative HSL demo
See the Pen Relative HSL color tweening in GSAP 1.18.0 by GreenSock (@GreenSock) on CodePen.
Caveats
-
Be careful about doing relative tweens when they could be interrupted. For example, if you have a mouseover that creates tween to
+=30%and then a mouseout that does-=30%and then the user rolls over/out/over/out, you'll get odd results because of the nature of relativity. For bullet-proof rollover effects with relative values check out the demo we used in the video: Hover Demo with Relative HSL Values -
When you tween to a saturation of
0%, that basically loses any kind of hue data - the underlying color/hue of grayscale is non-existent. So then if you try tweening back to a saturation of 80% or something, it'll be red because that's the default zero position of hue. For example, tween a blue <div> to"hsl(+=0, 0%, +=0%)"and then to"hsl(+=0, 80%, +=0%)", it'll end up red instead of blue. That's not a bug - it's just the nature of colors in the browser (they end up in the rgb color space).
Tween complex string-based values
Complex string-based values containing multiple numbers can be animated without any extra plugins. For example, a value like "10px 20px 50px" can be animated to "4px 13px 200px". GSAP will find each number in the strings (in order), compare them and animate the ones that changed. CSSPlugin already does this for CSS values and it even converts units, but the base engine (TweenLite) can now do basic string tweening. It will even find rgba(...) values and make sure to round them appropriately during animation. This new feature extends to AttrPlugin too which means it can animate the complex strings inside SVG element attributes like the points in a <polygon> or <polyline> or even <path> data (please carefully read the caveats below).
See the Pen Complex string-based tweening: simple shape morph by GreenSock (@GreenSock) on CodePen.
Caveats
- This feature is NOT intended to perform complex shape morphing in SVG. It simply animates the numbers inside the strings (in order). Robust shape morphing requires dynamically parsing path data and injecting extra points in certain cases. This new complex string-based tweening lays the groundwork in the core to do a lot of advanced effects in the future, especially via plugins.
- If you're animating the "d" attribute of a <path> element or the "points" attribute of a <polygon> or <polyline> element, keep in mind that you MUST make sure the number (and type) of points match between the starting and ending values. And since those are attributes, use the AttrPlugin (which is already inside TweenMax).
Community Demos
City Construction by Sarah Drasner
See the Pen City Construction Site by Sarah Drasner (@sdras) on CodePen.
GreenSock Cycle by Petr Tichy
See the Pen GreenSock - staggerTo with cycle by GreenSock (@GreenSock) on CodePen.
Special Thanks
This major update is extra special as it contains features that were largely shaped by feature requests and feedback from our community. We really appreciate the strong community that we have in our forums that not only helps each other, but also helps shape the tools themselves. Extra special thanks to Elliot Geno for suggesting cycle and relative HSL tweening, Diaco for being a testing powerhouse, and everyone who voted on the API changes. Now go download GSAP 1.18.0 and make something beautiful.
.jpg.ff34476864c104ec5ee04e7b2ce49902.jpg)
.jpg.d1fd6cf169d062c6be7f00eed842ec32.jpg)
.jpg.c1693021788ceda64cca1ccf202d1f9c.jpg)
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