JavaScript Easing Library – Simple Tween JS

One of the major components missing from my open source game engine has been a lightweight JavaScript easing library. If you aren’t familiar with easing, its used to create unique animation movement that feels lifelike and less robotic. There are general use libraries such as jQuery and completely dedicated JavaScript easing libraries that have the words Tweening in the title. While these tools are great, I found them to be too robust, slow, or undocumented. Because of this I’ve created a new lightweight open source library called Simple Tween JS.

Image may be NSFW.
Clik here to view.

Simple Tween JS is a lightweight open source JavaScript easing library at less than 200 lines of code. Complete documentation and the latest version can be found at the GitHub repo.

View Demo – Warning, haven’t fixed a DOM bug in IE9. Library has been tested and works fine in IE8 and up though.

Download on GitHub

Simple to use JavaScript Easing Library

Simple Tween JS is a loop friendly easing library, meaning its optimized for animation with HTML5′s Canvas API or SVG. It supports the ability to create, reset, tweak, and loop tweens on the fly. While that might not seem like a lot of features, most JavaScript easing libraries take a serious performance impact from packing in too many features. It also uses the latest JavaScript programming techniques to prevent slow performance from supporting IE7 and below.

The file size is only 2.83kb when minified and it stands at less than 200 lines of code. It can be instantly integrated with existing projects and you can use it right away as so.

// Create a new re-usable tween
// Parameters: startValue, distance, duration, animationType, loop
var myTween = new Tween(0, 20, 3000, 'quadIn', 'loop');

// Get the value of the tween relative to the current time
myTween.getValue();

Complete documentation and additional methods can be found in the GitHub’s README.md file.

Extending functionality

Since the library is written with simple prototypical inheritance, you can easily extend it with a little object oriented programming. For example, you can easily add in the ability to change the current tween’s animation type as so.

Tween.prototype.setAnimation = function (myAnimation) {
    this.animationType = myAnimation;
};

Currently Simple Tween JS is being used on multiple projects, so optimizations and updates will come regularly. If you have any suggestions, feature requests, or find any bugs please let me know in the comments below.