PDA

View Full Version : A lightweight animation function



Wolfy87
02-18-2011, 10:14 PM
Hey, I wrote a fairly nice animation function that I think you might like.
Here is it's GitHub repository (https://github.com/Wolfy87/SparkAn).

It was originally written for my library, Spark (http://sparkjs.co.uk/), but it is a stand alone function so use it as you wish.

It's structure is as follows.


SparkAn(element, properties, timeframe, easing, callback);

Here is an example animation.


SparkAn(document.getElementById('target'), {
width: 100,
height: '50%',
opacity: .5
}, 500, 'inBounce', function() {
alert('Done!');
});

Providing false for the timeframe or easing will result in it defaulting to 800ms timeframe and outQuint easing.

The properties either take the JavaScript camel notation reference such as borderLeftWidth or a string as a CSS version for example 'border-left-width'.

The properties can be set to an integer which is actually measured in pixels or you can pass a string with a measurement such as '10%' and it will be respected as a percentage.

For more information, check out the documentation of my libraries implementation of this function. It is exactly the same in principal. Spark animation function documentation (http://sparkjs.co.uk/documentation/animate).

It is 7.7kb when uncompressed, thats with lots of comments and whitespace so the compressed version would be tiny.

Enjoy and let me know what you think!