Animating the Front-End with GSAP

Animation in the browser used to be limited to what you could animate in Flash or what you could fit into a GIF. jQuery introduced front-end developers to some basic animation tools, and since they were built into the jQuery library, they were the main go-to. CSS3 came along and introduced limited, key-frame-based animations, without JavaScript or Flash. But the folks over at GreenSock have been working on the GSAP suite of tools since the good ol’ days of Flash, and the performance and options available show this.

The main goal of most websites is usability. No matter what, the user has to be able to actually see and interact with the content. Web browsers have come a long way since the browser wars between Internet Explorer and Netscape opened the new millennium, but it seems Internet Explorer is still a perpetual thorn in usability’s paw. GSAP helps alleviate that by adding in all of the browser prefixes to your CSS rules (example: -webkit-, -moz-). If it can be set with CSS, it can be animated with GSAP. GSAP can also handle complex CSS properties, such as 3-D transforms (won’t work for Internet Explorer 8), box-shadow, text-shadow and clip. These features work in most modern browsers, but check with caniuse.com first to be sure.

Here’s the basic structure of a TweenMax animation. This call tells the TweenMax engine to move “object_to_move” to the right by 50 pixels, and it should take one second. Simple as that!

TweenMax.to(object_to_move, 1.00, {x:50});

You can add more properties to the array if you need to animate more than one at a time. This example tells TweenMax to move the object over 50 pixels, down 50 pixels and fade out by half. All of this will take two seconds to complete and will finish at the same time.

TweenMax.to(object_to_move, 2.00, {x:50, y:50, alpha:0.5});

If you have multiple properties to animate, you can make multiple TweenMax calls, as long as they don’t try to override each other’s properties. So if you’re going to animate it, only animate it once. These two calls will create two different animation instances. The object will move down and over by 50 pixels, taking one second to complete. It will also be fading out at the same time, so that the object will finish its side-to-side animation one second into the fade animation.

TweenMax.to(object_to_move, 1.00, {x:50, y:50});
TweenMax.to(object_to_move, 2.00, {alpha:0.5});

To offset these, we can add in a delay to the property array. This example gives us an animation that starts moving after the fade animation gets halfway through. Since the side-to-side takes one second with a one-second delay and the fade animation is two seconds, both animations will finish at the same time.

TweenMax.to(object_to_move, 1.00, {x:50, y:50, delay:1});
TweenMax.to(object_to_move, 2.00, {alpha:0.5});

Some of the sites we build have animations that loop. Whether it’s a cloud that is constantly floating across the page or an SUV with flashing headlights, setting up a constant loop is as easy as setting a few properties. The “repeat” property tells TweenMax how many times to repeat the animation, with “-1” being set for an infinite loop. The “yoyo” property is used when the animation needs to be “rewound” back to the start as part of the loop. When “yoyo” is set to false (its default value), the object being animated will snap back to the starting position as part of the loop. In this example, the object’s side-to-side animation is “bouncing” between 0px/0px and 50px/50px, using the “yoyo” property to act exactly like its namesake. The fade animation also loops from 1-0.5, but when the opacity reaches 0.5, it “snaps” back to 1, very un-yoyo-like.

TweenMax.to(object_to_move, 1.00, {x:50, y:50, yoyo:true, repeat:-1});
TweenMax.to(object_to_move, 2.00, {alpha:0.5, repeat:-1});

After compatibility comes speed. It’s not much use to animate a website if the user’s computer blows up trying to render it. Multiple tests using multiple computer/browser combinations show that frame rate and memory usage are lowest when using GSAP. jQuery uses a garbage collection script to keep memory usage down, but the main side effect is stuttering animations during the memory dump. CSS3 transitions offload the animation duties to the browser, making for a faster render speed, but with fewer options and no control over the timeline. GSAP still makes for the most attractive option for many.

With the IAB supporting GSAP on its Digital Resources site, GSAP has become the most popular animation tool out there. There are tons of properties and values that can be animated with the GSAP suite, all free and ready to use out of the box. GreenSock even has a CodePen so you can play around, explore and learn the code for animating in a post-Flash world.