Springer

A spring that generates realistic easing functions

Features

• 1 kb! (minified)
• Tension & Wobble parameters
• No dependencies
• Compatible with any animation library

Demo

• Greensock + Springer (Codepen)
• React-Move + Springer Playground (Codepen)

Installation

$ yarn add springer
# or
$ npm install springer --only=dev

CDN

<script src='https://unpkg.com/springer@latest/springer.js'></script>

Usage

• springer(tension, wobble)
  • tension
    • The percentage of force the spring has before release.
    • Min: 0
    • Max: 1
    • Default: 0.5
  • wobble
    • The percentage of wobble, or malleability the spring exhibits
    • Min: 0
    • Max: 1
    • Default: 0.5
• Returns an spring-based easing function

Example

import springer from 'springer' // or 'window.Springer.default' for script-tag users

const spring = springer(0.5, 0.8)

console.log(spring(0))   // 0
console.log(spring(0.2)) // 0.80516
console.log(spring(0.4)) // 1.01897
console.log(spring(0.6)) // 1.00010
console.log(spring(0.8)) // 0.99974
console.log(spring(1))   // 1

Acknowledgements

Springer is heavily inspired by React-Motion with he bulk of the difficult physics logic originally done by the amazing Cheng Lou (chenglou). Thanks Cheng!

Contributing

To suggest a feature, create an issue if it does not already exist. If you would like to help develop a suggested feature follow these steps:

• Fork this repo
• $ yarn
• Implement your changes to files in the src/ directory
• Submit PR for review

Scripts

• $ yarn run test Runs the test suite
• $ yarn run prepublish Builds for NPM distribution

Used By