Webmasters Gallery

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.

Using it is Simple:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- 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']
           ]
       }
   }
});
</script>

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)

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.