Neurological Phenomenon Multiplexer

    @bufferapp/react-keyframes

    0.2.5 • Public • Published

    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')
    );

    Documentation

    Installation

    $ npm install react-keyframes --save

    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 } />

    • 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).

    • 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 gulp help to see available tasks.
    • Before submitting a PR, please run gulp lint and npm test.
    • We use standard + semicolons.
    • Please be welcoming.

    Credits

    • Copyright © 2016 Zeit, Inc and project authors.
    • Licensed under MIT.

    Keywords

    none

    Install

    npm i @bufferapp/react-keyframes

    DownloadsWeekly Downloads

    453

    Version

    0.2.5

    License

    none

    Last publish

    Collaborators

    • egomezd
    • cheahenry
    • jacobchadwell
    • boristroja
    • philippemiguet
    • josemdev
    • msanroman
    • daisymarie128
    • hamstu
    • stevenc81
    • bufferbot
    • albennett
    • mayauribe
    • ssvmvss
    • gomezjuliana
    • esclapes
    • ay8s
    • mickmahady
    • dinostheo
    • hitherejoe
    • dace
    • erickhun
    • kmbriseno
    • hackertronix
    • kiriappeee
    • ethaneisenhard
    • cmunozgar
    • gtangbuffer
    • heatheryou
    • peteremilbuffer
    • arekpn
    • abeeb
    • buffermw
    • gisete