Jump to content
Search Community

Introducing GSAP 1.18.0


| GreenSock
38924

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

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]}) or even use function-based values (like cycle:{x:function() { return Math.random() * 200; }}). The amount of functionality you can pack into a single line of code is staggering (pun intended).

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 cycle property is available only in the staggerTo(), staggerFrom(), and staggerFromTo() 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

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).

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.

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

Join the Club

When is the last time you worked on something you love? Go animate something cool and then share it with us.

- Team GreenSock



User Feedback

Recommended Comments

@zync, you control the amount of stagger using the stagger parameter. You cannot alter that with a dynamic function if that's what you meant. And these changes are for HTML5/JS only. Demand for the Flash version is tiny now that browsers are phasing Flash out, so all of our attention is on the HTML5/JS toolset at this point.
Link to comment
Share on other sites

@zync, you control the amount of stagger using the stagger parameter. You cannot alter that with a dynamic function if that's what you meant. And these changes are for HTML5/JS only. Demand for the Flash version is tiny now that browsers are phasing Flash out, so all of our attention is on the HTML5/JS toolset at this point.
Link to comment
Share on other sites

Great work Jack, it's great to see you implementing features based on user requests and feedback. Can't wait to see what will be in the next release or what other cool plugins you'll come up with. Keep it up!
Link to comment
Share on other sites

Great work Jack, it's great to see you implementing features based on user requests and feedback. Can't wait to see what will be in the next release or what other cool plugins you'll come up with. Keep it up!
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

×
×
  • Create New...