react-web-animation

react-web-animation is a set of React components that expose the Web Animations API in a declarative way.

Live Demo

http://react-web-animation.surge.sh/

Installation

react-web-animation requires the following peer dependencies to be installed

npm install react
npm install react-dom
npm install prop-types

npm install react-web-animation

react-web-animation has a runtime dependency on the next version Web Animations API polyfill.
The easiest way to get this is to grab it from cdnjs
and include it in your application.

<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.1/web-animations-next.min.js"></script>

Features

  • Animate Single Elements with a <Animated.[componentName]> e.g. <Animated.div> and control play state (play, pause, stop, reverse)
  • Animate Single Elements with a <Animation> and control play state (play, pause, stop, reverse)
  • Animate Multiple animations in parallel with a <AnimationGroup>, controlling them with one timeline
  • Animate Multiple animations serially with a <AnimationSequence>, controlling them with one timeline

Usage

Creating an animated element is as simple using an <Animated.[elementName]> component and supplying keyframes and a timing config.

import { Component } from 'react';
import { Animated } from 'react-web-animation';


export default class Basic extends Component {

    getKeyFrames() {
        return [
            { transform: 'scale(1)',    opacity: 1,     offset: 0 },
            { transform: 'scale(.5)',   opacity: 0.5,   offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)',   opacity: 0.6,   offset: 1 }
        ];
    }

    getTiming( duration ) {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 2,
            direction: 'alternate',
            fill: 'forwards'
        };
    }

    render() {
        return
            <Animated.div keyframes={this.getKeyFrames()}
                       timing={this.getTiming(2500)}>
                    Web Animations API Rocks
            </Animated.div>;
    }
}

GitHub