Web Animation with GSAP 3

Interaction and animation always eye-pleasing to watch. If we talk about animation on the web nowadays browsers have good support for animation. Using some good animation and small interaction surely helps to gain more users to the websites. There are more libraries to animate the elements on the web. Today we are going see one of the popular javascript library called GSAP

What is GSAP ?

The GreenSock Animation Platform (GSAP) is a powerful JavaScript library that enables front-end developers and designers to create robust timeline based animations. GSAP is used to animate each property individually, so you can scale, rotate, and move anything easily. And GSAP is flexible, so it’s a great choice for animating almost anything: CSS, SVG, DOM. Actually, you can use it anywhere JavaScript runs.

Why GSAP ?

• Its lightweight javascript library
• It’s fast and compatible with every browser and with various frameworks and libraries
• Using this library we can animate a single property of an element easily

How GSAP Works?

To add GSAP in your Project. You have to add this js to <script> tag before the closing </body> tag of your HTML document:

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js

Or You can also add GSAP through npm dependency

npm install gsap

Getting Started with GSAP 3

As GSAP 3 is introduced they have merged TimelineLite and TimelineMax property into a single property as gsap.

Today we are going to look at some of the basics of GSAP

• gsap.to()
• gsap.from()
• gsap.fromTo()
• gsap.timeline()

gsap.to()

This method used to animate any element to the new state in the DOM. This method takes 2 arguments: Target element and vars. The first value is you can pass either a DOM element or selector string to target an element The second argument is something called “vars”, which is just an object that has all properties that you want to change. vars mostly consists of all the CSS properties that can be animated but follow a camelCase syntax. For example “z-index” must be given as “zIndex”

<div class="targetElement"></div>

gsap.to('.targetElement', {
  duration: 1,
  x: 150,
  scale: 1.3
})

Example -> https://codepen.io/farisnceit/pen/mdPNvrM

gsap.from()

from() is a similar method provided by gsap to animate any element from a new state. from() method takes 2 arguments. This first adds the styles given in the vars and the theme gradually brings it to the original styles of the element

<div class="targetElement"></div>

gsap.from('.targetElement', {
  duration: 1,
  x: 150,
  scale: 1.3
})

Example -> https://codepen.io/farisnceit/pen/yLOmZMr

gsap.fromTo()

A gsap.fromTo() tween lets you define BOTH the starting and ending values for animation (as opposed to from() and to() tweens which use the current state as either the start or end). fromTo() method takes 3 arguments

gsap.to(DOMelement / selector, varsFrom, varsTo);

gsap.from('.targetElement', {
  duration: 1,
  x: 300,
  y:200,
  scale: 1.3,
  backgroundColor:'red'
},{
  duration: 1,
  x: 150,
  y:200,
  scale: 1.3
  
}) 

Example -> https://codepen.io/farisnceit/pen/yLOmZMr

gsap.timeline()

gsap.timeline() is a powerful sequencing tool that acts as a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Without Timelines, building complex sequences would be far more cumbersome because you’d need to use a delay for every animation.
For example (from GSAP Website):

// WITHOUT Timelines (only using delays):
gsap.to("#id", {x: 100, duration: 1});
gsap.to("#id", {y: 50, duration: 1, delay: 1});      //wait 1 second
gsap.to("#id", {opacity: 0, duration: 1, delay: 2}); //wait 2 seconds

We can see a basic example with gsap timeline. As you can see timeline property group every animation and animate it one after other

var tl = gsap.timeline({});
tl.from('#header-section',{y:'-100%',delay: 3, stagger: 0.5, ease: "elastic",})
tl.from('.landing-content h1',{y:'50px', opacity:'0', delay: 0.5,  ease: "power4.in",})
tl.from('.landing-content span',{y:'50px', opacity:'0', delay: 0.5,  ease: "power4.in",})

Made a simple example using a timeline for you understand how the timeline works
Codepen Example -> https://codepen.io/farisnceit/pen/zYBOPzw

Eases

Eases Mainly used to adjust the timing of the element travels from a to b. we can create a smooth natural animation using eases. GSAP provides a graph chart called visualizer to choose the type of ease you need
You can find the Visualizer here -> https://greensock.com/docs/v3/Eases
You can get more details about ease here -> https://easings.net/

How GSAP works with Frameworks

We can have an example of GSAP with react and see how it works. I will show a basic example of animation with react. I will not go deep into react as this is a GSAP related article. First, install react using create-react-app and then install gsap as a dependency

You find the detailed official documentation here -> https://greensock.com/react/

npx create-react-app my-app
cd my-app
npm start

npm install gsap

import React, { useEffect, useRef } from "react";
import gsap from "gsap";
import "./styles.css";

export default function App() {
const square = useRef(null);
useEffect(() => {
var tl = gsap.timeline({repeat:-1});

tl.to(square.current, 0.5, { x: 100 });
tl.to(square.current, 0.5, { y: 100 });
tl.to(square.current, 0.5, { x: 0 });
tl.to(square.current, 0.5, { y: 0 });
}, []);

return <div className="square" ref={square}></div>;
}

Use can find an example in this link: https://codesandbox.io/s/react-gsap-example-112zr?file=/src/App.js:0-463

References

hope I’m able to cover some useful basics of GSAP library for you

https://greensock.com/docs/v3/GSAP

https://greensock.com/showcase/

A challenge for you, create this animation using GSAP

https://dribbble.com/shots/4642794-Music-Landing-Page-Animation-Freebie