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.
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.
The quick brown fox jumps over the lazy cat
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.