If you're new to web animations and want to make your website pop without complicated code, you've come to the right place. GSAP (GreenSock Animation Platform) is one of the most powerful and easy-to-use JavaScript libraries for animations on the web. It allows you to create smooth, performant, and professional-looking animations with minimal effort.
In this post, we’ll dive into the basics of GSAP, using beginner-friendly examples to show you just how easy it is to create animations that can bring any web page to life.
What is GSAP?
GSAP is a JavaScript library specifically designed for creating high-performance animations. It’s trusted by big companies like Google, Apple, and Netflix due to its flexibility and power. The best part? You don’t need to be a coding genius to get started with GSAP.
Let's walk through how you can animate elements like text, images, and more using GSAP!
How to Install GSAP on WordPress
Before we dive into examples, you’ll need to add GSAP to your project. The easiest way is to include the GSAP CDN in your HTML header file. Head over to the GSAP website for the official CDN, and then use a plugin in Code Snippets to add it to your site wide header.
You can also grab the CDNs for more complex GSAP effects, if you are plannig on using them.
Once GSAP is installed on your site, you're ready to animate!
Example 1: Basic Element Animation with gsap.to()
The most fundamental method in GSAP is gsap.to(). It animates an element from its current state to a specified state. Let’s create a blue box and animate it to move to the right.
We've run into our first problem. By default, GSAP triggers on page load. So, by the time you read all of the content above, this animation has taken place off screen and you should be looking at a blue box half way across the page. This is where triggers come in.
You could use a JS event listener to run the GSAP script. But, GSAP has a really useful trick up it's sleeve - scrollTrigger
Example 2: Animating on scroll with scrollTrigger
In this instance, we'g going to keep the HTML and CSS as before, but add a scrollTrigger to trigger the animation when the box reaches 30% of the way up the screen.
Tip: try adding markers: true, to your trigger code to get a visualisation of the scroll trigger points. This is really useful for debugging animations that aren't behaving as planned!
Example 3: Repeating Animations
If you want an animation to repeat or add easing effects, GSAP makes it incredibly easy. Let’s have an element repeat its animation with an ease-in-out effect:
Tip: use repeat: -1, for an infinte loop. If you want to set a loop number, use repeat: x, where x is the number of loops you require (for example repeat: 10)
Example 4: Stagger
Stagger is a very useful aspect of GSAP, allowing you to apply the same animation to multiple elements with the same class, but add a stagger delay so they don't all animate at the same time.
Right, lets put what we've learned into practice. We're going to create a menu that slides in from the side of the screen and contains an animated CTA button. On desktop, the menu will be half of the screen, and on mobile it will take up the entire screen. There will be a button to open and close this menu.
The menu starts off-screen on the left side when the page loads. Clicking the menu icon triggers an animation that slides the menu into view while gradually increasing its opacity to 1. The menu items also have playful animations, using the stagger function and elastic easing to create a bouncy, dynamic effect. Lastly, there’s a call-to-action (CTA) button that pulses to grab the user's attention.
Click the menu icon to see the animations in action!
As you've seen from these examples, GSAP makes complex animations incredibly simple and efficient. Whether you're animating a single element or building complex sequences, GSAP's flexibility allows you to achieve incredible results with just a few lines of code.
By mastering GSAP’s basics, like the gsap.to() method, timelines, and easing functions, you can easily integrate animations into your projects. And with plugins like scrollTrigger, you can create more interactive and scroll-based animations to enhance the user experience.
