How to Add Animations to your React App Using GSAP

With the increasing complexities of modern web pages often proposed by UI/UX designers, developers need to stay abreast of this evolution to ensure maximum user experience. 10 years ago, you may have created the greatest website of all time by simply stringing together some HTML pages for some basic layout, there’s not so much luck with that nowadays.

Modern web pages consist of more sophisticated CSS codes for styling and several objects moving around the screen — animations! Web animations ensure your webpage doesn't look so static and give it that modern UI feel.

Having to pick what animation library to use for your React project may be confusing, but that ends now. In this tutorial, you will learn how to add animations to your React application using GSAP, one of the most popular animation libraries for JavaScript.

What is GSAP?

The GreenSock Animation Platform (GSAP) is a web animation library that provides the logic for adding animation to any site powered by JavaScript. React, being built on top of JavaScript, falls under this category. GSAP is an extremely fun animation tool to use because it offers a great deal of flexibility, you can animate anything using GSAP — texts, images, scroll actions, SVGs, UI interactions, anything!

The most exciting feature about GSAP is its speed, it runs your animation sequences very fast. It is also a very popular framework with about 292,000 weekly downloads.

Why GSAP?

There are many JavaScript animation libraries to use, but GSAP stands tall because:

• It provides support for different frameworks, which makes migration of code easy.

• It has very minimal abstraction, you are in full control of your animation sequences.

• It is lightweight and fast, which is a very important factor to consider because sophisticated animation sequences tend to slow down page load time.

• It offers the flexibility of animating any section of your website.

• It has very comprehensive documentation and provides additional resources and templates to get you started with basic animations.

How To Use GSAP?

GSAP creates basic animations following the concept of tweens. A tween does all the animation work, it contains the target (object or section you want to animate), the duration (how long you want the animation to run), and other properties you may want to include in your animations. To properly use GSAP to animate, a knowledge of these three built-in tweens is required:

• gsap.to(): The gsap.to() tween moves a target from one position to another position. Suppose you want to move a text that says "Pieces co pilot provides code snippet and context for you" to the right position, you use the gsap.to() function for that. Let's consider the block of code below that makes use of the gsap.to() tween.

gsap.to(".pieces-class", {x: 100, duration: 2 });

In the code snippet above, the gsap.to() tween acts on the .pieces-class, which is the target containing the content we want to animate. We set the property of x to 100, which means we want to move the object 100 pixels to the right. The positioning is based on the concept of the x-axis and y-axis, which means we would set our property to y:100 if we want it to move 100 pixels downwards from the initial position, or y-100 if we want it to move 100 pixels upwards from the initial position. We also set our duration to 2, which means it runs for 2 seconds. There are tons of other properties which you can check out in the GSAP docs.

• gsap.from(): The gsap.from() tween is the opposite of the gsap.to() tween, it moves an object from its normal position. To explain this further, consider the block of code below:

gsap.from(".pieces-class", {y: 100, duration: 1 });

You should know that the default position of all elements(if it is not explicitly defined) is 0. So in the code snippet above, on entering the viewport, the content in the target(the pieces.class target) starts from 100 pixels downwards(when y is set to 100) and moves slowly to its default position(when y eventually reaches 0).

• gsap.fromTo(): As you'd guess, the gsap.fromTo() tween handles the sequence for both the start and end positions. This tween gives you the flexibility to define exactly where you want your animation sequence to start from, and where you want it to end. Consider the block of code below:

gsap.fromTo(".pieces-class", { y: 100 }, { y: 50, duration: 1 });

Here, we set our animation to start from 100 pixels downwards and go all the way to the top, but not to y:0(the default behavior), we set our y to be 50 pixels, which sets both positions only 50 pixels apart. The first block of code represents properties for the .from tween, while the second block represents properties for the .to tween.These three built-in tweens are all you need to create simple GSAP animations and we will do that in a bit.

Adding GSAP Animation Sequences to Your Application

In this section, we will add some basic animation sequences to our application, but before then, let's create a new React application.

Scaffolding your React Application

To create a new React application using Next as a build tool, run the line of code below in your terminal(provided you already have Node.js installed on your machine):

npx create-next-app

This installs all the packages and necessary dependencies to use GSAP in React for your project.

GSAP Installation

After creating a new React application, the next step is to install GSAP in our project so we can start animating! To do that, run the line of code below in your terminal

npm install gsap

This installs GSAP in your application and then we can import it in the file that contains the content we want to animate:

import React from "react";import { gsap } from "gsap";

Working Principle

To implement animations in our React application using GSAP, we make use of two hooks; the useLayoutEffect() hook and the useRef() hook. The useLayoutEffect() hook acts as a wrapper that contains all our animation code, so it takes effect after React has performed all DOM mutations. It ensures the animation gets rendered in the DOM. The useRef() hook is used to target elements we want to animate. It connects our animation code to the section or element to be animated.

Implementing Animation Sequences

Now it's time for some real action! Let's implement some animations, but first, we need to create a block of code to animate.

<div>
    <div className="flex flex-col items-center justify-center">
        <div>
            <h1 className="text-8xl text-center mb-20">
                Pieces for Developers
            </h1>
            <li className="text-2xl text-center">
                Copy and Save code with Pieces
            </li>
            <li className="text-2xl text-center">
                Convert from one programming language to another using Pieces
            </li>
            <li className="text-2xl text-center">
                Speed up Development Time using the Pieces Copilot
            </li>
        </div>
    </div>
    {/* This is just static code content, one which we want to animate. Let's create some animation code: */}
    {/* target elements with useRef */}
    let animateBounce = useRef();
    let animateLeft = useRef();
    let animateRight = useRef();
    let animateUp = useRef();

    useLayoutEffect(() => {
        gsap.fromTo(
            animateBounce.current,
            { y: 40 },
            { y: 0, duration: 1, repeat: -1, yoyo: true }
        );
        gsap.fromTo(
            animateUp.current,
            { y: -100, opacity: 0 },
            {
                y: 0,
                duration: 4,
                opacity: 1,
            }
        );
        gsap.fromTo(
            animateLeft.current,
            { x: -200, opacity: 0 },
            {
                x: 0,
                duration: 4,
                opacity: 1,
            }
        );
        gsap.fromTo(
            animateRight.current,
            { x: 200, opacity: 0 },
            {
                x: 0,
                duration: 4,
                opacity: 1,
            }
        );
    }, []);
</div>

The animateUp is set in a way that the animation starts 100 pixels away from its end position on the y-axis. We also set the opacity of the first block(which represents the .from() tween) to 0, and the second block(which represents the .to() tween) to 1. The expected animation behavior of this code is that it starts to descend 100 pixels to its end position like an umbrella.

The animateLeft property is set in a way that it comes 200 pixels from the left to its end position. We also set the opacity of the first block to 0 and set the opacity of the second block to 1, which allows the element to gradually be visible as it enters the viewport.

The animateRight property is set in a way that it comes 200 pixels away from the right to its end position. Then the opacity is set in a way that it gradually becomes visible as it reaches its end position.

Enough talking! Here's the result of the animation

import React, { useRef, useLayoutEffect } from "react";
import { gsap } from "gsap";

const Pieces = () => {
    // target elements with useRef
    let animateBounce = useRef();
    let animateLeft = useRef();
    let animateRight = useRef();
    let animateUp = useRef();

    useLayoutEffect(() => {
        gsap.fromTo(
            animateBounce.current,
            { y: 40 },
            { y: 0, duration: 1, repeat: -1, yoyo: true }
        );
        gsap.fromTo(
            animateUp.current,
            { y: -100, opacity: 0 },
            {
                y: 0,
                duration: 4,
                opacity: 1,
            }
        );
        gsap.fromTo(
            animateLeft.current,
            { x: -200, opacity: 0 },
            {
                x: 0,
                duration: 4,
                opacity: 1,
            }
        );
        gsap.fromTo(
            animateRight.current,
            { x: 200, opacity: 0 },
            {
                x: 0,
                duration: 4,
                opacity: 1,
            }
        );
    }, []);

    return (
        <div>
            <div className="flex flex-col items-center justify-center">
                <div>
                    <h1 ref={animateBounce} className="text-8xl text-center mb-20">
                        Pieces for Developers
                    </h1>
                    <li ref={animateUp} className="text-2xl text-center">
                        Copy and Save code with Pieces
                    </li>
                    <li ref={animateRight} className="text-2xl text-center">
                        Convert from one programming language to another using Pieces
                    </li>
                    <li ref={animateLeft} className="text-2xl text-center">
                        Speed up Development Time using the Pieces Copilot
                    </li>
                </div>
            </div>
        </div>
    );
};

export default Pieces;