tannerlinsley / springer

A spring that generates realistic easing functions

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

springer's Issues

Tension and friction

Hello,

Thank you very much for your work.

I was wondering if it was possible to convert the tension and wobble with values from the other tools (Android's StringForce, Framer's tension and friction...)

Tension is like stiffness but Wobble is different from damping?

I try to reproduce the same animations with your code.

Thanks