The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    A teeny tiny tweening engine in JavaScript. That's all it does.
    Filed under 

    • 🔾49%Overall
    • 1,530
    • 12.5 days
    • 🕩87
    • 👥6

    Shifty - The fastest TypeScript animation engine on the web

    Current Shifty version

    • main: CI

    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.

    import { tween } from 'shifty'
    ;(async () => {
      const element = document.querySelector('#tweenable')
      const { tweenable } = await tween({
        render: ({ scale, x }) => {
 = `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

    Environment compatibility

    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!

    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!

    Developing Shifty

    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

    Loading Shifty

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

    // ES6
    import { tween } from 'shifty'


    // AMD
    define(['shifty'], function(shifty) {
      shifty.tween({ from: { x: 0 }, to: { x: 10 } })

    Or even:

    // CommonJS
    const { tween } = require('shifty')
    tween({ from: { x: 0 }, to: { x: 10 } })

    Using Shifty

    See the Getting Started guide and check out the API documentation.



    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:

    import { shouldScheduleUpdate } from 'shifty'
    afterAll(() => {

    Breaking changes

    From v2 to v3

    Shifty's legacy version 2 remains available in the v2 branch. Legacy documentation can be found at:

    • Tweenable.formulas has been renamed to Tweenable.easing
    • tweenConfig.step has been removed in favor of tweenConfig.render (behavior and API is unchanged).
    • tweenConfig.attachment has been removed in favor of (behavior and API is unchanged).
    • Tweenable#tweenable 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 a method).
    • Tweenable#setScheduleFunction has been removed. The static method Tweenable.setScheduleFunction method should be used instead.
    • Render handler parameters have been reordered:
      • In v2, the function signature was (state: TweenState, data: Data, timeElapsed: number) => void
      • In v3, the function signature was (state: TweenState, timeElapsed: number, data: Data) => void
    • Scene#play() 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.

    Show All