https://github.com/hossein-zare/keyframe-animation
Pure javascript animation manager similar to css animations with keyframes.
https://github.com/hossein-zare/keyframe-animation
animated animation css-like ease-out javascript keyframes linear
Last synced: 9 months ago
JSON representation
Pure javascript animation manager similar to css animations with keyframes.
- Host: GitHub
- URL: https://github.com/hossein-zare/keyframe-animation
- Owner: hossein-zare
- License: mit
- Created: 2020-11-01T14:36:19.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-11-01T19:44:18.000Z (over 5 years ago)
- Last Synced: 2025-08-17T12:49:09.608Z (10 months ago)
- Topics: animated, animation, css-like, ease-out, javascript, keyframes, linear
- Language: JavaScript
- Homepage:
- Size: 10.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Keyframe Animation 1.x
Pure javascript animation manager similar to css animations with keyframes.
## Get Started
### Installation
via NPM
```bash
npm i keyframe-animation
```
via Yarn
```bash
yarn add keyframe-animation
```
### Basic Usage
```javascript
const KeyframeAnimation = require('keyframe-animation');
const myAnimation = new KeyframeAnimation();
myAnimation.set({
fps: 60, // frames per second
duration: 2, // seconds
animation: 'linear', // linear, ease-out
iterationCount: 'infinite' // 1, 2, ... , infinite
})
// Similar to CSS Animations
.keyframes({
0: {
width: 100,
}
50: {
width: 150,
},
100: {
width: 200
}
});
// Start the animation
myAnimation.animate(data => {
document.getElementById('myBox').style.width = `${data.width}px`;
});
// Stop the animation
myAnimation.stop();
// HTML
```
### How to use Keyframe Animation in React/React Native?
```javascript
import KeyframeAnimation from 'keyframe-animation';
export default class MyComponent extends React.Component {
constructor(props) {
super(props);
this.width = 100;
}
startAnimation() {
...
.animate(data => {
this.width = data.width;
this.forceUpdate(); // Important
});
}
render() {
return (
...
);
}
}
```
You can decrease the fps to improve the performance.
>(50 - 40) is recommended for React/React Native.