Ioanni Mitsakis September 23rd, 2016

Fall 2016: New Animation Tools With and Without JavaScript

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. [caption id="attachment_77992" align="alignnone" width="640"]Granim.js Animates Color Gradients in Many Different Ways. (Screenshot: Dr. Web) Granim.js Animates Color Gradients in Many Different Ways. (Screenshot: Dr. Web)[/caption] Using it is Simple:

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. [caption id="attachment_77991" align="alignnone" width="640"]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)[/caption] 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

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 ;-)


  1. Interesting article. This easy to use Granim is as cool as it can be. Limitations are there but useful to build quick animated logos or GIF type things. For my application I have tried it in place of after effects which I am usually comfortable with.

    Thanks for giving another alternative for CSS based tool.

  2. Great share, I really enjoyed the examples for the gradient. No issues on my end when I tested. Although I personally have less of a use for radio buttons, still a very cool example of java-less animation. Thank you for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *