Shifty

npm install --save shifty

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

Speed : Shifty is optimized for smooth animation performance, even with many concurrent animations.

: Shifty is optimized for smooth animation performance, even with many concurrent animations. Flexibility and extensibility : Shifty provides numerous low-level APIs to let you hook into its animation pipeline.

: Shifty provides numerous low-level APIs to let you hook into its animation pipeline. Small footprint : The full build is less than 6Kb when minified and gzipped.

: The full build is less than 6Kb when minified and gzipped. Promise support: Shifty's tweens can be await ed. Learn about the benefits of async / await -based animations.

See the Pen Shifty async/await demo by Jeremy Kahn (@jeremyckahn) on CodePen.

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 lightweight alternative to richer tools like the excellent GreenSock Animation Platform.

Shifty powers Stylie and Mantra, a suite of graphical animation tools. It is also the tweening engine used by GDevelop and ProgessBar.js. Even Yelp has used it!

If you're looking for a high-performance Promise -based animation engine with low overhead and a permissive license (MIT), Shifty might be the right choice for you!

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.

Demos

Sequencing

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

await ed tweens

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

This next example demonstrates how await ed tweens interoperate well with standard JavaScript try / catch blocks, as well as infinite while loops. Typically you'd want to avoid intentionally infinite loops, but it's common to need animations to loop indefinitely. A while (true) loop is a simple way to achieve this. The ball in this demo pulsates repeatedly, but the animation loop is gracefully interrupted when the user clicks anywhere else within the demo. Response to the user's input is handled in catch blocks, wherein the ball swings over to where the user clicked. From there it continues to pulsate. With await ed tweens, you can have full control over the lifecycle of an animation with standard JavaScript programming constructs, rather than a library API that may or may not integrate well with other libraries.

See the Pen async/await try/catch 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.