react-animatronics

Declarative, coordinated animations for React components.

Table of Contents

• Installation
• Quick Intro
• Documentation

Installation

# npm
npm install --save react-animatronics

# yarn
yarn add react-animatronics

Quick Intro

React-animatronics allows you to declare complex animations involving multiple React components throughout your component hierarchy.

Here's a quick example demonstrating some of what react-animatronics can do:

import React from 'react'
import { Animatronics, Control } from 'react-animatronics'

const Square = ({ style, animatronicStyles }) => (
  <div
    style={{
      height: '100px',
      width: '100px',
      cursor: 'pointer',
      position: 'absolute',
      ...style,
      ...animatronicStyles
    }}
  />
);

const SquareOne = () => (
  <Control name='squareOne'>{
    ({ animatronicStyles }) => (
      <Square
        style={{
          backgroundColor: 'blue',
          top: '0px',
          left: '0px'
        }}
        animatronicStyles={ animatronicStyles }
      />
    )
  }</Control>
);

const SquareTwo = () => (
  <Control name='squareTwo'>{
    ({ animatronicStyles }) => (
      <Square
        style={{
          backgroundColor: 'red',
          top: '200px',
          left: '0px'
        }}
        animatronicStyles={ animatronicStyles }
      />
    )
  }</Control>
);

const SquareThree = () => (
  <Control name='squareThree'>{
    ({ animatronicStyles }) => (
      <Square
        style={{
          backgroundColor: 'green',
          top: '0px',
          left: '200px'
        }}
        animatronicStyles={ animatronicStyles }
      />
    )
  }</Control>
);

const animations = () => [
  {
    squareOne: {
      duration: 500,
      from: {
        top: '0px',
        left: '0px'
      },
      to: {
        top: '200px',
        left: '200px'
      }
    },
    squareTwo: {
      duration: 500,
      from: {
        top: '200px',
        left: '0px'
      },
      to: {
        top: '0px',
        left: '0px'
      }
    },
  },
  {
    squareOne: {
      duration: 500,
      from: {
        top: '200px',
        left: '200px'
      },
      to: {
        top: '0px',
        left: '200px'
      }
    },
    squareThree: {
      duration: 500,
      from: {
        top: '0px',
        left: '200px'
      },
      to: {
        top: '200px',
        left: '0px'
      }
    }
  }
];

const App = () => (
  <Animatronics animations={ animations }>{
    ({ playAnimation, reset }) => (
      <div
        style={{ cursor: 'pointer' }}
        onClick={() => {
          playAnimation(() => {
            setTimeout(reset, 500);
          });
        }}
      >
        <SquareOne />
        <SquareTwo />
        <SquareThree />
      </div>
    )
  }</Animatronics>

);

Live CodeSandbox example: https://codesandbox.io/s/wq39rlvnk7

Documentation

• Walkthrough - for those new to react-animatronics
• API Reference - for those that just need to remember how to do "that one thing"