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

Prop | Description | Default --- | --- | --- from | A number, object, or array to start tweening from | 0 to | A number, object, or array to tween to (must match schema of "from") | 100 duration | The number of milliseconds the animation should last | 1000 easing | An easing function for the animation | function(time){ return time } loop | Add this prop to loop the animation infinitely | false onStart | A function that will be called every time the animation starts | n/a onEnd | A function that will be called every time the animation ends | n/a animating | Set to false to stop the animation | n/a