Web Animation With GSAP

Ah animations, who doesn’t love some animations! When I was young, I was so curious to know how my favorite cartoons were animated. I used to imagine all sorts of tricks they would have used - maybe it was black magic?

Me getting excited for an animated series (back then … and now)

As I grew up, I realised animations were nothing but static frames which were slightly different from each other but when viewed so quickly in sequence seemed to “animate”. In earlier days animation was very difficult and blocky on the web with the technological limitations of that era. Nowadays, with high performance devices and with almost no tech limitations, it's possible to animate anything on the web with ease. But we still look out for ways which are easy, lightweight, high performant and but that can still deliver what all the other heavyweight packages offer right?

Well that’s when I found this plugin/package/library called GSAP. GSAP is an industry standard animation library that was created by GreenSock. It uses highly optimized and high performance javascript animation with a small bundle size. In this article, I will take you through the steps of setting up and writing cool animations on the web using GSAP.

I came across GSAP last year while I was browsing through animation tutorials. But back then I was not able to quite grasp its concepts. So last month I spent a couple of days exploring GSAP and immediately my mind was blown.

My Brain, after using GSAP

And since the release of GSAP3, all the functions of GSAP are very easy to both code and understand. We will be using GSAP version 3 for this article. We will be going through

• gsap.to()
• gsap.from()
• gsap.fromTo()
• gsap.timeline()

First of all let us set up our codebase. To install GSAP for your project, just go to your project directory and use the cli command

npm install gsap

If you need to use the CDN version, you can just head over to https://greensock.com/ and Click on “Get GSAP Now” button, and copy and paste the min.js link to your code’s html file.

In this article we will be using the CDN version and along with it Codepen as our code editor and Bootstrap 4 for design. Now that our setup is done, nice and easy. Let us start with GSAP and its functions.

Now if you are a web developer, in the beginning you would have spent countless hours animating the color of a DIV or moving a DIV across the screen using CSS animations and transitions. If you are good at JavaScript, GSAP will make animations a piece of cake. And the best part is that you don’t have to manually write any CSS animations. You only need to specify what property to animate and gsap will do that for you.

The way GSAP makes smooth and performant efficient animations is through a method called requestAnimationFrame. Now this is a browser function that optimises itself on each browser and does not execute when we are not on the viewport. So it's completely efficient.

Now to the smoothness. Let’s assume we want to make an element disappear by changing its opacity from 1 to 0. When you run this in CSS, we will see the element disappear in the blink of an eye. That is because there are no frames in between 1 and 0. There is a common term in animation called “tweening”, which means adding intermediate frames between the start and end, to make the transition as smooth as possible. gsap takes care of this and we only need to decide the duration and the ease (ease is the property that defines how the animation will happen over time. We will get to this later in the article). Now let us start with the methods.

1. gsap.to()

to() is a method provided by gsap to animate any element to the new state. to() method takes 2 arguments. So it takes your original element’s styles “to” the new style properties provided in the vars. For example,

original properties -> tween -> { opacity: 0 }

gsap.to(DOMelement / selector, vars);

The first argument is an element. You can pass either a DOM element or selector string to target an element. The second argument is something called “vars”, which is just an object that has all properties that you want to change. vars mostly consists of all the CSS properties that can be animated, but follow a camelCase syntax. For example “z-index” must be given as “zIndex”.

A simple example is to move an element’s x position to a new position (or left).

2. gsap.from()

from() is a similar method provided by gsap to animate any element from a new state. to() method takes 2 arguments. This first adds the styles given in the vars and theme gradually brings it to the original styles of the element. For example,

{ opacity: 0 } -> tween -> original properties

gsap.from(DOMelement / selector, vars);

The argument structure is the same as to() method.

A simple example is to move an element’s x position from a position ( or left ).

3. gsap.fromTo()

fromTo() is a method provided by gsap to animate any element from a given state to the new state. fromTo() method takes 3 arguments.

gsap.to(DOMelement / selector, varsFrom, varsTo);

The first argument is an element. The second argument is the properties that will be applied first to the element. The third argument is the properties that it will be reaching to at the end. For example,

{ opacity: 0 } -> tween -> { opacity: 1 }

A simple example is to move an element’s x position from a position ( or left ) to a new position.

4. gsap.timeline()

timeline() is a method provided by gsap to create a sequential timeline for animation. Suppose you need to animate 5 elements. And each element’s animation needs to wait for the previous animation to complete. This case becomes very complex in keyframe animations, because maintenance becomes a major issue. That is where timeline() method comes into use.

var myTimeline = gsap.timeline();

myTimeline
  .to(DOMelement / selector, vars)
  .from(DOMelement / selector, vars)
  .fromTo(DOMelement / selector, varsFrom, varsTo);

timeline() does not take any argument. You can add as many animations to a timeline. Each animation is triggered only after its previous animation has been completed.

Timeline animation is a bit different from the other animations.

Each method also has specific callbacks that you can use to execute certain functions after an update. Be sure to check out the callback functions on the gsap documentation, because you might never know what will miss.

And it is also very easy to integrate gsap methods with Promises, because these methods also return a promise on execution. This would be very useful when fetching data from an api. For example, If you have a list of books, and you add a book. The API/hook to add a new book will in turn set a loading and add the new book to the data and return a promise. You can now set the GSAP method in the promise resolving step and once the animation is done, the promise returned from that can be used to reset the loading. Promises in GSAP can also be used instead of timelines for shorter animation chains.

Apart from these gsap methods, there are a whole lot of plugins, some of which are free and some need a premium account. Some of the other plugins are ScrollTrigger, SnapPlugin, MotionPath, Inertia, Pixi, Text etc.

You can use the gsap methods in any way, and in any order to your creativity level. I have just made a simple button click animation. Even though it is minimal, it is effective

The main thing to remember is that, although animations are really eye catching to the user, overdoing it will definitely be a disadvantage. Don’t be flashy. Try to keep animations minimal but also attractive at the same time.