Step-by-step guide to GSAP Library

Websites that have eye-catching animations are definitely worth investing in. They ensure a holistic experience that sometimes provides a creative essence of storytelling. But, how can we really make such websites? Well, the secret sauce is GSAP.

What is GSAP?

GSAP (GreenSock Animation Platform) is a highly scalable animation library that enables us to add dynamic effects in web apps, games, and interactive stories. With the help of GSAP, we can animate almost everything on the browser.

Why should we use GSAP?

GSAP has a lot of benefits. Some of them are -

a super-fast and high-performant animation library;
comprises myriad of features to create the most complex and fascinating animations
compatible with every browser, libraries, and frameworks
has the ability to animate every aspect of an element
lightweight, expandable, and doesn’t require external tools

In this article, we will focus on three GSAP concepts -

Tweens
ScrollTrigger
Timelines

Installing GSAP

The best way of installing GSAP is via CDN. We can also use npm or simply load GSAP via the script tag. To install GSAP, use

npm install gsap

or 

yarn add gsap

or

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

Understanding Tweens

In order to create animations with GSAP, the first step would be to implement Tweens. We set the properties that are to be animated, set the duration of the animation, basic sequencing by using delay in tweens. Check here for the complete documentation of tweens.

There are three common methods for creating a Tween:

gsap.to()
gsap.from()
gsap.fromTo()

Let’s see the animation of circle using different methods.

//html

<div class="circle"></div>

//css

.circle {
  margin-top: 100px;
  margin-left: 60px;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  background-color: blue
}

gsap.to()

gsap.to(".circle" , {
  ease: 'elastic',
  x: 400,
  scale: 1.5,
  duration: 1
})

gsap.from()

gsap.from(".circle" , {
  y:80,
  opacity:0,
  duration:2,
  ease: 'elastic'
})

gsap.fromTo()

//Animate the size 
and color of a circle from blue to pink, 

gsap.fromTo(".circle", {
  backgroundColor: "blue",
  scale: 0
}, {
  backgroundColor: "pink",
  duration: 1,
  repeat: -1,
  yoyo: true,
  scale: 1
})

Understanding ScrollTrigger

GSAP ScrollTrigger is one of the several plugins that GSAP comprises. ScrollTrigger enables us to craft scroll-based animations with less code. Check out the ScrollTrigger documentation here.

ScrollTrigger has the ability to take certain actions on animations such as playing, pausing, resetting, reversing, and so on, while entering/leaving the given area or viewport.

To install ScrollTrigger, we need the following code-

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

We have to register the plugin in our JavaScript file main.js, before using it. This ensures the seamless functioning of the plugin in GSAP.

gsap.registerPlugin(ScrollTrigger)'

We have to link the animation to the element and drive animations based on the location of the element in the viewport. This improves the performance of the animation and ensures that our beautiful animations are clearly visible. We can also soften the link between the animation and the scrollbar using scrub: 1 so that the animation takes only 1 second to catch up.

This is how we use ScrollTrigger-

//HTML

<div class="wrapper">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle circle3"></div>
</div>

//CSS

.circle {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  background-color: blue;
  margin-bottom: 10px;
  margin-top: 10px;
}
.wrapper {
  display: flex;
  margin-left: 20px;
  justify-content:flex-start; 
  flex-direction: column; 
}

//JS

 gsap.to(".circle3", {
      x: 200,
      duration: 2,
      ease: "elastic",
      delay: 1,
      scrub: 1,
      scrollTrigger: {
        trigger: ".circle3",
        markers: true
      }
    });

There are several other things we can do with ScrollTrigger. We can snap to certain points in the animation depending on the velocity using get.velocity(), define scroll positions flexibly, and so on.

Understanding Timelines

Timelines in GSAP is a powerful sequencing tool that makes our job a lot easier, as compared to using Tweens for sequencing. It allows us to control different tween or other timelines in a complete manner, thereby, providing us better control of every tweens timing corresponding to other tweens of the same timeline.

Without Timelines, sequencing would have been a lot more difficult as we would have had to use delay() for every animation.

Whether we want to pause, reverse or repeat the sequence, we can do it all at once using Timelines. Look at the code below for better understanding-

var tl = gsap.timeline({repeat: 2, repeatDelay: 1});
tl.to(".circle", {x: 300, duration: 1});
tl.to(".circle", {y: 100, duration: 1});
tl.to(".circle", {opacity: 1, duration: 1});

// control the whole element
tl.pause();
tl.resume();
tl.restart();
tl.reverse();

Real-world example of using GSAP

Recently, at Saeloun, we revamped our website and used GSAP library to animate different elements to make the page look even more appealing. Look at the video below. The moving petals are the elements that have been animated through GSAP library.

Now, let’s go over the process.

As per the width and height, random calculates a number between minimum to maximum and assigns that number to the petal(GSAP animation).

const Petal = ({w, h}: PetalProps) => {
  const random = (min: number, max: number) => {
    return min+Math.random()*(max-min);
  };

Now, we have to transfer the elements from HTML file. Next, we control the animation(petals) in various ways. We set the origins and define the values to spin the elements in the desired pattern.

 const boxRef = useRef<HTMLDivElement>() as RefObject<HTMLDivElement>;
  
   useEffect(() => {
    gsap.set(boxRef.current, { x: random(0, w), y: random(0, h),z: random(-200,200)});
    gsap.to(boxRef.current,random(6,15),{y: h-20,ease: Linear.easeNone,repeat:-1,delay:-15});
    gsap.to(boxRef.current,random(4,8),{x: w,rotationZ:random(0,180),repeat:-1,yoyo:true,ease:Sine.easeInOut});
    gsap.to(boxRef.current,random(2,8),{rotationX:random(0,360),rotationY:random(0,360),repeat:-1,yoyo:true,ease:Sine.easeInOut,delay:-5});
  }, [w, h]);

Final Thoughts

Using GSAP isn’t that tough. All we need is a basic knowledge of HTML, CSS, CSS transitions, and JavaScript. The codes and concepts are easy enough to understand even if one has never used GSAP before.