Shifty

The fastest JavaScript animation engine on the web

npm install --save shifty

Current Shifty version Shifty license Downloads per week GitHub stars Repo dependents

Source code

Shifty is a highly-optimized JavaScript tweening engine designed to fit all of your animation needs. It is a low-level animation library focused on optimal performance and flexibility that can easily be built upon and extended. Shifty's key benefits are:

Load from CDN

Variant URL Size Description
Full https://unpkg.com/shifty Shifty full bundle size Contains full library
Core https://unpkg.com/shifty/dist/shifty.core.js Shifty core bundle size Contains shifty.Tweenable, shifty.tween, and shifty.Tweenable.formulas

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

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!

Please use, fork, 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.

Shifty is a labor of love that will always be free and open source. If you've gotten value out of Shifty, please consider supporting the developer with a small donation!

Comparison with other animation libraries

Shifty is meant to be a lightweight alternative to rich tools like the excellent GreenSock Animation Platform. It is intentionally minimalistic so that you can easily embed it into your projects. This works well with its MIT license, as you can redistribute it worry-free without bloating your app or concerning yourself with royalties or licensing restrictions.

Expand to see how Shifty compares to GreenSock's performance

See the Pen GSAP vs Shifty by Jeremy Kahn (@jeremyckahn) on CodePen.

Shifty's tiny footprint compares very favorably against other popular animation libraries:

Library Size
Shifty (full) Shifty full bundle size
Shifty (core) Shifty core bundle size
GreenSock GreenSock bundle size
AnimeJS AnimeJS bundle size
@mojs/core @core/mojs bundle size
Velocity Velocity bundle size
Popmotion Popmotion bundle size

Examples

Sequencing

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

awaited tweens

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

This next example demonstrates how awaited 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 awaited 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.