How to add powerful animations to any website.

Animations can add a lot of visual interest and engagement to a website, and the GSAP (GreenSock Animation Platform) library is a popular choice for creating smooth, performant animations. My favourite way to implement animations is using GSAP’s ScrollTrigger plugin makes it easy to add animations that are triggered by scroll events, so that elements on the page animate as the user scrolls.

To start using ScrollTrigger, you will need to include the GSAP core library and the ScrollTrigger plugin in your project. You can do this by linking to the CDN versions in the head of your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

Next, you will need to select the element(s) that you want to animate and create a ScrollTrigger animation for each one. You can do this using GSAP’s gsap.to() method, which allows you to specify the element, the properties to animate, and the duration of the animation. For example, to animate an element’s opacity from 0 to 1 over a duration of 1 second, you could use the following code:

gsap.to("#my-element", {
  opacity: 1,
  duration: 1
});

To make this animation scroll-triggered, you will need to pass a scrollTrigger object as the final argument to gsap.to(). The scrollTrigger object has a number of options that you can use to control the behavior of the scrollTrigger animation. For example, to make the animation start when the element is halfway into the viewport, you could use the following code:

gsap.to("#myElement", {
  opacity: 1,
  duration: 1,
}, {
  scrollTrigger: {
    trigger: "#myElement",
    start: "50% center",
  }
});

The start option specifies when the animation should start relative to the trigger element. In this case, we are using the value “50% center”, which means that the animation will start when the center of the element is 50% of the way into the viewport.

There are many other options that you can use to customize the behavior of your animations and they can be extremely powerful if used correctly. scrollTrigger is just the start of a huge collection of plugin extensions which can be used with the core GSAP library. Green Sock has some great documentation that explains the flexibility of the library.

What is the easiest way to add animations to a website?

Greensock is great for complex animations and having 100% flexibility with them but it requires javascript, HTML and CSS knowledge. What if you want extremely easy to implement animations. Well I developed a WordPress plugin exactly for that.

Find out more

Are animations bad for SEO?

It’s important to use animations wisely and not let them distract from the main content of the page or slow down the page’s loading speed. The GSAP library is very lightweight and is used through this website often and we still achieve over 99 on Google Page Speed Insights.

Here are a few tips for using animations on your website in a way that won’t harm your SEO:

1. Keep the animations small and lightweight: Large, resource-intensive animations can slow down your page’s loading speed, which can harm your SEO.
2. Use animations sparingly: Don’t let animations distract from the main content of the page. Keep them subtle and use them to enhance the user experience, not overwhelm it.
3. Use animation libraries: Using well-supported animation libraries, such as Animate.css, can help to reduce the size and complexity of your animations, making them easier to implement and less resource-intensive.
4. Optimize the loading of your animations: Use techniques such as lazy loading to ensure that your animations don’t slow down the initial loading of the page.

In contrast to the points above, animations can actually help to make a website more engaging and interactive for users, which can increase the amount of time they spend on the site. This can be a positive factor for SEO. As long as you are keeping an eye on your loading times and user experience, you’ll likely only experience benefits to your SEO.