Animations using React Hooks and GreenSock

Delving into the world of animations on the web can either be a great journey or a tiresome one. My goal is to make it a great journey, while also using the power of React Hooks to further entice your learning experience.

What do I need to know?

This article should not be treated as a primer on JavaScript or React. I will explain each of the concepts we use, but you should have at least a little knowledge of both. You can check out the React docs here.

What will we be creating?

I like to teach by example. Just throwing lots of concepts and text at you isn’t going to do any good for your learning, and to be honest, it would be very boring for the both of us. We are going to create two separate animations, each with an increasing level of difficulty.

Our first animation will be a simple loader, similar to Google’s:

Our second will be animating the LogRocket logo to make it even better!

Getting set up

Setting up is quick and easy: I have created a CodeSandbox here that has the GreenSock npm module and also has React, so you can just fork it and follow along.

Google-style loader

Now we can start creating our Loader component. It would be great if you could follow along, but I will have a link to the complete CodeSandbox at the end.

The first thing we need for our loader is our graphic, which I have created. The SVG is a basic one with a little markup.

<svg viewBox="0 0 150 33.2" width="180" height="150">
  <circle ref={circle} cx="16.1" cy="16.6" r="16.1" fill="#527abd" />
  <circle ref={circle} cx="55.2" cy="16.6" r="16.1" fill="#de4431" />
  <circle ref={circle} cx="94.3" cy="16.6" r="16.1" fill="#f4b61a" />
  <circle ref={circle} cx="133.4" cy="16.6" r="16.1" fill="#009e52" />
</svg>

Then, in our source code, we can create a Loader component, which is where the magic will happen.

Inside the Loader component, we want to render our graphic.

// src/loader.jsx
import React from "react";
const Loader = () => {
  return (
    <svg viewBox="0 0 150 33.2" width="180" height="150">
      <circle cx="16.1" cy="16.6" r="16.1" fill="#527abd" />
      <circle cx="55.2" cy="16.6" r="16.1" fill="#de4431" />
      <circle cx="94.3" cy="16.6" r="16.1" fill="#f4b61a" />
      <circle cx="133.4" cy="16.6" r="16.1" fill="#009e52" />
    </svg>
  );
};
export default Loader;

You should now be seeing:

Fantastic! We now have our graphic in place, so let’s go animate it.

When animating, the first thing you need is a reference to the elements you plan on animating. To get a reference to our elements, we can use the useRef Hook. useRef returns a ref object that has a current property, which is what we target with our animations.

Creating a useRef is straightforward:

const myElement = useRef(null) 

So, for our case, we have four elements that we need to target. We will create four refs like so:

const blue = useRef(null);
const red = useRef(null);
const yellow = useRef(null);
const green = useRef(null);

We then can add these refs to our SVG:

<svg viewBox="0 0 150 33.2" width="180" height="150">
  <circle ref={blue} cx="16.1" cy="16.6" r="16.1" fill="#527abd" />
  <circle ref={red} cx="55.2" cy="16.6" r="16.1" fill="#de4431" />
  <circle ref={yellow} cx="94.3" cy="16.6" r="16.1" fill="#f4b61a" />
  <circle ref={green} cx="133.4" cy="16.6" r="16.1" fill="#009e52" />
</svg>

Our component now looks like this:

// src/loader.jsx
import React, { useRef } from "react";

const Loader = () => {
  const blue = useRef(null);
  const red = useRef(null);
  const yellow = useRef(null);
  const green = useRef(null);

  return (
    <svg viewBox="0 0 150 33.2" width="180" height="150">
      <circle ref={blue} cx="16.1" cy="16.6" r="16.1" fill="#527abd" />
      <circle ref={red} cx="55.2" cy="16.6" r="16.1" fill="#de4431" />
      <circle ref={yellow} cx="94.3" cy="16.6" r="16.1" fill="#f4b61a" />
      <circle ref={green} cx="133.4" cy="16.6" r="16.1" fill="#009e52" />
    </svg>
  );
};

export default Loader;

With everything in place, we can start using GreenSock.

First we import TweenMax.

import { TweenMax } from "gsap";

TweenMax is a fully featured module we use from GreenSock that will aid us in creating our animations. It has many methods, and we will make use of a couple!

GreenSock also offers us TweenLite, which is a less featured module but is more lightweight.

For our animation, we want it to take place when our component mounts. In the traditional class-based component, we would use componentDidMount, but for Hooks we will use useEffect, which behaves the same with some small differences. To get a true deep dive into Hooks, you should check out this great article by Dan Abramov.

So when our component mounts, we will use TweenMax’s fromTo method to animate our circles. The fromTo method is passed four arguments:

fromTo(element(s), duration, start, end)

Let’s focus on getting the blue circle to move up and down. To do this we will target the y property of our animation.

So our code is as follows:

TweenMax.fromTo(blue.current, 5, { y: 18 }, { y: -18 });

We first target our element, then we set a duration of 5s. We start from y position 18 and finish on -18. This looks like the following:

OK, so we have made a little progress, but it still has some issues — it is far too slow, and we also need the animation to be infinite. Let’s address these problems. To do so, all we need to do is add the yoyo and repeat properties to our to object.

TweenMax.fromTo(blue.current, 0.5, { y: 18 }, { y: -18, yoyo: true, repeat: -1 });

yoyo means our animation will yoyo between the start and finish positions. Setting repeat to -1 will make our animation infinite. We also set our duration to half a second so it will be much faster.

Now, with our new properties in place, we have:

As you can see from the completed animation above, our yellow circle behaves the same as our blue circle. With this in mind, we can pass an array of elements (our blue and yellow ref) to our fromTo method.

TweenMax.fromTo(
  [blue.current, yellow.current],
  0.5,
  { y: 18 },
  { y: -18, yoyo: true, repeat: -1 }
);

So now we have:

Success! I think you can now start seeing how powerful GreenSock is. To complete our animation, we just need to animate the red and green balls in the opposite way, like so:

TweenMax.fromTo(
  [red.current, green.current],
  0.5,
  { y: -18 },
  { y: 18, repeat: -1, yoyo: true }
);

This code is almost the exact same as our code above except this time, we start on y:-18 and finish on y:18.

Our final animation is now complete, and here’s how it should look:

The complete code is below.

LogRocket logo animation

One animation down, one to go!

I have created an SVG for the LogRocket icon, and it is a big one, so I have included it in the starter CodeSandbox, which you can check out here.

The final animation will look like this:

As you can see from above, there is more to this than our first animation, so let’s get cracking!

The first part we are going to focus on is the rocket, which animates from the bottom. We have a g element with the id of rocket. This is the element we are going to target with GreenSock. Previously, we would have used TweenMax to do this, but now we will use TimelineMax since we want each of our elements to animate sequentially and not all at once.

We import TimelineMax like so:

import { TimelineMax } from "gsap";

We first need to create a Timeline, and we do this by creating an instance of the TimelineMax class:

const tl = new TimelineMax();

Similarly to TweenMax, our instance (tl) also has a fromTo method that we will use:

tl.fromTo("#rocket", 2, { y: 50 }, { y: 0 });

This is very similar to our first animation except here, instead of using a ref, we are just passing the id — either way is fine.

Now our rocket should be coming up from the bottom like so:

The next part is to draw our letters. All of our letter paths are wrapped in a g tag with the id letters, so they are easy for us to target. To get the drawing effect, we need to use a couple of attributes, which are stroke-dasharray and stroke-dashoffset. These are quite complicated, and to read in more detail, I recommend heading here.

For our case, we use these properties to break our paths into little pieces so we can animate them back together, which is what gives us our drawing effect. My rule of thumb here is setting the value of the two attributes to be the same, and once our text disappears, we are good to go. 100 is the value we will go with.

So in our styles.css file, we will set these two properties on our paths like so:

svg #letters path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

As a side note, a stroke must be present on the path for this to work (this includes a path inheriting a stroke from a parent).

So now you are seeing the following:

This is the same as what we had, but the letters are not as thick — that is because we have removed the stroke, but it still has a fill. The next step is setting the fill-opacity to 0.

svg #letters path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  fill-opacity: 0;
}

With this in place, our letters have disappeared, so now we focus on getting them back.

All we need to do is animate our strokeDashoffset back to 0. We will use our tl instance and the to method.

tl.to("#letters path", 3, {
  strokeDashoffset: 0
});

As you can see, we use our letters selector and then target each path within that group. With that in place, our letters should now start drawing:

The final piece of the puzzle is to animate our fill-opacity to 1. Once more, we use our tl instance and the to method.

tl.to("#letters path", 3, { "fill-opacity": 1 });

And that’s that! Our LogRocket animation is now complete — not too bad, eh?

You can see the power of TimelineMax here. Normally, to run animations sequentially, you would have to use delays, but TimelineMax takes care of this for us.

The complete CodeSandbox can be found below.

Conclusion

So that’s all, folks. This was definitely more of an introduction to GreenSock than it was to React Hooks, but I hope you learned something about both. The guys at GreenSock have put in a massive amount of work for their library, so be sure to go even further with it to create great animations.

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, tracking slow network requests and component load time, try LogRocket. https://logrocket.com/signup/

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors performance of your app with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps - Start monitoring for free.