The fastest TypeScript animation engine on the web
npm install --save shifty
Shifty is a highly-optimized TypeScript 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:
Promisesupport: Shifty's tweens are
await-able thenables. (Learn about the benefits of
await-based animations here).
This is the documentation for the latest version of Shifty. If you need documentation for a previous version of Shifty, please see:
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!
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.
Shifty's tiny footprint compares very favorably against other popular animation libraries:
This next example demonstrates how
awaited tweens interoperate well with standard TypeScript
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 TypeScript programming constructs, rather than a library API that may or may not integrate well with other libraries.
Generated using TypeDoc