Step-by-step guide to GSAP Library

0
30
Saeloun Logo


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:

  1. gsap.to()

  2. gsap.from()

  3. 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.



Source link

Leave a reply

Please enter your comment!
Please enter your name here