One of the books that really inspired me during the ideation stage for my Portfolio Website was "Creative Confidence". David and Tom Kelly, the authors of the book eloquently delivers a strong message that creativity is not only restricted to musicians, artists, and designers; anyone can apply creativity to their profession and make a better world.

Creativity is all about looking at the problem with a different perspective and finding innovative solutions.

It inspired me to explore more one the creative side of web development, Web Animations. Most of the animations on my portfolio website have been managed with GSAP(Greensock Animation Platform). If I were to describe GSAP in 4 words, it would be: "jQuery" for JavaScript Animations.

Apart from the recognitions on other reputaed design gallaries, my webiste has also been listed in showcase section of Greensock. As someone who has deeply experimented and extensively worked on this library, I wanted to share the post covering the very basics of GSAP.

What is GSAP?

GSAP is an animation platform comprising of 4 libraries: TweenLite, TweenMax, TimelineLite, and TimelineMax and their plugins. TweenLite and TimelineLite are smaller versions and contain fewer features than their full-blown libraries, TweenMax and TimelineMax respectively. Additionally, they also have a couple of paid plugins if you are a Premium Member. If you are including TweenMax, you are including all of above libraries along with CSSPlugin, EasePack, RoundPropsPlugin, BezierPlugin, AttrPlugin, and DirectionalRotationPlugin.

jQuery Plugin

One can extend jQuery's $(element).animate()functionality by using GSAP's jQuery plugin.

It basically hijacks the above animate() method and makes GSAP drive the animations under the hood. Contrary to popular belief, we can bind GSAP animations to jQuery objects without using this plugin.

TweenMax/TweenLite

Lets create a simple tween animation which animates a <div> tag from left to right. (In case you missed the animation, Click on re-run button, which appears when you hover on the div element.)

See the Pen TweenMax Animation : Demo - 1 by Prashant Sani (@Prashantsani) on CodePen.

Adding repeat:-1; yoyo:true makes the animation loop infinite times. We can also control the number of times the animation is repeated. For instance, we can set repeat:10 to make the animation repeat 10 times. yoyo is an interesting feature by GSAP. It makes the tween go in a reverse direction everytime a tween ends. Correctly named after a "yoyo toy", this property shows the level of intligence and wit put by developers while developing GSAP.

See the Pen TweenMax Animation : Demo - 2 by Prashant Sani (@Prashantsani) on CodePen.

There are 2 directions an animation can go. One can animate FROM current state or TO a state. For below example, I have used FROM insted of to. The animation would start at x:200 (which is nothing but transform-translateX value of 200px).

See the Pen TweenMax Animation : Demo - 3 by Prashant Sani (@Prashantsani) on CodePen.

We can also use FROMTO values as shown below. This is very useful in case we want to include the start and end state to be defined in JavaScript instead of CSS.

See the Pen TweenMax Animation : Demo - 4 by Prashant Sani (@Prashantsani) on CodePen.

More on Tweens:

1. These tweens can be then utilised along with click, load, touch or other events to initiate animations. These animations can also be called inside callback functions.
2. In Our above example, we gave 3 parameters to the TweenMax Animation: the DOM Object that needs to be animated, the duration of animation and the options for animation.
3. yoyo is a feature of TweenMax and not included in TweenLite. For most of the use-cases, I usually use TweenMax instead of TweenLite because most of my professional work involves adding complex animations, which would require loading the entire TweenMax libarary anyways. For extremly simple projects, TimelineLite is a good option.
4. Since we included TweenMax, (through codepen); we need not include GSAP plugins and TimelineMax/TimelineLite separately.

Tips on animation performance:

1. Always use properties like opacity, transforms, x and y (which defaults to transforms) because they are GPU accelerated and do not cause a re-paint on the page.
2. You can also use the property autoAlpha which takes care of both, opacity and visibility.
3. You can also kill a tween by calling following

//kill the entire animation:
myAnimation.kill();

//kill only the "x" and "y" properties of the animation (all targets):
myAnimation.kill({x:true, y:true});

//kill all parts of the animation related to the target "myObject" (if the tween has multiple targets, the others will not be affected):
myAnimation.kill(null, myObject);

//kill only the "x" and "y" properties of animations of the target "myObject":
myAnimation.kill({x:true, y:true}, myObject);

//kill only the "opacity" properties of animations of the targets "myObject1" and "myObject2":
myAnimation.kill({opacity:true}, [myObject1, myObject2]);

//Source: https://greensock.com/forums/topic/8917-all-the-methods-to-kill-a-tween/

TimelineMax/TimelineLite

Suppose you have a two or more tweens, A tween inside an onComplete function would be very obtrusive and not easy to manage. Adding in, what if the other tween starts after a delay and not after the completion of first tween? For a sequence of animations, we should be ideally using GSAP's Timelinemax. The real power of GSAP lies in using Timelines.

1. If you are using TweenMax, You don't need to separately include TimelineMax.
2. TimelineMax is used for a sequence of animations.
3. Although we can use Instead of nesting callbacks inside a "onComplete" function of TweenMax; we could use TimelineMax.

Why GSAP

1. I can't think of a way to use a timeline of animations without taking a help from JavaScript library. GSAP is one of the best ones available
2. It handles inconsitancies of SVGs very eloquently. You can read more about the same here
3. It has much better way to handle a sequence of animations
4. It has perfomance built
5. Much easier than CSS Animations

The content of this post is partially taken from my Flash-talk at JSFoo 2016. I have shared some of the key memories and insights from the JSFoo 2016 conference over a post on this blog.