JavaScript Tween function

This is a function I wrote to use for creating advanced easing effects without using JQuery, MooTools or other JS libraries.

The function can be called as follows:

tween(element, property, from, to, duration, [optional] function)

Parameters

element: The id of the HTML element you want to animate

property: The CSS property that you want to animate

from: The initial value (like 0px, top, none, 0.5 )

to: The final value

duration: the animation duration

function (optional): the easing function to use, by default the tween function uses the linear tween, there are nine other functions included (easeInBack, easeOutBack, easeInOutBack, easeInCirc, easeOutCirc, easeInOutCirc, easeInBounce, easeOutBounce & easeInOutBounce)

Examples

Demos available here

Download

Function available here

If you enjoyed this post, make sure you subscribe to my RSS feed!

Leave a Reply