Simple Animation for react. Super fast, super lightweight and super customizable.
Default. Convenience animation component with start and end.
The low level animation component for custom interpolation.
Implements the React TransitionGroup, makes it possible for components to be animated when they enter or leave
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.
;//in the components render method<Motify start=left: 0 end=left:100 duration=1000><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
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.
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
Function to call when the animation has finished.
Arguments to pass to the child function, besides the interpolated values