Unlock the Power of Animations with React Hooks and GreenSock

What You Need to Know

Before we dive in, keep in mind that this article assumes you have a basic understanding of JavaScript and React. If you’re new to React, we recommend checking out the official React docs to get started.

What We’re Building

We’ll be creating two animations: a simple loader inspired by Google’s design, and a more complex animation of a custom logo. These animations will showcase the power and flexibility of GreenSock and React Hooks.

Introducing GreenSock

The GreenSock Animating Platform (GSAP) is a JavaScript library that allows you to create high-quality, high-performance animations on the web. With GSAP, you can create SVG and CSS animations, as well as immersive WebGL animations. Its toolset is used by popular animation libraries like Three.js, and it’s even integrated into Adobe Animate and Easel JS.

Creating a Google-Style Loader

Let’s start with our simple loader animation. We’ll use a CodeSandbox template that includes GreenSock and React, so you can follow along easily.

Rendering the Loader Graphic

First, we need to create our loader graphic. We’ll use a basic SVG markup and render it inside our Loader component.

import React from 'eact';

const Loader = () => {
  return (
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" fill="#fff" />
      <circle cx="50" cy="50" r="30" fill="#fff" />
      <circle cx="50" cy="50" r="20" fill="#fff" />
    </svg>
  );
};

export default Loader;

Referencing Animated Elements

To animate our elements, we need to get a reference to them. We’ll use the useRef Hook to create a ref object that targets our animated elements.

import { useRef } from 'eact';

const Loader = () => {
  const circleRef = useRef(null);

  return (
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" fill="#fff" ref={circleRef} />
      <circle cx="50" cy="50" r="30" fill="#fff" />
      <circle cx="50" cy="50" r="20" fill="#fff" />
    </svg>
  );
};

Bounce Animations with GreenSock

Now it’s time to add some animation magic to our loader. We’ll use GSAP’s fromTo method to animate our circles. By adding the yoyo and repeat properties, we can create an infinite bounce animation.

import { useRef, useEffect } from 'eact';
import { gsap } from 'gsap';

const Loader = () => {
  const circleRef = useRef(null);

  useEffect(() => {
    gsap.fromTo(
      circleRef.current,
      { y: 0 },
      { y: 20, yoyo: true, repeat: -1 }
    );
  }, [circleRef]);

  return (
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" fill="#fff" ref={circleRef} />
      <circle cx="50" cy="50" r="30" fill="#fff" />
      <circle cx="50" cy="50" r="20" fill="#fff" />
    </svg>
  );
};

Fill-in Animations with GreenSock: Custom Logo

Next, we’ll tackle the more complex animation of a custom logo. We’ll use TimelineMax to create a sequential animation that draws the logo from the bottom up.

Sequential Animation with TimelineMax

We’ll import TimelineMax and create an instance of the TimelineMax class. Then, we’ll use the fromTo method to animate our rocket element. By targeting the stroke-dasharray and stroke-dashoffset attributes, we can create a drawing effect for our letter paths.

import { useRef, useEffect } from 'eact';
import { gsap, TimelineMax } from 'gsap';

const Logo = () => {
  const rocketRef = useRef(null);

  useEffect(() => {
    const tl = new TimelineMax();
    tl.fromTo(
      rocketRef.current,
      { strokeDasharray: 0 },
      { strokeDasharray: 100, duration: 2 }
    );
  }, [rocketRef]);

  return (
    <svg width="100" height="100">
      <path d="M10 10 L20 20" stroke="#fff" fill="none" ref={rocketRef} />
    </svg>
  );
};

Putting it All Together

With our animations complete, let’s take a step back and admire our handiwork. We’ve created two stunning animations using React Hooks and GreenSock. Whether you’re a seasoned developer or just starting out, we hope this article has inspired you to explore the world of web animations.