Starting with GSAP

Let’s Create Amazing Animations with the GreenSock Animation Platform

Luca Spezzano
NotOnlyCSS

--

Drawing by Solazzo Nicola

The GreenSock Animation Platform (GSAP) is a suite of tools that allow you to create scripted animations, and it can be used safely also back to IE6!

We can define GSAP with three adjectives fast, robust and compatible, over 4 millions of websites are using it.

The main components of GSAP

TweenLite (28 KB minified) is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform. TweenLite can be used on its own to do most of the necessary animations.

TweenMax (116 KB minified) is like TweenLite’s big brother, it is doing everything TweenLite can do, but it can do something more like repeat, yoyo, repeatDelay, updateTo, and much more. TweenMax includes: TweenLite, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, and BezierPlugin. The focus is on being full-featured.

TimelineLite (13 KB minified) is a powerful sequencing tool that acts as a container for tweens and other timelines, making it simple to control them and manage their timing. Without TimelineLite, building complex sequences would be complicated because you’d need to use the delay property for every tween.

--

--

Luca Spezzano
NotOnlyCSS

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.