@clutch-marketplace/velocity-react-clutch

velocity-react

React components for interacting with the Velocity DOM animation library. The VelocityComponent and VelocityTransitionGroup components, are distributed as ES5-compatible JavaScript files with CommonJS require statements. You will need a dependency tool such as Browserify, RequireJS, or webpack to use them on the web.

This package depends directly on Velocity, as well as lodash for a handful of utility functions (which are required individually to try and keep bundle size down). To use the Velocity UI Pack, which includes a library of transitions and support for the stagger, drag, and backwards options, require it along with Velocity at an entry point to your app:

Changes exclusive to Clutch

• VelocityComponent passes down runAnimation as a renderProp allowing easier access to the methods provided.

VelocityComponent

Component to add Velocity animations to a child node or one or more of its descendants. Wraps a single child without adding additional DOM nodes. The API attempts to be as declarative as possible. A single animation property declares what animation the child should have. If that property changes, this component applies the new animation to the child on the next tick.

By default, the animation is not run when the component is mounted. Instead, Velocity's finish command is used to jump to the animation's end state. For a component that animates out of and back in to a default state, this allows the parent to specify the "animate into" animation as the default, and therefore not have to distinguish between the initial state and the state to return to after animating away.

Properties

** animation **: Either an animation key or hash defining the animation. See Velocity's documentation for what this can be. (It is passed to Velocity exactly.) ** runOnMount **: If true, runs the animation even when the component is first mounted. ** interruptBehavior **: Specifies what should happen to an in-progress animation if the animation property changes. By default is stop, which stops it at its current position, letting the new animation use that as a starting point. This generally gives the smoothest results. Other options are finish, which jumps the animation to its end state, and queue, which will proceed with the new animation only after the old one has finished. These options may be necessary to avoid bad behavior when certain built-in effects like "slideUp" and "slideDown" are toggled rapidly. Unrecognized properties are passed as options to Velocity (e.g. duration, delay, loop).

Methods

** runAnimation **: Triggers the animation immediately. Useful for when you want an animation that corresponds to an event but not a particular model state change (e.g. a "bump" when a click occurs)

VelocityTransitionGroup

Component to add Velocity animations around React transitions. Delegates to the React TransitionGroup addon.

Properties

** enter **: Animation to run on a child component being added ** leave **: Animation to run on a child component leaving ** runOnMount **: if true, runs the enter animation on the elements that exist as children when this component is mounted. Any additional properties (e.g. className, component) will be passed to the internal TransitionGroup. enter and leave should either be a string naming an animation registered with UI Pack, or a hash with an animation key that can either be a string itself, or a hash of style attributes to animate (this value is passed to Velocity its the first arg).

** Note **: To make it easier to write consistent “enter” animations, the “leave” animation is applied to elements before the “enter” animation is run. So, for something like opacity, you can set it at 0 in “leave” and 1 in “enter,” rather than having to specify that “enter” should start at 0. If enter or leave is a hash, it can additionally have a style value that is applied the tick before the Velocity animation starts. Use this for non-animating properties (like position) that are prerequisites for correct animation. The style value is applied using Velocity's JS -> CSS routines, which may differ from React's. Any hash entries beyond animation and style are passed in an options hash to Velocity. Use this for options like stagger, reverse, &c.