Animation is one the most interesting topic in web designing. Nowadays, we see animations in most websites and web applications. GSAP animation intro is the first part of animation tutorials with GreenSock Animation Platform know us GSAP. GreenSock is a powerful animation platform, that lets you animate almost any DOM element properties, CSS values, canvas objects, svg and more. In this tutorial series, we are going to start from the basic to pro of GSAP platform. We will not bore by explaining and writing too much, rather will discuss shortly just what is necessary.

GSAP Animation Examples

Before we start learning what is GSAP and how to use it, let’s see a few examples.

SVG Bubble Slider

[codepen_embed height=”266″ theme_id=”0″ slug_hash=”GZNgLw” default_tab=”result” user=”chrisgannon”]See the Pen <a href=’http://codepen.io/chrisgannon/pen/GZNgLw/’>SVG Bubble Slider</a> by Chris Gannon (<a href=’http://codepen.io/chrisgannon’>@chrisgannon</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

SVG Flight Loader

[codepen_embed height=”266″ theme_id=”dark” slug_hash=”RaYxaO” default_tab=”result” user=”chrisgannon”]See the Pen <a href=’http://codepen.io/chrisgannon/pen/RaYxaO/’>SVG Flight Loader</a> by Chris Gannon (<a href=’http://codepen.io/chrisgannon’>@chrisgannon</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

SVG Flying Saucer

[codepen_embed height=”266″ theme_id=”dark” slug_hash=”NqyWOw” default_tab=”result” user=”chrisgannon”]See the Pen <a href=’http://codepen.io/chrisgannon/pen/NqyWOw/’>SVG Flying Saucer</a> by Chris Gannon (<a href=’http://codepen.io/chrisgannon’>@chrisgannon</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

And – Howl’s Moving Castle

[codepen_embed height=”266″ theme_id=”dark” slug_hash=”byouf” default_tab=”result” user=”gordonnl”]See the Pen <a href=’http://codepen.io/gordonnl/pen/byouf/’>Howl’s Moving Castle</a> by Nathan Gordon (<a href=’http://codepen.io/gordonnl’>@gordonnl</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

What is GSAP Animation?

GreenSock is a tool that let you animate almost everything in the web page. From svg to images, web elements, CSS properties, canvas and many more.

It has four main tools plus a few plugins. Let’s take a look at each of them briefly.

TweenLight

As the name say’s light. It is a light version of the library with just necessary features.

TweenMax

TweenMax is the same as TweenLight, but it has a few more features.  Features like repeat(), repeatDelay(), yoyo(), staggered tweens, and more.

TimelineLite

If you have ever worked with Adobe Flash, Adobe After Effect or any other animation tools, you will know what the timeline is. TimelineLite in gsap animation is working with same. Simply, timeline is the break points for new animation effects. The TimelineLite is lightweight version of timeline for TweenLight and TweenMax. It has just necessary features.

TimelineMax

It is the same us TimelineLight, but it has some more features. Those features are not essential actually, unless, you use it in advance animations.

Conclusion

It was just the introduction to GSAP animation. We will continue this tutorial in some other parts. Make sure you check the other parts if you want to learn it easily. We hope it has been informative for you. If you have any questions related to this article, feel free to comment it bellow. 🙂