Animate for web using GSAP

GSAP is the abbreviation of GreenSock Animation Platform. It is an incredibly robust animation framework that has become the new standard for HTML5 and javascript animation. It is crazy fast, compatible and it leaves me amazed each time I use it.

To be exact, GSAP is a set of small JavaScript Files that help to create animations that look great on all major browsers.

Why would I use it?

Why wouldn’t you? If you’re a fan of web animations, whether it be CSS or JS then GSAP will make your animating life easier. There’ll be no reinventing the wheel and no need to learn a new language; ultimately there’s no reason not to use it!

I’m a huge fan of CSS animations and I try to use something interesting in every one of our clients’ sites, it can be as simple as adding a nice button hover or some micro interaction elements. GreenSock works with what you’ve already created using calls like TweenMax.to or TweenMax.from – I promise it is as easy as it looks, animating to your current CSS to or from variables.

The joy of GSAP really starts to show when you build bigger and better animations because when something needs to be updated, it has suddenly become so much easier. Instead of editing percentage points in multiple keyframe animations you can change one variable, you don’t have to add another nth child delay, you simply use staging. Because unlike CSS animations, sequencing is a breeze. It sounds like a dream, right?

After only playing with GreenSock for a few hours I have put together a little animation of a rocket landing on a happy little moon…

It’s really easy to piece something like this together:

TweenMax.to(“body”, 10, {backgroundColor:”#192226″, ease:Power2.easeIn, delay: 3});

This states we want the body to animate for 10 seconds, changing the background color with a GSAP ease and a delay of 3 seconds.

Is it responsive?

Yes. In fact, developers have been turning to GSAP to build their responsive animations easier for perfect vertical/horizontal centering without any measuring. It’s crazy fast, too. GSAP advertises itself as outperforming “industry standards” by 1000%+ under stress. Turning jerky animations into fluid interactive projects.

And it doesn’t end there. GSAP is compatible with HTML5, SVG, jQuery, Canvas, CSS, new browsers, old browsers, RequireJS, EaselJS, mobile, and more. Accommodating various transforms in modern browsers and IE (down to version 6) without needing browser prefixes and hacks. That’s another HTML5 javascript animation headache solved.

Where can I get it?

Download the GreenSock docs here. Let us know what you create!