A React component for creating frame-based animations

React Keyframes

Create frame-based animations in React.

Example

The following example will render contents in Frame one at a time every 500 ms.

import { render } from 'react-dom';
import { Keyframes, Frame } from 'react-keyframes';

render(
  <Keyframes>
    <Frame duration={500}>This</Frame>
    <Frame duration={500}>This is</Frame>
    <Frame duration={500}>This is <em>animated</em>.</Frame>
  </Keyframes>,
  document.getElementById('container')
);

Usage

Firstly, install the package:

$ npm install --save react-keyframes

API

Keyframes

<Keyframes { component = 'span', delay = 0, loop = 1, onStart, onEnd } />

Use import { Keyframes } from 'react-keyframes' or require('react-keyframes').Keyframes.
The component prop specifies what component Keyframes renders as.
The delay prop specifies when the animation should start (millisecond).
The loop prop specifies the number of times an animation cycle should be played. Set true to repeat forever.
The onStart function is invoked upon animation start
The onEnd function is invoked upon animation end
Any additional, user-defined properties will become properties of the rendered component.
It must have only Frame as children.

Example:

import { Component } from 'react';
import { Keyframes, Frame } from 'react-keyframes';

class extends Component {
  render () {
    return <Keyframes component="pre" delay={300} className="animation-test">
      <Frame>foo</Frame>
      <Frame>bar</Frame>
    </Keyframes>;
  }
}

Frame

<Frame { duration = 0, onRender } />

Use import { Frame } from 'react-keyframes' or require('react-keyframes').Frame.
The duration prop specifies the length of time that a frame should show (millisecond).
The onRender function is invoked upon rendering of this frame
You have to put Frame in the order you want them animated.