GSAP guide - how to animate Dom elements

What is GSAP?

GSAP, a GreenSock Animation Platform, is a JavaScript framework for animation of DOM elements. Its main advantages are high compatibility with browsers, efficiency and control over animations which we can’t be achieved by working with CSS or jQuery.animate()

GreenSock platform consists of two main modules:

TweenMax/TweenLite – responsible for animations,

TimelineMax/TimelineLite – enables the creation and management of animations’ sequences.

As you might have already guessed, Max and Lite versions differ mainly in the file weight and the possibilities they provide. In many cases the Light version is sufficient enough to handle most animations. However, if we want to use functions such as repeat() we have to use TweenMax.

First steps in working with GSAP

Although CSS enables working with animations, it only helps with establishing the duration of animation, with delaying it or with working on few simple easing functions. GSAP enables full control over the animation no matter the state it’s currently in. For instance, we can run the animation or stop it midway its execution and then run it backwards with doubled speed.

Firstly, we have to implement the library into our website. We’ll load TweenMax, which includes the whole library in the single file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

After that we’ll present some basic examples. It’s syntax is quite simple:

TweenLite.to(element, time, animation_properties);

element – reference to the DOM element,

time – course of action of the animation [in seconds],

animation_properties – an array of properties including values, which are to be animated.

The first animation

TweenLite.to(document.getElementById('image'), 2, {left: '90%'});

This short line is responsible for shifting the element that has #image id by 90% to the right over the course of 2 seconds.

We can execute the very same code while changing the function from .to() to .from(). It will make the animation start from values given in this line to values the animation had when we launched it.

TweenLite.from(document.getElementById('image'), 2, {left: '90%'});

A keen eye will notice the .set() function, which sets the animation in the given spot without actually animating it. GSAP’s capabilities are not, obviously, limited to simple shifting of objects – we can , for instance, also animate any CSS properties.

TweenLite.fromTo(image, 1, {scale: 0, rotation: 360}, {scale: 3, rotation: 0, delay: 0.5, ease: Elastic.easeOut, onComplete: function() {alert('Done!')}});

In this example we used fromTo(), which allows to set not only destination values, but the starting values as well – in this case it animates the scale and rotation. Additionally, I gave this code a half-second delay and set easing, which made the animation look dynamic. Also, thanks to alert() function, the alert will show up after the animation finishes.

Apart from animation of element to specific value (what was shown above), we can also animate by specific value. By inserting “+=” or “-=” before the number, we’ll either add or subtract chosen value from the starting one. In this case it’ll widen the element by 20 pixels.

TweenLite.to(image, 0.5, {width: '+=20', ease: Back.easeOut});

Easings feature of GSAP

Without a doubt, some of the most interesting features of GSAP are easings, which you might know from CSS transition or animation (for instance linear or ease). TweenMax has even more options, what extends their capabilities even more!
GreenSock team created a great tool that shows the capabilities of GSAP’s easings with the possibility of configuration, it also gives you a code that’s ready to use right from the spot. I think that checking it out is the best way to understand how it works!

http://greensock.com/ease-visualizer

Few of the most important methods of TweenLite/Max

TweenLite / TweenMax (element, time, variables) - constructor,
delay (number) - the time (measured in seconds) describing the delay of animation,
duration ([number]) - gets or sets duration of animation,
ease (Ease or Function) - defines ease of animation,
from (element, animation_time, object)- creates an instance in which we define an animated element, its duration (measured in seconds) and an array of values from which the object will be animated to the values that you have when you call the function,
fromTo (element, duration, start_values, end_values) - creates instances of animation in which we define animated item, its duration (measured in seconds) and two an object with properties to animate as keys and its values (first with the start values, second with final values of animation),
kill() - removes the instance of animation and given values of the element,
onComplete (function) - function activated at the end of the animation,
onStart (function) - function activated when you start the animation,
onUpdate (function) - function activated throughout every frame of the animation,
pause() - pauses the animation,
play() - runs an animation,
progress ([number]) - gets or sets the progress of animation in the range from 0 to 1,
repeat() – defines the number of repetitions of animation (only TweenMax),
repeatDelay() - defines the delay for repetition (only TweenMax),
reset() – restarts the animation and restores it to the initial values,
reverse() – runs the animation backwards,
set (element, object) – iimmediately maps object's values as element's CSS properties,
timeScale (number) – defines the speed of animation 0 1 means the speed is normal (default), 0.5 means a double exemption, 2 means double acceleration,
to (element, animation_time, variables) – initiates an instance in which we define an animated element, its time(in seconds) and an array of values that will receive the element in the course of the animation,
yoyo() - every second animation includes reverse feature – in the result we recieve the animation of returning to the original values (only TweenMax).

These methods are only part of the whole available package – you can check out the rest of them on the official Greensock website.

Timeline of GSAP

You can discover all capabilities of TweenMax library by combining it with TimelineMax, thanks to what it will be possible to combine animations in sequences.

var tl = new TimelineLite({paused: true}); tl.add(TweenLite.set(image, {scale: 0, rotation: 0, x: 0})); tl.add(TweenLite.to(image, 0.5, {scale: 1, ease: Back.easeOut})); tl.add(TweenLite.to(image, 1, {x: 300, rotation: 180, ease: Power1.easeInOut})); tl.add(TweenLite.to(image, 0.5, {scaleY: -1})); tl.add(TweenLite.to(image, 0.5, {scaleX: -1}));

As you can see in the first line of code, we assigned a new timeline to the tl variable, while in the rest of the lines we added animations by using the .add() function, about which we talked in previous paragraphs.

In this example after one of the animation is completed, the next one starts. However, as a second argument of the .add() function we can define at what time the animation should start. The final effect should look like this:

var tl = new TimelineLite({ paused: true, delay: 0.5, onComplete: function() { alert('Done!'); } }); tl.add(TweenLite.set(image, {scale: 1, rotation: 0, x: 0})); tl.add(TweenLite.to(image, 0.5, {scale: 0, ease: Back.easeIn}), 1.5); tl.add(TweenLite.to(image, 1, {x: 300, rotation: 180, ease: Power1.easeInOut}), 0); tl.add(TweenLite.to(image, 0.5, {scaleY: -1}), 0.25); tl.add(TweenLite.to(image, 0.5, {scaleX: -1}), 0.5);

You have probably noticed that, in spite of the same instruction, the sequence of animation is different. Moreover, animations can even overlap – there is no problem too big for GSAP!

* Remember, methods of working with TimelineLite / Max are the same as in the TweenLite / Max ones.

The extension and use of the opportunities

GreenSock provides many plug-ins. Despite the fact that you might have to pay for the most interesting ones, you can still combine animations with each other and create really great results. Furthermore, TweenMax can be combined with other libraries, which greatly expand its features (see. ScrollMagic, which runes animation when the page is scrolled). Take a look at the website and documentation of GSAP, which will allow you to use the full potential of the library.

Alternatives

There are few alternatives of GSAP, such as Velocity, Transit or jQuery.animate(), but not without a reason Google recommends GSAP! Of all of the available frameworks, its the solution created by GreenSock that is the most flexible and powerful. You need more proof? Here you can check the comparison of the performance of several frameworks available for animation.

Summary

As you can see, working with GSAP is not so difficult - all you need is our guide and a lot of practise! ;) I used this framework while I was working on our Back to The Frontend project - check out my article where I'm decribing the whole creative process!

2019-05-22