GSAP: Animate Like a Pro

Beyond Boring Animation

Intro

Hello everyone, this is my first ever technical blog and I am excited to share my experience with a robust animation toolset, and by using it you can feel you are an animation superhero.

GSAP or GreenSock Animation Platform is a Javascript animation Library and it has opened up a world of possibilities for creating smooth and stunning animations that can elevate any web project. I am assuring you because I have learned it recently and used it in a few web projects.

What is this article?

The article itself explores the flexibility of this Library and also gives you a basic understanding of it. Will explain to you how this library in the simplest way can do complex animation in your mind.

Why GSAP?

  • Cross-browser compatibility(animations work consistently across all major web browsers)

  • Performance(ideal for complex and demanding animations )

  • Flexibility(used with a wide range of web technologies and frameworks, including React, Vue, and Angular)

  • Easy to learn(GSAP is relatively easy for developers to learn and use.)

  • Community support(large and active community of developers who provide support, resources, and examples)

Power of GSAP

You can develop amazing loading animation using GSAPwith few lines of javascript code

const t1 = new TimelineMax();
t1.fromTo(hero, 1, { height: "0%" }, { height: "80%", ease: Power2.easeInOut })
    .fromTo(hero, 1.2, { width: "100%" }, { width: "80%", ease: Power2.easeInOut })
    .fromTo(slider, 1.2, { x: "-100%" }, { x: "0%", ease: Power2.easeInOut }, "-=1.2")
    .fromTo(logo, 0.5, { opacity: 0, x: 30 }, { opacity: 1, x: 0 }, "-=0.5")
    .fromTo(hamburger, 0.5, { opacity: 0, x: 30 }, { opacity: 1, x: 0 }, "-=0.5")
    .fromTo(headline, 0.5, { opacity: 0, x: 30 }, { opacity: 1, x: 0 }, "-=0.5")

Getting Started with GSAP

Set-Up

To get started with GSAP, we first need to include the GSAP library in our project. We can do this by downloading the library from the GSAP website or using a CDN (Content Delivery Network) link.

For importing the GSAP library into the project use this website: https://cdnjs.com

Search the library and then copy the script tag required for your project and paste it into the body section of the HTML.

Note: Keep in mind that the external script file is connected at last after importing all the GSAP libraries. (If your external JavaScript files have dependencies on the GSAP library, importing GSAP first ensures that those dependencies are met before the external files are loaded.)

For installing GSAP into react Project:
npm i react-gsap

GSAP code

Once we have included the GSAP library, we can start using it to create animations.

Here’s the first GSAP code (The basic syntax for creating an animation using GSAP is as follows):

Tween:-

gsap.to(element, duration, {animationProperties},{ease: easingFunction});

element is the HTML element we want to animate. duration is the time in seconds or milliseconds for the animation to complete. animationProperties is an object containing the properties we want to animate and their corresponding values. easingFunction is the name of the easing function we want to use.

gsap.to(".my-element", 2, {x: 100, ease: Power3.easeOut});

the following code animates a div element to move 100 pixels to the right using the Power3.easeOut easing function

Timeline:-

GSAP provides a timeline object that allows us to sequence and control multiple animations. A timeline is essentially a container for animations, which can be added, removed, and manipulated as a group.

The basic syntax for creating a timeline using GSAP is as follows:

var timeline = gsap.timeline();

Basically for creating multiple effects, the timeline is used.

In this syntax, the timeline is a variable that holds the timeline object. We can add animations to the timeline using the to() method:

timeline.to(".my-element", 2, {x: 100})

.to(".my-element", 2, {y: 100})

.to(".my-element", 2, {rotation: 360});

We first create a timeline object and then add three animations to the timeline. Each animation is chained to the previous one using the to() method.

Example

Resources

Here is the cheat sheet: https://greensock.com/downloads/gsap-3-cheat-sheet.pdf

The best way to learn GSAP is from the docs section of the GSAP website:

https://greensock.com/docs/

and then implement some of the projects using GSAP and allow yourself some time to become accustomed to it.

Youtube:

Conclusion

Through this blog, I have aimed to provide a basic understanding of GSAP and its capabilities, as well as showcase a few basic applications of the library. I hope this has inspired you to explore GSAP further and experiment with its various features to create stunning animations for your own web projects.

Learning and mastering GSAP is a continuous journey, and there is always more to discover and explore. By staying curious, persevering through challenges, and continuously building your skills, you can become a master at creating stunning web animations with GSAP.

Remember, GSAP is just one tool in your toolkit, but with its powerful features and ease of use, it can help take your web animations to the next level. Keep experimenting, stay curious, and happy animating!