Shifty logo

Fork me on GitHub

Shifty is a JavaScript tweening engine designed to fit any number of tweening needs. Its features include:

Shifty is an excellent animation solution for scenarios in which jQuery's animate() function is either unavailable or insufficient. It's particularly effective for creating <canvas> animations.

Another use for Shifty is computing single, specific frames of a tween, as it is used to do in Rekapi and Joe Lambert's Morf library. Using Shifty in this way would also be very useful in a non-browser environment such as Node.js.

If used without an AMD or CommonJS script loader, Shifty exposes only one object globally: Tweenable. To create a basic tween, you could have something like this:

        var tweenable = new Tweenable();

        tweenable.tween({
          from:     { 'x': 0  },
          to:       { 'x': 10 },
          duration: 1000,
          finish: function (state) {
            alert('Hooray, all done!  Final value: ' + state.x);
          }
        });

This snippet tweens the x variable from 0 to 10 over one second, and then alerts the final value. You can tween as many properties at once as you'd like.

Shifty also allows you to define filters to transform tweened values (for example, to support data types more complex than JavaScript numbers. The standard distribution of Shifty provides support for CSS strings and is capable of animating the DOM. All of this functionality is described in detail in the API documentation and project README.

A collection of Robert Penner's easing functions have been adapted for use with Shifty and are included in the standard download.

Please fork, use and contribute to Shifty! It is distributed under the MIT License, and experimentation is encouraged. If you find a bug or have a question about Shifty, please submit it the the Github issue tracker.

Here's another example of Shifty in use: