Shifty

npm install --save shifty

DownloadSource

Shifty is a JavaScript tweening engine designed to fit all of your animation needs. Shifty's key benefits include:

  • Speed: Shifty is optimized for performance and offers animation fidelity that is comparable to GSAP.
  • Flexibility and extensibility: Shifty provides numerous low-level APIs to let you hook into its animation pipeline.
  • Small footprint: The full build is less than 5Kb when minified and gzipped.

Shifty is a low-level animation solution. 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 alternative to richer tools like the excellent GreenSock Animation Platform. This can be critical for a project, especially ones that need to run well on mobile devices — just ask Yelp!

If your project requires extensive animation APIs and a robust plugin ecosystem, Greensock is an excellent choice. If you prefer less overhead and a more permissive license (MIT), Shifty might be the animation engine for you!

Shifty is the heart of Rekapi, a higher-level library for making keyframe animations. Shifty is also a low-level part of Stylie and Mantra, a suite of graphical animation tools.

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.

Getting started with Shifty

Take a look at the Getting Started guide to hit the ground running. The most important class in Shifty is Tweenable, but you may also find Scene handy for controlling groups of tweens.


To create a basic tween, you could have something like this:

See the Pen Shifty 2 playground 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.

Performance comparison

See the Pen Shifty/GSAP/jQuery animation performance comparison by Jeremy Kahn (@jeremyckahn) on CodePen.

Examples

Chained tweens

See the Pen Primise-chained tweens by Jeremy Kahn (@jeremyckahn) on CodePen.

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 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 numbers within an arbitrary string

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