Search the Community

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. We're excited to announce several new features in the GreenSock Animation Platform (GSAP) 1.12.0 that will increase not only "real" performance, but "perceived" performance as well. The innovative lagSmoothing() feature allows GSAP to automatically heal from CPU spikes that cause lag, all while maintaining perfect synchronization between all animations. And the new "lazy" rendering helps avoid layout thrashing when many animations start simultaneously. Have you ever noticed how scrolling in iOS Safari stops all animations until the scroll stops, and then animations tend to jerk forward? Thanks Apple. The new lagSmoothing() makes it a much more pleasant experience, resuming animations fluidly. These features are already activated by default in GSAP 1.12.0, so you get them "free" by updating. We've created a few demos and videos to help you understand the impact of these new changes. Both features are explained in detail below. Use the demos, watch the videos and be sure to snag the latest version of GSAP. Videos (watch these first) Performance Test of lagSmoothing() and lazy When you click "run test", a tween is created for each blue box to animate it down 150px linearly. The point is to create a "perfect storm" scenario where a LOT of tweens are starting at the same time which would typically trigger the read/write/read/write style recalculation performance killer in many browsers, hammering the CPU initially. Watch how much faster things are when you enable the new features. See the Pen Blog Post: New GSAP 1.12.0 Performance Features by GreenSock (@GreenSock) on CodePen. "lazy" details Some browsers (notably Webkit) impose a performance penalty for sequential read/write/read/write of DOM-related properties, forcing a costly style recalculation for each cycle so it is better to group reading and then writing tasks (read/read/write/write is faster than read/write/read/write). When you tween a property, GSAP must first read the current values so that it can properly interpolate between the start and end values (even for set() calls because they must accommodate reversion, like when sitting on a timeline that could be reversed). Consequently, when you have a bunch of tweens that are all rendering for the first time concurrently (on the same "tick"), each one would read and then write, resulting in the dreaded read/write/read/write scenario. Normally, you'd never notice a difference unless you have a lot of tweens starting at the same time. As of version 1.12.0, when a tween renders for the very first time and reads its starting values, GSAP will automatically "lazy render" that particular tick, meaning it will try to delay the rendering (writing of values) until the very end of the "tick" cycle which can improve performance. And again, this only happens on a single "tick", when that tween records its starting values. There are certain very specific scenarios when it may need to force an immediate render, and it will do so intelligently when necessary. That's why it's called "lazy" instead of "delayedRender" - it's not a promise to always delay the render, but it's giving GSAP permission to lazy-render if/when it can. It wouldn't delay the render if, for example, you populate a timeline with a bunch of tweens of the same object and then you immediately seek() to the very end of the timeline - it'd need to render the tweens in sequence immediately to make that seek() function properly. lazy is true by default for pretty much all tweens except zero-duration ones (and set() calls) because it is implied that those should be rendered immediately, as you may have a line of code thereafter which depends on the new values being applied. For example: //let's assume element's opacity is currently 1 and we want to quickly set it to 0 and report it... TweenLite.set(element, {opacity:0, lazy:true}); console.log("opacity is: " + element.style.opacity); //1, not 0 because the tween hasn't rendered yet! In most cases, you won't need to set lazy:true because it's the default for normal tweens, but if you create a LOT of set() calls in a row (like in a loop of more than 30), and you're aware of the risks (don't write code that relies on the tween rendering immediately), you could set lazy:true. You can also disable it on a particular tween by setting lazy:false in the vars object. Again, you'll probably never need to worry about setting lazy yourself - the default behavior is ideal for the vast majority of cases. And this setting is only for tweens (TweenLite or TweenMax) since those actually read/write properties. You'd never set lazy:true on a TimelineLite or TimelineMax, for example. New force3D: "auto" feature Previously, you could set force3D:true to cause an element to always apply a 3D transform which typically gets that element its own compositor layer in the browser/GPU, leading to better performance during animation. The primary down side to that technique is that it could eat up more memory. So for example, try animating 2000 elements with 3D transforms on an iPhone and then scroll the page - it gets pretty janky. Now, you can set force3D:"auto" which will act exactly the same as force3D:true except that at the end of the tween if there are no 3D transforms necessary (rotationX, rotationY, and z are all 0), it will automatically switch back to a 2D transform. You get smooth animation, and restored memory at the end. Summary We're working hard to make sure your animations are buttery-smooth on every device and in every browser. Download the latest version of GSAP to get an instant performance boost today. Recommended reading: Main GSAP JS page Myth Busting: CSS Animations vs JavaScript jQuery vs GSAP: cage match CSS Transitions vs GSAP: cage match Jump Start: GSAP JS Why GSAP? A practical guide for developers Speed comparison