react-motify

Simple Animation for react. Super fast, super lightweight and super customizable.

Exports

Motify

Default. Convenience animation component with start and end.

MotifyCore

The low level animation component for custom interpolation.

MotifyTransitionGroup, MotifyTransitionGroupChild

Implements the React TransitionGroup, makes it possible for components to be animated when they enter or leave

interpolations

Presets for the Motify component's "interpolation" prop

To create an animation, simply wrap the component you would like to animate into a Motify component.

Motify

import Motify from 'react-motify';

//in the components render method
<Motify start={{left: 0}} end={{left:100}} duration={1000}>
  { ({ left }) => <div style={{left: left + "px"}}>I am being animated</div> }
</Motify>

This will transition the div's "left" css property from 0px to 100px over a duration of 1000 milliseconds

Props

children: function

Required. A function that gets the interpolated values as the first argument, and the optional "args" prop as the second. Must return a single React component.

duration: number

Required. The duration of the animation in milliseconds.

start: Object of numbers

The initial values for interpolation. If not existent the animation won't start.

end: Object of numbers

The target values for interpolation. If not existent the animation won't start.

interpolate: Object of numbers

The function to interpolate The value with. Must have signature [0,1]->number. Default: easeInOutQuad

onFinish: function

Function to call when the animation has finished.

args: Any

Arguments to pass to the child function, besides the interpolated values

Work in progress. Other parts will follow