Create frame-based animations in React
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Made build workflow better Sep 18, 2017
test Made tests work again Sep 18, 2017
.gitignore Made build step better Sep 18, 2017
.npmrc Pinned dependencies Sep 18, 2017
.travis.yml Use JSON for Travis config Sep 18, 2017
gulpfile.js Made build workflow better Sep 18, 2017
package-lock.json 0.2.3 Sep 18, 2017
package.json 0.2.3 Sep 18, 2017
readme.md Document the onRender prop (#55) Mar 2, 2018

readme.md

React Keyframes

Build Status XO code style

A React component for creating frame-based animations.

Demo

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.

  • Example:

    import { Component } from 'react';
    import { Keyframes, Frame } from 'react-keyframes';
    
    class extends Component {
      render () {
        return <Keyframes>
          <Frame duration={100}>foo</Frame>
          <Frame duration={200}>bar</Frame>
        </Keyframes>;
      }
    }

Contributing

  • Run npm run build to transpile the source code
  • Before submitting a PR, please run npm test
  • Please be welcoming

Author

Naoyuki Kanezawa (@nkzawa) - ▲ZEIT