Why do we love GSAP?

This article is based on our Senior Developer Paul Thomas’ talk on GSAP given at BristolJS you can view the full talk here.

At GC, we specialise in creating engaging and exciting digital experiences and animation plays a big part in that; recently we’ve been using GSAP to achieve exciting features and it’s changed the way we work. This blog’s going to talk about why you want to use GSAP, what you can achieve with it and some of it’s the less obvious applications. The accompanying animations are all produced using GSAP so as to show some confidence in our conviction – but it can be used for whatever you put your mind to!

By definition, GSAP is an animation programme but that doesn’t really do it justice. It can vary any numeric value over a period of time which is, broadly speaking, the definition of animation – but when you think of animation you tend to think of cartoons or looping animations. Website animations could be a case of clicking play and watching the animation go but since we’ve started using GSAP we’ve realised that traditional animation is just the surface of what you can achieve with GSAP. Broadly speaking, GSAP gives you access to any tool that your job, as a web developer, requires: whether that’s CSS, SVG, colours, text, SVG morphing or PNG sprite animations – the application is really broad.

(Basic) animation in action

See the Pen Basic GSAP in action by Paul Thomas (@motionimaging) on CodePen.

Above, we have a very contrived example – not something you’d want to do in real life – but this example is a good way to look at the code to demonstrate what you can do. This is a repeating animation as we move the dots left and right and fade them in and out, accompanied by a bounce animation for the squares. In CSS that would take quite a bit of code, but if we look at the JavaScript for it in GSAP, we’ve managed to achieve it in just three lines of code and this shows you how relatively simple the syntax is.

We’re not going to try and dive too deep into code but over a period of time we’re going to vary the values from the Alpha Channel to set the opacity, the X Value (from left to right), and we’re going to tell it what kind of Ease we want. We’ve set the bounce Ease for the squares, the power 3 Ease (a typically slow Ease process) for the circles, and we’ve set it to repeat forever as it bounces backwards and forwards. The result of this is a relatively simple animation and goes to show how movements like this are relatively simple to achieve.

We’re going to compare GSAP to CSS here. There are obviously other JavaScript platforms involved and they have different benefits over CSS too. One of the hardest things with CSS animation is the sequencing – we want to do something, followed by something else, followed by something else as well. You can do that in CSS but it’s all percentage-based (or at least largely percentage-based) and we often end up getting a calculator out.

You start saying to yourself ‘I have an animation going for 3 seconds, and then a delay of however many seconds…’ and it quickly starts to get out of control.

With GSAP you simply sequence and it follows a natural order – so you can set one thing, followed by something else, followed by something else and then set that. You can get GSAP to say ‘I want that thing to start half a second after that one’s finished’ and that feels far easier and gives you a much better level of control.

Ease in in CSS is very difficult unless you’ve installed other supplementary plugins, allowing you to only Ease in and Ease out. Meanwhile, GSAP’s got loads: we’ll discuss these later. CSS makes it quite hard to access properties of SVG elements – if you don’t set SVG values to start with, you can kind of access them but it’s not ideal. Using something like GSAP really gives you that key targeting ability and lets you zoom in on anything, giving you the opportunity to create much richer animations and control anything you want. CSS’ percentage-based timing means it’s harder to intuitively create design with someone else. For instance, if a colleague asks you to make an animation half a second slower they’re not going to say ‘make that first bit 25% slower than the second bit with a 5% offset’. GSAP, on the other hand, gives you the ability to edit with someone looking over your shoulder, which is incredibly useful. GSAP JavaScript is really easy to debug as well as you can console log everything and debug it. You can create control too – as we move the sliders you can see the animation react. That’s really handy when you get into more complicated animations. GSAP is very intuitive too – the language it uses is second nature and it’s easy to understand. GSAP makes animation intuitive and more fun.

The quick brown fox jumps over the lazy cat

See the Pen CSS vs GSAP - CSS by Paul Thomas (@motionimaging) on CodePen.

This animation is done in JavaScript and we thought we’d compare it. The percentages are set in different places and don’t mean a huge amount – the animation is shaky and it’s not hugely obvious what either of the characters are doing.

See the Pen CSS vs GSAP - GSAP by Paul Thomas (@motionimaging) on CodePen.

Here we have the same animation but with GSAP. You’ll see that we have the option to make elements move faster – such as the fox here – and by changing the value we can make him run faster. We can change the Easing so that the jump can slow down or move how we want. GSAP also has a Bezier Curve function so we can make the animation move over any Curve rather than a simple up/down motion. We can also sync things up using split text – which you can’t do in CSS – so we have the option to control the text at the same time.

You’ll often hear people saying out-and-out CSS is more performant than JavaScript animations, which is actually a fallacy – this isn’t always the case and certainly isn’t when you get to more complex situations. It depends on the browser, machine and what you’re trying to animate.