The fastest JavaScript animation engine on the web
npm install shifty
- main: 
Shifty is a tweening engine for TypeScript. It is a lightweight library meant
to be encapsulated by higher level tools. At its core, Shifty provides:
- Best-in-class animation performance
- Playback control of an individual tween
- Extensibility hooks for key points in the tween lifecycle
- 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 with the minimal processing
and memory overhead.
``js
import { tween } from 'shifty'
;(async () => {
const element = document.querySelector('#tweenable')
const { tweenable } = await tween({
render: ({ scale, x }) => {
element.style.transform = translateX(${x}px) scale(${scale})
},
easing: 'easeInOutQuad',
duration: 500,
from: { scale: 1, x: 0 },
to: { x: 200 },
})
await tweenable.tween({
to: { x: 0 },
})
await tweenable.tween({
to: { scale: 3 },
})
})()
`
`
npm install --save shifty
Shifty officially supports Evergreen browsers, Safari, and Node 10 and above.
Internet Explorer is supported by
v2 If you encounter a
browser-specific bug, please open an issue about
it!
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**!
First, install the development dependencies via NPM:
`
npm ci
Once those are installed, you can generate dist/shifty.js with:
`
npm run build
To run the tests:
`
npm test
To generate the documentation (in dist/doc):
`
npm run doc
Shifty exposes a UMD module, so you can load it however you like:
`javascript`
// ES6
import { tween } from 'shifty'
Or:
`javascript`
// AMD
define(['shifty'], function(shifty) {
shifty.tween({ from: { x: 0 }, to: { x: 10 } })
})
Or even:
`javascript
// CommonJS
const { tween } = require('shifty')
tween({ from: { x: 0 }, to: { x: 10 } })
`
See the Getting
Started
guide and check out the API documentation.
#### Jest
With later versions of Jest it is
known that by default Shifty
may cause warnings that look like:
`
Jest has detected the following 1 open handle potentially keeping Jest from exiting:
To prevent this, use
shouldScheduleUpdate
in your test setup like so:
`js
import { shouldScheduleUpdate } from 'shifty'
afterAll(() => {
shouldScheduleUpdate(false)
})
`
Shifty's legacy version 2 remains available in the
v2 branch. Legacy
documentation can be found at:
https://shifty-git-v2-jeremyckahn.vercel.app/
- Tweenable.formulas has been renamed to Tweenable.easing
- has been removed in favor of tweenConfig.render
(behavior and API is unchanged).
- has been removed in favor of tweenConfig.data
(behavior and API is unchanged).
- has been removed.Tweenable#set()
- is now Tweenable#setState.Tweenable#get()
- is now Tweenable#state (a getter, not a method).Tweenable#hasEnded()
- is now Tweenable#hasEnded (a getter, not a method).Tweenable#isPlaying()
- is now Tweenable#isPlaying (a getter, not aTweenable#setScheduleFunction
method).
- has been removed. The static methodTweenable.setScheduleFunction
method should be used instead.(state: TweenState, data: Data, timeElapsed: number) => void
- Render handler parameters have been reordered:
- In v2, the function signature was
- In v3, the function signature was
- has been renamed to Scene#tween.Scene#isPlaying()
- is now Scene#isPlaying (a getter, not a method).Scene#playingTweenables()
- has been removed.unsetBezierFunction` has been removed.
-
- Shifty "Core" build has been removed.
#### Non-breaking changes
- Token extension is now baked into Shifty Core.
Take a look at the Network
page to see all of the Shifty contributors.
Special thanks goes to Thomas Fuchs:
Shifty's easing functions and Bezier curve code was adapted from his awesome
Scripty2 project.
Shifty is distributed under the MIT
license. You are encouraged to use and
modify the code to suit your needs, as well as redistribute it.