react-animate-x v1.3.0

React Animate X

A React implimentation of Animate X, a super small animation library for animating components, numbers, objects, and arrays.

Installation

With npm:

npm install --save react-animate-x

Or with Yarn:

yarn add react-animate-x

Usage

Simple

import Animate from 'react-animate-x'

...

<Animate from={0}, to={100}>
   {state => (
      <div style={{ transform: `translateX(${state}px)` }}>Animating!</div>
   )}
</Animate>

Easing

The simplest way to apply easing to your animation is with the eases module, but any easing function will work.

import Animate from 'react-animate-x'
import { bounceOut } from 'eases'

...

<Animate
   from={{
      x: 0,
      y: 0,
   }}
   to={{
      x: 100,
      y: 150,
   }}
   easing={bounceOut}>
   {({ x, y }) => (
      <div style={{ transform: `translate(${x}px, ${y}px)` }}>Animating!</div>
   )}
</Animate>

Props