Fall 2016: New Animation Tools With and Without JavaScript

September 23rd, 2016

The two animation tools that I would like to introduce you to today are not of the run-of-the-mill kind. They are not animation generalists, but rather specialists for small application areas. The JavaScript Granim.js allows you to create animations with color gradients, while Radiobox.css is all about the looks of your radio buttons.

Granim.js: Simple Gradient Animations With a Large Impact

Granim.js is a fresh JavaScript penned by the Parisian developer Benjamin Blonde. This tiny script lets you animate gradients in, on, and around anything that can be displayed in a canvas element.

Granim.js Animates Color Gradients in Many Different Ways. (Screenshot: Dr. Web)

Granim.js Animates Color Gradients in Many Different Ways. (Screenshot: Dr. Web)

Using it is Simple:

<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>
<!-- Call the script -->
<script src="granim.min.js"></script>
<!-- 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']

As the JavaScript only weighs a meager 10kb, the overhead can be neglected. This also justifies the application in the smallest possible way, like animating a page logo with a color gradient, as it can be seen on the project’s demo page. Pay attention to the Granim.js logo in the top left.

This example also shows you that the JavaScript can not only create simple gradients but is also capable of working with image masks. Launching gradients works via click or event, which is shown in a very impressive way on this page. Just move the mouse over the ghost buttons and you’ll surely get to like Granim.js very quickly.

The script is available for free download on Github. It is equipped with the very liberal MIT license, so you also get to use it in commercial projects, like customer websites.

Radiobox.css: Animated Option Choice

720kb has created a small collection of CSS animations that are supposed to free radio buttons of all the boredom. There are 12 variants available in total. The effect is triggered when the respective radio button is clicked. Depending on the effect, the button will then start bouncing, rotating, growing, and so on.

Radiobox.css is a Collection of 12 Small Stylesheets for Radio Button Application. (Screenshot: Dr. Web)

Radiobox.css is a Collection of 12 Small Stylesheets for Radio Button Application. (Screenshot: Dr. Web)

Just try it. Radiobox.css provides interesting effects for one of these buttons that get ignored design-wise most of the time. Radiobox.css works with CSS3 and requires a modern browser to function.

Getting it to work is very easy. Just assign the class to your radio button that represents the desired effect, for example:

<input type="radio" class="radiobox-boing"/>

Radiobox.css comes, like the previously presented Granim.js, under the MIT license, and can thus be used commercially as well. Download it via Github.

Ioanni Mitsakis is front-end developer at a major European automotive supplier and responsible for the look & feel of their internal cloud-based apps. As his employer works internationally with distributed teams world-wide, a rock-solid development foundation is what Ioanni aims for. He better should ;-)

Leave a Reply

2 Comments on "Fall 2016: New Animation Tools With and Without JavaScript"

Notify of

Sort by:   newest | oldest | most voted
29 days 22 hours ago

Very cool, but it appears to have very thick lines moving across the gradient when animated hmm

14 days 8 hours ago

Interesting tool. Thanks for samples and description, worth to try.