Shifty logo

Fork me on GitHub

Shifty is a JavaScript tweening engine designed to fit all of your animation needs. Core features include:

Shifty is a low-level animation solution. This means that it does not perform any rendering, but it can be integrated into whatever rendering mechanism is most appropriate for your project. Shifty is meant to be a simpler, more lightweight and flexible alternative to richer tools like the excellent Greensock animation platform.

Shifty is the heart of Rekapi, a higher-level library for making keyframe animations.

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:

See the Pen Super simple Shifty sample by Jeremy Kahn (@jeremyckahn) on CodePen.

This snippet tweens and prints the x variable from 0 to 10 over one second, and then prints the final value. You can animate as many properties in a single tween 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 DOM elements. 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 distribution.

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 via the Github issue tracker.

More examples

Bouncing blocks

See the Pen Shifty Attachment Demo by Jeremy Kahn (@jeremyckahn) on CodePen.

A helix!

See the Pen Shifty Helix Demo by Jeremy Kahn (@jeremyckahn) on CodePen.

Tweening a number and printing it

See the Pen Tweening a number and printing it by Jeremy Kahn (@jeremyckahn) on CodePen.

Tweening with a custom easing formula

See the Pen Tweening with a custom easing formula by Jeremy Kahn (@jeremyckahn) on CodePen.

Shifting a color

See the Pen Shifting a color by Jeremy Kahn (@jeremyckahn) on CodePen.

Tweening the value of an Object

See the Pen Tweening the value of an Object by Jeremy Kahn (@jeremyckahn) on CodePen.

Tweening numbers within a string

See the Pen Tweening numbers within a string by Jeremy Kahn (@jeremyckahn) on CodePen.