https://github.com/brunnolou/springs
Super simple springs animations
https://github.com/brunnolou/springs
animation physics spring
Last synced: 4 months ago
JSON representation
Super simple springs animations
- Host: GitHub
- URL: https://github.com/brunnolou/springs
- Owner: brunnolou
- License: mit
- Created: 2017-03-17T22:21:29.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-04T22:55:01.000Z (almost 9 years ago)
- Last Synced: 2025-11-16T21:24:51.405Z (7 months ago)
- Topics: animation, physics, spring
- Language: JavaScript
- Size: 185 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Springs
[](https://badge.fury.io/js/springs)
### Super simple springs animations.
Add real fluid physics to you custom javascript animations.
## Install
`npm install springs`
## Usage
Create the springs.
```js
import springs from 'springs';
// Tension, friction.
const s1 = springs(140, 10);
const s2 = springs(10, 1);
```
Then watch for example with `requestAnimationFrame`
```js
function update() {
el.style.transform = `scale3d(${s1(x)}, ${s2(y)}, 0)`;
requestAnimationFrame(update);
}
requestAnimationFrame(update);
```
Update the end value of the spring, in this case update `x` and `y` with mouse move.
```js
let x = 0;
let y = 0;
// Mouse move example.
function onMove({ clientX, clientY }) {
x = clientX / 200;
y = clientY / 200;
}
document.addEventListener('mousemove', onMove);
```
### Events
```js
springs(tension, friction, { events })
````
- `onInit`
- `onUpdate`
- `onActivate`
- `onRest`
### Defaults
```js
tension = 30,
friction = 1,
```
## Development
`npm install`
## Demo
`npm start`
`./example/` folder will be running on: `http://localhost:5000`