Have you ever looked at a website or any content on the web and think: "I would love to be able to do something like that!" I usually have that feeling when I see anything animated like the newest Disney motion picture or interactive formats like visual essays from Pudding.

When I stumbled upon the GSAP library, I took the chance to rebuild my homepage from scratch in order to whip some smooth UX on it like the examples above. The goal is to have all information on one page to be provided bit by bit through scrolling.

Setup

GSAP can animate everything JavaScript can touch. They say it interacts well with the common Frontend frameworks. So, I setup a Vue 3 project with Vite and got started. GSAP can be installed via npm: npm install gsap

Simple example: Loading bar

I want to showcase GSAP's ScrollTrigger features by implementing a loading bar that enters the screen when scrolling down. The output should look similar to this:

First, we need an element to move. So, we define an CSS element loading-bar:

.loading-bar {
  width: 100vw;
  height: 50px;
  background-color: white; 
  color: darkslategrey;
  font-size: larger;
}

Moving the bar 100 pixels to the right for example is fairly simple. Import the gsap dependency and use the .to function to determine where the element should end up on the screen. GSAP takes care of the corresponding property manipulation for you!

import { gsap } from 'gsap';

gsap.to(".loading-bar", {
  scrollTrigger: ".loading-bar",
  x: 100
});

The first argument tells GSAP which element should be manipulated. The property scrollTrigger makes clear when the animation should start. In this case, you want it to move to the right when .loading-bar enters the screen.

Timelines for versatility

We learned the first steps to create our animation. But when to run that code? A solution would be once the instance of the component has been mounted. So, we put it in the corresponding lifecycle hook:

export default {
  mounted: () => { 
    const tl = gsap.timeline()
    tl.from('.loading-bar', { xPercent: -100, duration: 2 })
  }
}

Notice that we used a Timeline here because it makes organizing animation steps easier when handling more CSS elements. Imagine writing multiple gsap.to()s which would make your code hard to read.

Also, we switched from gsap.to() to Timeline's .from function. It is just the other way around this time. Now, our bar will come from off-screen (left) and slide into the original position.

ScrollTrigger

We are missing the trigger for our animation which we will deliver through the ScrollTrigger Plugin. You need to import and register it.

import { ScrollTrigger } from "gsap/ScrollTrigger";

export default {
  mounted: () => { 
    gsap.registerPlugin(ScrollTrigger);

    const tl = gsap.timeline()
    tl.from('.loading-bar', { xPercent: -100, duration: 2 })

    ScrollTrigger.create({
      animation: tl,
      trigger: ".background-panel",
      start: "top top",
      end: "+=1000",
      pin: true,
      scrub: true,
    })
  }
}

You see that the trigger element is a .background-panel element that I defined to function as a canvas for the animated loading bar. Let's go through the other properties.

start: You pass two keywords here. Here, for example, the animation starts when the top of the viewport reaches the top of the background panel. This ensures that the background panel is in full view before the animation starts.

end: This determines when the animation ends. This increment means that you need to scroll 1000 pixels to see the full animation evolving. This gives the user the feeling that s/he in scrolling "in place".

pin: If set to true, the trigger element (here: the background) is pinned throughout the animation.

scrub: If set to true, you can scroll up and the animation is reversed!

The different effects will become clearer once you see the result on my homepage. Caution: It is not mobile-optimized yet!

Verdict

I was astonished by the speed and versatility of animating with GSAP. I even added a Parallax effect to my website among other things.

Feel free to tell me what you think of the animations on my website. And go check out GSAP yourself! There is plenty of documentation and showcases on their website. It is definitely one of the smoothest frameworks I picked up this year!

Photo by Gensa Hub on Unsplash