rm

react-motify

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

Showing:

Popularity

Downloads/wk

8

Maintenance

No Maintenance Data Available

Package

Dependencies

3

Size (min+gzip)

4.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100