How to Create Gradient Animation in React?

Published by Pawan Sargar on

How to Create Gradient Animation in React?

Having a gradient effect in the background can really enhance your website’s or app’s look and feel. But, creating it manually can be a bit of a pain, though you don’t have to worry, today you’ll learn how to create beautiful Gradient Animation in Reactjs.

We’ll use a JavaScript library called GranimJS, which will help us to create beautiful gradient animation in less than 10 lines of code. But, how we’ll use it in React? Well, GranimJS is also available as an NPM package, just go ahead and install it.

Though feel free to read GranimJs official documentation, it’s always beneficial to read, right?

Ok, so this is what we’ll create,

So, let’s get started.

Note:- Scroll to the end to get complete source code.

Set up your Local React Environment –

npx create-react-app gradient-animation

#or

yarn create react-app gradient-animation

#then
cd gradient-animation

#then
npm start

#or

yarn start

Till here, I assume your React app might be running successfully. So, before installing the package, let’s clear out some clutter.

Make sure the below is what your folder structure should look like.

How to create gradient animation using Reactjs

Also, make sure to remove all the logo and CSS imports from the Index and App file.

Ok, now we are good to go.

Also check out,
React on Scroll Animation Tutorial

Installing and Setting up GranimJS –

npm install granim

#or

yarn add granim

Open your terminal, and then enter the above command to install the package. Now, let’s set up the package.

import { useEffect } from "react";
import Granim from "granim";

import "./styles.css";

export default function App() {
//code goes here
  return (
    <div className="App">
      <div className="bloc-logo">
        <canvas id="logo-canvas"></canvas>
        <div className="logo-mask"></div>
      </div>
    </div>
  );
}

Here, we are just importing the granim package and useEffect hook which I’ll explain later. I’ve set up a div with class blog-logo as a container and it contains the empty canvas and a div that will contain the image.

Now, let’s initialize the GranimJS,

Initialize GranimJS –

useEffect(() => {
    new Granim({
      element: "#logo-canvas",
      direction: "left-right",
      opacity: [1, 1],
      states: {
        "default-state": {
          gradients: [
            ["#ee9ce7", "#0f9b0f"],
            ["#ffdde1", "#ff9a9e"],
            ["#ff7b59", "#ff4d00"],
            ["#ff4d00", "#ff7b59"],
            ["#ffdde1", "#ff9a9e"]
          ],
          transitionSpeed: 2000
        }
      }
    });
  }, []);

Granim is a class object, we’ll create a new Granim({ }) object and mention all the required options or settings.

As you can see, very first we are selecting the element by ID, here we are using #logo-canvas which is the canvas element.

The direction key defines how we want to the animation flow, here it’s left-right, means left to right.

The opacity key can be used to define the transparency level, here don’t want to make it transparent so we’ll keep [1, 1].

The states contain all gradients we’ll use. As you can see, we have a nested gradient key with multiple arrays as the gradient values. You can add as much as you want.

Finally, we can set the transitionSpeed, you can set it as per your choice, here we have set to 2 seconds.

The reason we are using use effect hook, is just so that we need to make sure that the animation continues even after every time the app refreshes.

Let’s add some styles to make it look good.

.App {
  font-family: sans-serif;
  text-align: center;
}
* {
  margin: 0;
  padding: 0;
}
.bloc-logo {
  position: relative;
  width: 100%;
  height: 100vh;
}
.bloc-logo canvas {
  width: 100%;
  height: 100vh;
}
.logo-mask {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  background-size: contain;
  background-image: url("/image.png");
}

That’s it, that’s how simple it is to create a beautiful gradient animation using React.

Get complete source code at Sandbox.

I hope this post was helpful, let us know in the comments if it was helpful. Till then, follow our Coding Master newsletter to never miss any updates.

Pawan Sargar
Follow him
Spread the love
```html ```

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published.