Is GSAP a better alternative for high-performing JavaScript Animation?

If you want to include animations on your website, CSS3 is an excellent option. But as animation keeps getting more complex, implementing it gets much more difficult and time-consuming.

At SuperShare, we wanted to efficiently use animations to enhance the user experience for our viewers. However, CSS3 was not able to handle the complexity due to which we had to resort to GSAP which made our lives so much easier

But what is GSAP?

the developers of GSAP describe it as the “Swiss army knife” of JavaScript animation and I can’t dare to disagree. A robust high-performing JavaScript animation library that is unlike monolithic frameworks which dictate how you structure your apps.

It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, React, Vue, Angular, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms.

How different is it?

Let’s consider an example in the form of a simple pulse animation:

With CSS I used keyframes to specify the style change that happens in percentage

With GSAP, I did not have to worry about browser inconsistency because it is already taken care of, but this is still very simple.

So I introduced some complexity to this pulse.

I considered a scenario where we have one pulse which animates over a time period of 5s and a second pulse that has a delay of 2s and animates over a time period of 3s. Having a total animation time of 5s.

With CSS3 we code:

But this doesn’t quite work. Animation delay property makes the animation delay only once. It is inoperable. It stops working from the next iteration cycle.

So we take that into account and quickly do a small fix here. Delay is a part of animation as well. So animation time 3secs + delay time 2secs should be considered. The above code looks like this after this fix:

Now the keyframes run for 5 secs. To ensure that the keyframes run for 3 secs, we make it so that the animation occurs in 3/5th of the total time or 60% of the time.

We fix our keyframes for the second pulse with code :

Here’s the final solution, thank me later :)

Imagine a situation where we have to add multiple pulses each with its own time delay. Calculating keyframes for each pulse would be hectic.

But to achieve a similar effect using GSAP, the only update we need to add is a repeatDelay function 👉

Not having to keep doing calculations for time delay and having an inbuild function that takes of browser consistency saves a lot of time.

Let us explore another example with VanillaJS this time:

In this example, we have a video pip that is draggable.

Below is the example imitating the functionality of a draggable video pip using vanillaJS.

In the above code, we have an eventlistener on mousemove where we get left and top coordinates which are then used to update the container position. We also consider removing listeners on mouseup.

The same effect can be brought with GSAP very easily without having to handle eventlisteners.

With significantly less code we achieve similar results. It is also very easy to add extra controls like axis locking, drag resistance, and edge resistance using GSAP draggable. Making it superior for handling animations.

GSAP maintains compatibility with most browsers, is entirely flexible, highly performant, and easy to code. It sure is the swiss knife of the javascript animations for me.

If you’re new to this library or just browsing for alternatives, we at SuperShare urge you to dive into it because it has been an awesome experience for us using it so far.

Feel free to drop a comment or reach out to me on Linkedin or Twitter