Package Exports

keyframe-animation

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (keyframe-animation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Keyframe Animation 1.x

Pure javascript animation manager similar to css animations with keyframes.

Get Started

Installation

via NPM

npm i keyframe-animation

via Yarn

yarn add keyframe-animation

Basic Usage

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
<div id="myBox" style="width: 100px; height:2px; background-color: crimson;"></div>

How to use Keyframe Animation in React/React Native?

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.