GSAP 1.12.0: Smoother, faster, smarter HTML5 animation

Sign in to follow this   Followers 0

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.

TweenLite.lagSmoothing() details

What happens when the CPU gets bogged down and there's a lag between renders? For example, imagine a 2-second tween that should start right away, but the CPU is busy for a full second before it can render that tween for the first time. Most other animation engines (including CSS animations in some browsers) slide the start time forward to compensate but there's a major drawback to that approach: it sacrifices synchronization and can mangle delays so that when you try to neatly stagger animations, they spew out in clumps/groups. That's no good.

GSAP has always used a strict timing model that prioritizes perfect synchronization, meaning in the example above, the tween would render as if it's halfway done after the initial 1-second lag. Basically, every animation engine has to pay the lag tax one way or the other - either maintain strict timing and synchronization, or slide the starting times around and lose sync.

The new TweenLite.lagSmoothing() feature gives you the best of both worlds because when the CPU gets bogged down, it adjusts the core timing mechanism on the next tick which affects all animations, thus everything remains perfectly synchronized. You can set the threshold (in millisecond) so that whenever there's a lag greater than that threshold, the engine will adjust the internal clock to act like the adjustedLag elapsed instead. Even though you call the static method on TweenLite, this one adjustment affects everything in GSAP (tweens, timelines, and delayedCalls because they're all driven by a single timing mechanism at the heart of TweenLite).

For example, if the threshold is 500 and the adjustedLag is 33 (those are the defaults), the only time an adjustment will occur is when more than 500ms elapses between two ticks in which case it will act as though only 33ms elapsed. So if the CPU bogs down for 2 full seconds (yikes!), your animations will move 33ms worth of time on the next render instead of jumping a full 2-seconds. Note: this has no affect on the device's performance or true frame rate - this merely affects how GSAP reacts when the browser drops frames.

This feature is already activated by default, using a threshold of 500ms and a adjustedLag of 33ms, but if you want to change the settings you can do so like this:

//compensate only when 1000ms or more elapses between 2 ticks,
//and then make it act like only 16ms elapsed:
TweenLite.lagSmoothing(1000, 16);

Why not set the values super low, like to 10 for both? Because doing so wouldn't allow much breathing room, and it would naturally make your tweens look like they're running more slowly (because technically they are if the time is getting nudged forward on almost every render). Also note that if you've got any delayedCalls, those will be affected as well. That's a good thing - it ensures that you can rely on those to be perfectly synchronized with the rest of the engine, but if the browser is under heavy pressure and is only rendering a few frames per second, it'd seem as if time is literally slowing down and a 2-second tween (or delayedCall) might actually take 8 seconds to complete.

In most real-world scenarios, the defaults of 500 and 33 are ideal because they protect against significant hiccups in the browser/CPU while allowing minor variations in the frame rate without slowing things down unnecessarily.

If you're using TweenMax, you can access the lagSmoothing() method via TweenMax.lagSmoothing() too.

If you'd like to disable lag smoothing, you can simply set it to 0 like TweenLite.lagSmoothing(0) which is the same as setting the threshold to a super large value so that it never kicks in.

See the Pen Animation Engine Timing Comparison 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