react-v

react-v

Easy, intuitive velocityjs animations for React

Awesomely native feel, almost no extra code, exactly the same as velocityjs api, ie:

works on all React components

this.refs.someComponent.bounce()

Fyi, we monkey patch React.createClass && React.Component

We don't include jquery (velocity on dom)

quick demo

Quick Usage

-require

-execute

-profit

// require and execute react-v
require('react-v')()

var Form = React.createClass({
  handleClick() {
    // pass up the click event, we want to animate the entire form
    // you could just animate the button here
    this.props.handleClick()
  },
  render() {
    return <div>
    <input />
    <button onClick={this.handleClick}>Click me</button>
    </div>
  }
})

var App = React.createClass({
  animate() {
    // free animations!
    this.refs.form.velocityShake()
    // if noNamespace
    this.refs.form.shake()
  },
  render() {
    return <div>
    <Form ref="form" handleClick={this.animate}/>
    </div>
  }
})

ReactDOM.render(<App />, document.getElementById("app"))

API

We have most of the velocity animation functions available, including UI pack

Require Options

-noNamespace (bool|false): true to remove the velocity namespace, changing component.velocityFlash() to component.flash()

Component Velocity Methods

View velocityjs docs for more details

The only special mention is the velocity method which is the same as the original velocity method

[ 'velocity',
  'velocityBounce',
  'velocityShake',
  'velocityFlash',
  'velocityPulse',
  'velocitySwing',
  'velocityTada',
  'velocityFadeIn',
  'velocityFadeOut',
  'velocityFlipXIn',
  'velocityFlipXOut',
  'velocityFlipYIn',
  'velocityFlipYOut',
  'velocityFlipBounceXIn',
  'velocityFlipBounceXOut',
  'velocityFlipBounceYIn',
  'velocityFlipBounceYOut',
  'velocitySwoopIn',
  'velocitySwoopOut',
  'velocityWhirlIn',
  'velocityWhirlOut',
  'velocityShrinkIn',
  'velocityShrinkOut',
  'velocityExpandIn',
  'velocityExpandOut',
  'velocityBounceIn',
  'velocityBounceOut',
  'velocityBounceUpIn',
  'velocityBounceUpOut',
  'velocityBounceDownIn',
  'velocityBounceDownOut',
  'velocityBounceLeftIn',
  'velocityBounceLeftOut',
  'velocityBounceRightIn',
  'velocityBounceRightOut',
  'velocitySlideUpIn',
  'velocitySlideUpOut',
  'velocitySlideDownIn',
  'velocitySlideDownOut',
  'velocitySlideLeftIn',
  'velocitySlideLeftOut',
  'velocitySlideRightIn',
  'velocitySlideRightOut',
  'velocitySlideUpBigIn',
  'velocitySlideUpBigOut',
  'velocitySlideDownBigIn',
  'velocitySlideDownBigOut',
  'velocitySlideLeftBigIn',
  'velocitySlideLeftBigOut',
  'velocitySlideRightBigIn',
  'velocitySlideRightBigOut',
  'velocityPerspectiveUpIn',
  'velocityPerspectiveUpOut',
  'velocityPerspectiveDownIn',
  'velocityPerspectiveDownOut',
  'velocityPerspectiveLeftIn',
  'velocityPerspectiveLeftOut',
  'velocityPerspectiveRightIn',
  'velocityPerspectiveRightOut' ]

License

MIT