Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sifrr/sifrr-animate
:cyclone: Animate any mutable object's properties in JS using requestAnimationFrame with Promise based API
https://github.com/sifrr/sifrr-animate
animate animation anime animejs css-animation sifrr
Last synced: about 8 hours ago
JSON representation
:cyclone: Animate any mutable object's properties in JS using requestAnimationFrame with Promise based API
- Host: GitHub
- URL: https://github.com/sifrr/sifrr-animate
- Owner: sifrr
- License: mit
- Created: 2019-04-28T13:14:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T00:40:15.000Z (about 2 years ago)
- Last Synced: 2024-04-25T09:43:12.041Z (10 months ago)
- Topics: animate, animation, anime, animejs, css-animation, sifrr
- Language: JavaScript
- Homepage: https://sifrr.github.io/sifrr-animate/showcase/
- Size: 1.57 MB
- Stars: 7
- Watchers: 3
- Forks: 2
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# sifrr-animate · [](https://www.npmjs.com/package/@sifrr/animate)
> ~1kb library to Animate any mutable object's properties using requestAnimationFrame with promise based API.
This is a basic level library, which can be used to create complex animations as well like [anime.js](https://github.com/juliangarnier/anime), using keyframes, delay and loop.
**Note**: Since it uses requestAnimationFrame, actual time taken to animate can vary +1 frame (~17ms for 60fps)
## Size
| Type | Size |
| :----------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| Normal (`dist/sifrr.animate.js`) | [](https://github.com/sifrr/sifrr-animate/blob/master/dist/sifrr.animate.js) |
| Minified (`dist/sifrr.animate.min.js`) | [](https://github.com/sifrr/sifrr-animate/blob/master/dist/sifrr.animate.min.js) |
| Minified + Gzipped (`dist/sifrr.animate.min.js`) | [](https://github.com/sifrr/sifrr-animate/blob/master/dist/sifrr.animate.min.js) |
## Examples
## Usage
```js
import { animate, wait } from '@sifrr/animate';
animate({
target: ,
targets: ,
to: { // exmaple
prop1: 'to1',
prop2: 'to2',
porp3: ['from3', 'to3'],
style: { // multi level properties example
width: '100px'
}
},
time: 300, // default = 300
type: 'spring', // default = 'spring' which is basically cosine curve
round: false, // default = false
onUpdate: () => {},
delay: 1000 // animate after waiting for 1 second, default = 0
}).then(() => {
// do something after animation is complete
})
// animate after waiting for 1 second
// same as delay, but for more control over animation timeframes
// You can create very complex animations using wait, animate and loops
wait(1000 /* in ms */).then(() => {
animate({...});
})
```
- `target(s)` - object(s) whose properties you want to animate, target is single object, targets is array of object
- `to` - properties with final values you want to animate to.
- `time` - time taken to animate (in ms)
- `type` - type of animation (pre added: \['linear', 'ease', 'easeIn', 'easeOut', 'easeInOut', 'spring']). type can also be a bezier array or function which takes x value between (0,1) and returns corresponding y value.
- `round` - round off animated values or not
- `onUpdate` - this function will be called on update with arguments `object`, `property`, `currentValue`, doing heavy lifting here can cause laggy animation
- `delay` - (in miliseconds) number or function, delay before start of animation (in ms)
- `initialPercent` - (between 0 and 1) default `0`, initial x-percent value to start animation from
- `finalPercent` - (between 0 and 1) default `1`, final x-percent value to end animation at
If from values are not given (or object doesn't have that property), they will start from 0.
If a function for `time`, `delay`, `to`, `initialPercent` or `finalPercent` is given, it will be called with index of target to animate (starting from 0) and return value will be used as corresponding value for that target. `this` inside these functions is `target`.
You can add more types using bezier function values:
```js
import { types } from '@sifrr/animate';
types['customType'] = [.42, 0, .58, 1]; // bezier array
// then use
animate({ type: 'customType' ...})
```
### Format
Property's current/from value and to value should be of same format (strings around numbers should be same).
- Number
- string with multiple numbers to animate, examples:
- '123'
- 'p123'
- '123s'
- 'abcd 1234 fed 45'
- 'aaaaaa123aaaa123aaaaaa123aaaaaa'
`OR`
Relative `to`, `to` can be relative number as well
- if from is `100px`, and to is `+=20px`, then final value will be `120px`
- if from is `100px`, and to is `-=20px`, then final value will be `80px`
- if from is `100px`, and to is `*=2px`, then final value will be `200px`
- if from is `100px`, and to is `/=5px`, then final value will be `20px`
## Advanced usages
```js
import { keyframes, loop } from '@sifrr/animate';
// each animateOpts1 is valid options object for animate function
// returns a promise that resolves after all the animations are complete
keyframes([animateOpts1, animateOpts2, [ animateOpts3, animateOpts4 ], animateOpts5]);
// this will execute the timeline:
// <---1--->
// <---2--->
// <---3--->
// <---4--->
// <---5--->
// Promise resolved
// loop will execute the function on loop consecutively after previous promise is resolved
loop(() => /* return any promise, eg. animate(...options), keyframes([...options]), etc */)
```
## Standalone files
```html
// for v0.0.3, version = 0.0.3
```
then use
```js
Sifrr.animate.animate({...});
Sifrr.animate.keyframes([...]);
Sifrr.animate.wait(100);
Sifrr.animate.loop(() => {});
Sifrr.animate.types;
```
## CommonJs
```js
const { animate, types, keyframes, loop } = require('@sifrr/animate)
```