Shifty

The fastest JavaScript animation engine on the web

Animation
jeremyckahn/shiftyjeremyckahn.github.io/shifty/doc/shifty

README

Shifty - The fastest JavaScript animation engine on the web


Current Shifty version

- master: CI
- develop: CI

Shifty is a tweening engine for JavaScript. It is a lightweight library meant
to be encapsulated by higher level tools. At its core, Shifty provides:

- Best-in-class performance
- Interpolation of Numbers over time (tweening)
- Playback control of an individual tween
- Extensibility hooks for key points in the tweening process
- Promise support for async/await programming

This is useful because it is the least amount of functionality needed to build
customizable animations. Shifty is optimized to run many times a second with
minimal processing and memory overhead, which is necessary to achieve smooth
animations.

  1. ```js
  2. import { tween } from 'shifty'
  3. ;(async () => {
  4.   const element = document.querySelector('#tweenable')

  6.   const { tweenable } = await tween({
  7.     render: ({ scale, x }) => {
  8.       element.style.transform = `translateX(${x}px) scale(${scale})`
  9.     },
  10.     easing: 'easeInOutQuad',
  11.     duration: 500,
  12.     from: { scale: 1, x: 0 },
  13.     to: { x: 200 },
  14.   })

  16.   await tweenable.tween({
  17.     to: { x: 0 },
  18.   })

  20.   await tweenable.tween({
  21.     to: { scale: 3 },
  22.   })
  23. })()
  24. ```

Installation


  1. ```
  2. npm install --save shifty
  3. ```

Environment compatibility


Shifty officially supports Evergreen browsers, Safari, and Node 10 and above.
If you encounter a browser-specific bug, please [open an issue about
it](https://github.com/jeremyckahn/shifty/issues/new)!

IE compatibility


Shifty is compatible with IE11 (possibly older versions as well), but you
will need to provide your own polyfills for it to work. If you are using
https://polyfill.io/, you just need the es6 features enabled:

  1. ```
  2. https://polyfill.io/v3/polyfill.min.js?features=es6
  3. ```

[Here's a polyfilled demo of Shifty that works with
IE11](https://codepen.io/jeremyckahn/pen/RwbzvEj). Please see [issue
#113](https://github.com/jeremyckahn/shifty/issues/113) for background on
this.

Support this project!


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](https://github.com/jeremyckahn#please-help-support-my-work)!

Developing Shifty


First, install the dependencies via npm like so:

  1. ```
  2. npm install
  3. ```

Once those are installed, you can generate dist/shifty.js with:

  1. ```
  2. npm run build
  3. ```

To run the tests:

  1. ```
  2. npm test
  3. ```

To generate the documentation (dist/doc):

  1. ```
  2. npm run doc
  3. ```

To generate live documentation to preview in your browser:

  1. ```
  2. npm run doc:live
  3. ```

Loading Shifty


Shifty exposes a UMD module, so you can load it however you like:

  1. ```javascript
  2. // ES6
  3. import { tween } from 'shifty'
  4. ```

Or:

  1. ```javascript
  2. // AMD
  3. define(['shifty'], function(shifty) {
  4.   shifty.tween({ from: { x: 0 }, to: { x: 10 } })
  5. })
  6. ```

Or even:

  1. ```javascript
  2. // CommonJS
  3. const { tween } = require('shifty')

  5. tween({ from: { x: 0 }, to: { x: 10 } })
  6. ```

Using Shifty


Please see the [Getting
Started](https://jeremyckahn.github.io/shifty/doc/tutorial-getting-started.html)
guide and check out the API documentation.

Troubleshooting


Jest


With later versions of Jest [it is
known](https://github.com/jeremyckahn/shifty/issues/156) that by default Shifty
may cause warnings that look like:

  1. ```
  2. Jest has detected the following 1 open handle potentially keeping Jest from exiting:
  3. ```

To prevent this, use
[shouldScheduleUpdate](https://jeremyckahn.github.io/shifty/doc/shifty.html#.shouldScheduleUpdate)
in your test setup like so:

  1. ```js
  2. import { shouldScheduleUpdate } from 'shifty'

  4. afterAll(() => {
  5.   shouldScheduleUpdate(false)
  6. })
  7. ```

Releasing


Releases are done from the CLI. Assuming you have commit access, use [npm version](https://docs.npmjs.com/cli/v8/commands/npm-version) to tag and push a
new release in a single operation. This will kick off [a GitHub
action](https://github.com/jeremyckahn/shifty/blob/develop/.github/workflows/publish-package.yml)
that builds and publishes Shifty to NPM.

Contributors


Take a peek at the Network
page to see all of the Shifty contributors.

Special thanks goes to Thomas Fuchs:
Shifty's easing formulas and Bezier curve code was adapted from his awesome
Scripty2 project.

License


Shifty is distributed under the [MIT
license](http://opensource.org/licenses/MIT). You are encouraged to use and
modify the code to suit your needs, as well as redistribute it.