Doing simple animations in a react app using GreenSock Animation Platform (GSAP)

Do you sometimes visit websites with beautiful animations and daydream about implementing them in your applications like me? Well no more daydreaming because I found something while surfing the web endlessly that helps with simple animations. GSAP animates anything JavaScript can touch, so ideally it is perfect for simple animations in your react app. I am going to be using GSAP to render components to the DOM animatedly.

Prerequisites

1. Yarn/npm installed
2. create react app CLI tool installed
3. GSAP

Basic usage

Code snippet

DEFINITIONS

• duration — time animation in ms,
• ease — animation ease,
• y — y-axis to animate from,
• delay — How long to wait before the animation begins
• TimelineLite — 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,
• from — where you define where the values should START, and then it animates to the current state which is perfect for animating objects onto the screen because you can set them up the way you want them to look at the end and then animate in from elsewhere,
• staggerFrom — To create a staggering effect for the texts.

GSAP basically updates the numeric properties of an object to be animated many times per second which creates the illusion of animation. A combination of the two snippets above gives the result below.

Result

Conclusion

Here is a link to the official documentation for GSAP to get your hands dirty, happy animating 😄.