https://github.com/tannerlinsley/springer
A spring that generates realistic easing functions
https://github.com/tannerlinsley/springer
animation easing function motion physics spring tension wobble
Last synced: 23 days ago
JSON representation
A spring that generates realistic easing functions
- Host: GitHub
- URL: https://github.com/tannerlinsley/springer
- Owner: tannerlinsley
- License: mit
- Created: 2017-04-21T14:12:28.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-21T16:04:57.000Z (about 8 years ago)
- Last Synced: 2025-04-11T07:09:48.449Z (about 1 month ago)
- Topics: animation, easing, function, motion, physics, spring, tension, wobble
- Language: JavaScript
- Homepage: http://codepen.io/tannerlinsley/pen/MmyMEK
- Size: 38.1 KB
- Stars: 61
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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)](http://codepen.io/tannerlinsley/pen/MmyMEK)
- [React-Move + Springer Playground (Codepen)](http://codepen.io/tannerlinsley/pen/VbayBw?editors=0010)
## Installation
```bash
$ yarn add springer
# or
$ npm install springer --only=dev
```
##### CDN
```html
```
## 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
```javascript
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](https://github.com/chenglou/react-motion) with he bulk of the difficult physics logic originally done by the amazing [Cheng Lou (chenglou)](https://github.com/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
