GSAP:Getting the basics right

GreenSock Animation Platform commonly known as GSAP is the most robust high-performance JavaScript animation library available which can animate anything JavaScript can touch (CSS properties, canvas library objects, SVG, React, Vue, Angular, generic objects, etc ) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms. This is why Google recommends it for JS-based animations and every major ad network excludes it from file size calculations. A developer with literally little knowledge of animations can be a wizard in no time with this powerful library.

Prerequisites

Here are some prerequisites to properly understand and to swiftly start learning GSAP:

• HTML: Simple but not so simple, figuring out the right markup might be quite challenging.
• Javascript: A good understanding of event listeners and the event object is a must for complex animations.
• CSS: The Godfather.

Optional requirements:

• ReactJS: The help of states and hooks can make animations easier.
• SASS/SCSS: To make CSS simpler.

Getting Started

Installation

There are various ways to integrate GSAP into your project:

• Download the GSAP.zip package locally and use the JS files located in it.

<script src="/[YOUR_DIRECTORY]/gsap.min.js"></script>

• Using CDN ( easy to start learning with ).

<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js</a>"></script>

• Installing GSAP NPM package, for node environment.

npm install gsap

import { gsap } from "gsap"

Basic Animations

Assuming you’ve installed GSAP through any of the above methods

Here is a simple example:

https://codepen.io/saurabhsutar192/pen/KKvNyeb

If out of bounds, click “0.5x” or lower

Now at the above example, we get a fair idea that the main object used throughout is gsap along with its methods and x is the short form for transform: translateX( )

Some configs such as duration, etc can be directly passed as a parameter in the methods & if there consist several elements which have same class names they all get animated with respect to their default CSS values

Common Methods

All the below-mentioned methods have their first parameter as target( element selector ) which works similarly as we select elements in the document.querySelector( ) and next is/are object/s which includes the styles and config for the element.

• gsap.to( ) : As the name, this method animates the element from the default CSS values upto the values specified in the object parameter along with the config passed.( Orange Box in the CodePen )

gsap.to(".a", {
  x: 500,
  duration: 2,
})

• gsap.from( ): This method acts opposite to gsap.to( ). Here the element/s is/are animated from the values passed in the object paramater to the default CSS values along with the config.( Blue Box in the CodePen )

gsap.from(".b", {
  opacity: 0,
  x: 500,
  duration: 2,
})

• gsap.fromTo( ) : This method is a combination of both gsap.from( ) and gsap.to( ). Here the CSS values don’t matter much because the element/s is/are animated from the values specified in the first object with styles and config to the values specified in the second object with styles and config.( Pink box in the CodePen )

gsap.fromTo(
  ".c",
  2,
  {
    x: 800,
    opacity: 0,
  },
  {
    opacity: 1,
    x: 500,
  }
)

For more and detailed info visit GSAP DOCS

Tweens

A Tween is what does all the animation work. You feed in targets (the objects you want to animate), a duration, and any properties you want to animate and when its playhead moves to a new position, it figures out what the property values should be at that point applies them accordingly.

In simple terms, gsap.from( .. ) is a Tween.

The methods explained above with gsap form a tween. All of these methods return a Tween instance

let tween = gsap.to(".class", { rotation: 360, duration: 5, ease: "elastic" })

//now we can control it!
tween.pause()
tween.seek(2)
tween.progress(0.5)
tween.play()

https://codepen.io/GreenSock/pen/OJLgdyg

Common tween methods

paused:true makes the tween to pause at default. If not specified the tween will play right away without calling tween.play( )

For more and detailed info visit GSAP DOCS

Timeline

Let’s say now you want to chain multiple animations. Animations that get triggered one after the other. Now looking from the above examples the approach of chaining would use delay.

for eg.

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

Now lets consider the scenario where you want to change the delay on second animation. This will now mess up the whole chain causing to reconfigure delays.

This issue is solved by Timeline.

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

https://codepen.io/saurabhsutar192/pen/yLoVvQv

Basic timeline

The above CodePen shows the timeline in which animations are triggered one after the other. Here we can chain multiple tweens and can also nest timelines.

For more and detailed info visit GSAP DOCS)

Conclusion

Using the above-explained concepts one can have a nice headstart in learning GSAP and start playing around with various types of animations using in combination with the timeline and events.