It might seem like one of those unnecessary things, but it can help to bridge the gaps, adding that little something extra for the end-user’s experience. A smooth animation allows a user to fully understand the actions taking place by visually seeing components in transition. Here, I present to you my animation framework appropriately named FX. The motive here was to create a script with the mentality of keeping it simple, library independent, and lightweight. In the end all you get is a seamless transition in all browsers while maintaining complete control over the animation.

Features

FX is capable of performing a tween on almost all CSS properties including color and even scroll animations. Most importantly, FX is completely cross-browser, supporting all the major browsers including IE6+, FF, Opera, Safari, and Chrome.

The code has been designed with simplicity in mind to keep the framework fast and concise while leaving a small footprint. This mentality helps to maximize the efficiency and effectiveness of the processes by freeing up memory consumption where applicable and eliminating unnecessary computations. A global cache helps to avoid any duplicate processes and native methods are readily utilized where applicable. The results are a reliable implementation and a truly responsive animation.

How to Use?

The syntax is pretty straight forward, resembling that which you would find in YUI. To use it, simply instantiate the FX constructor providing either the id of the element you wish to animate or the element itself as the first argument. The second argument specifies the attributes of the animation, by defining the style and an ending value (“to”) and optionally a starting value (“from”) which otherwise defaults to the elements currently computed style:

var fx = new FX(el, {
    'font-size': {to: 14},
    'background-color': {from: 'FF0000', to: '0000FF'}
});

Additionally, you can optionally specify a duration (defaults to 0.7 seconds) as the third argument, the transition as the fourth argument, and finally a callback method and the context you wish to execute the callback in as the fifth and sixth parameters. Then just invoke the start method and watch it go.

var fx = new FX('element', {
    top: {to: 200},
    left: {to: 200},
    width: {from: 100, to: 200},
    height: {from: 100, to: 200}
}, 1.3, 'easeOut', callback, scope);
 
fx.start();

From there you can leverage even greater control over the animation by utilizing one of two utility methods. The stop method gives you the ability to stop and optionally finish an animation at any time while the isAnimating method will tell you if an element is currently in transition or not.

if(fx.isAnimating()){
    fx.stop(true);
}

That’s it! In just a couple of lines, you have the ability to animate any element any which way you want, plus the capability to control it.

CSS Multi-Unit Support

FX also supports multiple CSS units for all numeric styles such as width and height. By defining an optional “units” property for each attribute you can specify which unit to apply to that specific style:

var fx = new FX('box', {
    width: {to: 20, units: 'em'},
    height: {to: 60, units: '%'}
});

Any and all CSS units are supported, including; em, pt, %, ex, in, mm, cm, and more. If no unit is specified for the attribute, it defaults to px.

Transitions

FX includes support for a wide variety of transitional easing methods. Included in the library are your four basic transitions; linear, easeIn, easeOut, and easeInOut which is defined as an optional fourth parameter of the constructor, defaulting to easeInOut if not provided:

var fx = new FX('component', {
    opacity: {to: 1},
    left: {to: 300, units: 'ex'}
}, 1, 'easeIn');

In case that isn’t enough, you can also download the optional transitions pack, which adds an additional 30 transitions to the framework such as; quint, expo, circ, elastic, bounce, and many more!

FX.Node

Included with the library is a plugin providing greater control over animations for a single element. The FX.Node plugin provides an abstraction layer to a node that makes it simple to create and queue animations for a single element.

To use the plugin, instantiate the FX.Node constructor providing either the id of an element or the element itself. From there you can begin to use any one of six helper methods for performing different types of animations, and yes the class supports method chaining:

var node = new FX.Node('element');
node.highlight('#ffff9c').fadeOut().fadeIn().scale(400, 400).move(100, 100);

For greater control, each method also supports an optional argument that allows you to override all the defaults to customize an animation any way you want:

var node = new FX.Node('element');
node.fadeOut({
    queue: false,         
    duration: 1,
    transition: 'easeIn',
    callback: function(){
        alert('done!');    
    }
});

If none of the helper methods suit your needs, I’ve also included an animate method capable of queuing a custom animation:

var node = new FX.Node('element');
node.animate({
    duration: 2,
    attributes: {
        top: {to: 200},
        left: {to: 200},
        width: {from: 100, to: 200},
        height: {from: 100, to: 200}
    }
});

Just in case that isn’t enough, you can also create a delay in the queue by invoking the pause method and providing the number of seconds you wish the delay to last:

var node = new FX.Node('element');
node.fadeIn().pause(5).fadeOut();

Like the base framework, the plugin class also supports the same utility methods with a slight difference. The isAnimating method will tell you if an element is currently in transition or if the queue is not empty while the stop method will immediately stop any current animation and clear the queue.

Demo

The demo showcases all the features of the FX.Node plugin including the helper methods for easier transitions. Try clicking multiple buttons quickly to see an active example of the animation queue.

What’s Next?

You should expect some irregular updates to the base framework and the plugin in the future, whether it be optimizations or adding new methods. In addition to that, the next iteration of this project is likely to include support for native CSS transitions where they are supported. If you have any suggestions as to what you would like to see in upcoming versions, as always, I welcome your input and look forward to supporting this framework for a long time to come.

Download

View full documentation and download the source for this project on Github.