Create Interactive Gradient Animations Using Granim.js

Create Interactive Gradient Animations Using Granim.js

Gradients can instantly improve the look and feel of a website, if used carefully with the right color combination. CSS has also come a long way when it comes to applying a gradient on any element and animating it. In this tutorial, we will move away from CSS and create gradient animations using a JavaScript library called Granim.js.

This library draws and animates gradients on a given canvas according to the parameters you set when creating a Granim instance. There are different methods which can be used to make your gradient respond to different user events like a button click. In this tutorial, we will learn about this library in detail and create some simple but nice gradient animation effects.

Create Solid Color Gradient Animations

Before we begin creating any gradient, you will have to include the library in your project. For this, you can either download Granim.js from GitHub or link directly to a CDN. The library version that I am using in this tutorial is 1.1. Some methods that we will discuss here were only added in version 1.1, so using an older library version when following this tutorial will not always give the expected result. Keeping these points in mind, let's create our first gradient using Granim.js.

Every time you create a new Granim instance, you can pass it an object of key-value pairs, where the key is the name of a particular property and the value is the value of the property. The element property is used to specify the CSS selector or DOM node which will point to the canvas on which you want to apply a particular gradient.

When you create a gradient animation where the colors change from a relatively light value to a darker value, it might become impossible to read some text that you have positioned on the canvas. For example, the initial gradient applied on an element might be a combination of yellow and light green. In such cases, the text of the canvas would have to be darker for users to be able to read it properly. 

Similarly, the gradient might consist of dark red and black at some other point, and in such cases the dark text would not be easy to read. Granim.js solves this problem for you by allowing you to specify a container element on which you can add the dark and light classes to style the text or other elements accordingly. The value of the elToSetClassOn property is set to body by default, but you can also specify any other container element. The dark and light class names are updated automatically based on the average color of the gradient.

The elToSetClassOn property does not work by itself. You will also have to specify a name for the Granim instance that you created using the name property. If you set the name to something like first-gradient, the name of the classes applied on the container element will become first-gradient-light or first-gradient-dark based on how light or dark the gradient currently is. This way, any element which needs to change its color based on the lightness or darkness of the gradient will be able to do so with ease.

The direction in which a gradient should be drawn can be specified using the direction property. It has four valid values: diagonal, left-right, top-bottom, and radial. The gradients that you create will not move in those particular directions—they will just be drawn that way. The position of the gradient doesn't change during the animation; only its colors do.

There is also a states property, which accepts an object as its value. Each state specified inside the states object will have a name and a set of key-value pairs. You can use the gradients property to specify different colors which should make up a particular gradient. You can set the value of this property to be equal to an array of gradients. 

Granim.js will automatically create an animation where the colors of the gradient change from one set to another. The transition between different gradients takes 5,000 milliseconds by default. However, you can speed up or slow down the animation by setting an appropriate value for the transitionSpeed property.

After the gradients start animating, they will have to come to an end at one point or another. You can specify if the gradient should then just stop there or start animating again from the beginning using the loop property. This is set to true by default, which means that the gradient would keep animating.

Each color in a gradient can have a different opacity, which can be specified using the opacity property. This property accepts an array to determine how opaque each color is going to be. For two gradient colors, the value can be [0.1, 0.8]. For three gradient colors, the value can be [1, 0.5, 0.75], etc.

You also have the option to specify the time it takes for the gradient animation to go from one state to another using the stateTransitionSpeed. This is different from the transitionSpeed property, which controls the animation speed inside the same state.

In the following code snippet, I have created two different Granim instances to draw different gradients. In the first case, we have only specified a single gradient, so there is not any actual animation and the colors don't change at all.

var firstGranim = new Granim({
  element: "#first",
  name: "first-gradient",
  direction: "diagonal",
  opacity: [1, 1],
  states: {
    "default-state": {
      gradients: [["#8BC34A", "#FF9800"]]
    }
  }
});

var secondGranim = new Granim({
  element: "#second",
  name: "second-gradient",
  elToSetClassOn: ".wrapper",
  direction: "top-bottom",
  opacity: [1, 1],
  states: {
    "default-state": {
      gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    }
  }
});

Animate Gradients Over an Image

Another common use of the Granim.js library would be to animate a gradient over an image drawn on the canvas. You can specify different properties to control how the image is drawn on the canvas using the image property. It accepts an object with key-value pairs as its value. You can use the source property to specify the path from which the library should get the image to draw it on the canvas.

Any image that you draw on the canvas will be drawn so that its center coincides with the center of the canvas. However, you can use the position property to specify a different position to draw the image. This property accepts an array of two elements as its value. The first element can have the values left, center, and right. The second element can have the values top, center, and bottom. 

These properties are generally useful when you know that the size of the canvas and the image won't match. In these situations, you can use this property to specify the part of the image that should appear on the canvas.

If the images and the canvas have different dimensions, you can also stretch the image so that it fits properly inside the canvas. The stretchMode property also accepts an array of two elements as its value. Three valid values for both these elements are stretch, stretch-if-smaller, and stretch-if-larger.

A gradient with blend mode set to normal will completely hide the image underneath it. The only way to show an image below a gradient of solid colors would be to choose a different blend mode. You can read about all the possible blend mode values for a canvas on MDN.

I would like to point out that the ability to animate a gradient over an image was only added in version 1.1 of the Granim.js library. So you will have to use any version higher than that if you want this feature to work properly.

var firstGranim = new Granim({
  element: "#first",
  name: "first-gradient",
  direction: "diagonal",
  opacity: [1, 1],
  image: {
    source: "path/to/rose_image.jpg",
    position: ["center", "center"],
    blendingMode: "lighten"
  },
  states: {
    "default-state": {
      gradients: [["#8BC34A", "#FF9800"], ["#FF0000", "#000000"]]
    }
  }
});

var secondGranim = new Granim({
  element: "#second",
  name: "second-gradient",
  elToSetClassOn: ".wrapper",
  direction: "top-bottom",
  opacity: [1, 1],
  image: {
    source: "path/to/landscape.jpg",
    stretchMode: ["stretch", "stretch"],
    blendingMode: "overlay"
  },
  states: {
    "default-state": {
      gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    }
  }
});

Methods to Control Gradient Animation Playback

Up to this point, we did not have any control over the playback of the gradient animation once it was instantiated. We could not pause/play it or change its state, direction, etc. The Granim.js library has different methods which let you accomplish all these tasks with ease.

You can play or pause any animation using the play() and pause() methods. Similarly, you can change the state of the gradient animation using the changeState('state-name') method. The state-name here has to be one of the state names that you defined when instantiating the Granim instance.

More methods were added in version 1.1 which allow you to change the direction and blend mode of an animation on the fly using the changeDirection('direction-name') and changeBlendingMode('blending-mode-name') methods.

In the following code snippet, I am using a button click event to call all these methods, but you can use any other event to call them.

var firstGranim = new Granim({
  element: "#first",
  name: "first-gradient",
  elToSetClassOn: ".wrapper",
  direction: "top-bottom",
  opacity: [1, 1],
  isPausedWhenNotInView: true,
  image : {
        source: 'path/to/landscape.jpg',
        stretchMode: ["stretch", "stretch"],
        blendingMode: 'overlay'
  },
  states: {
    "default-state": {
      gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    },
    "green-state": {
      gradients: [["#4CAF50", "#CDDC39"], ["#FFEB3B", "#8BC34A"]],
      transitionSpeed: 2000
    },
    "red-state": {
      gradients: [["#E91E63", "#FF5722"], ["#F44336", "#FF9800"]],
      transitionSpeed: 2000
    }
  }
});

$(".play").on("click", function(){
  firstGranim.play();
});

$(".pause").on("click", function(){
  firstGranim.pause();
});

$(".diagonal").on("click", function(){
  firstGranim.changeDirection('diagonal');
});

$(".radial").on("click", function(){
  firstGranim.changeDirection('radial');
});

$(".red-state").on("click", function(){
  firstGranim.changeState('red-state');
});

$(".green-state").on("click", function(){
  firstGranim.changeState('green-state');
});

$(".color-dodge").on("click", function(){
  firstGranim.changeBlendingMode('color-dodge');
});

$(".color-burn").on("click", function(){
  firstGranim.changeBlendingMode('color-burn');
});

$(".lighten").on("click", function(){
  firstGranim.changeBlendingMode('lighten');
});

$(".darken").on("click", function(){
  firstGranim.changeBlendingMode('darken');
});

Final Thoughts

In this tutorial, I have covered the basics of the Granim.js library so that you can get started with it as quickly as possible. There are a few other methods and properties that you might find useful when creating these gradient animations. You should read the official documentation in order to read about them all.

If you’re looking for additional JavaScript resources to study or to use in your work, check out what we have available in the Envato Market.

If you have any questions related to this tutorial, feel free to let me know in the comments.