Skip to content
develop
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

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 },
  })
})()

Installation

npm install --save shifty

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!

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:

https://polyfill.io/v3/polyfill.min.js?features=es6

Here's a polyfilled demo of Shifty that works with IE11. Please see issue #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!

Developing Shifty

First, install the dependencies via npm like so:

npm install

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

npm run build

To run the tests:

npm test

To generate the documentation (dist/doc):

npm run doc

To generate live documentation to preview in your browser:

npm run doc:live

Loading Shifty

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

// ES6
import { tween } from 'shifty'

Or:

// 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

Please see the Getting Started guide and check out the API documentation.

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. You are encouraged to use and modify the code to suit your needs, as well as redistribute it.