In web design, some features are made only for the sake of beauty while others are made for functional purpose. Gradient transitions are one of designs that made solely for show but they are quite popular and entertaining.
Now you can build gradient transitions with Granim.js. The result will look smooth and mesh nicely in any website. In fact, Granim may be the only JS library that managing gradient transitions and offer the perfect solution. Besides, it’s built on Vanilla JavaScript, so it can run alongside jQuery or any other JS library.
To get started with granim.js, you can drop the file into your page. You can also download a copy from GitHub or host one from a live CDN.
Here’s a basic code sample from the GitHub repo:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!– Create a canvas element –> <canvas id=”granim-canvas”></canvas> <!– Create a Granim instance –> <script> var granimInstance = new Granim({ element: ‘#granim-canvas’, name: ‘granim’, opacity: [1, 1], states : { “default-state”: { gradients: [ [‘#834D9B’, ‘#D04ED6’], [‘#1CD8D2’, ‘#93EDC7’] ] } } }); </script> |
It may look simple, but things can get more complicated than this. That’s why; you need to learn more on some examples. Then, find code snippets under each example to create gradient transitions for image backgrounds and even image masks.
The image masks can be used for a logo, for instance a PNG image, which gets hidden behind a gradient. Gradient will slowly transitions throughout the text which is as a result create a JS-animated logo.
The example above takes a lot of JS/CSS code, so basically it’s not a simple implementation. But, you’ll find it is easier to be setup and customized after several practices. In fact, it’s the absolute best solution for any project as it is the only true gradient transition library online.
If you have any issues, you can check the issues tab, since the library is still updated semi-frequently. It’s only a pretty small library where there are no many things that need updating. This is also the strong reason why Granim.js can be a reliable solution for any site small or large.