Ivica Obadic Ivica Obadic - 1 year ago 225
Javascript Question

Usage of velocity.js animations in React

Can i use velocity.js animations within React components without integrating it without velocity-react library ?
I don't like that by default, when the component is mounted, the final state of the animation is shown. How can i make animation to run on component load ?

Answer Source

simple example:

  1. import velocity

    import Velocity from 'velocity-animate';
  2. then start animation in componentDidMount

    import React, { Component } from 'react';
    class VelocityExample extends Component {
             Velocity(this.refs.block,{ scale: 2 },500)
             .then(e=>console.log('animation complete'))
            return <div ref="block" >VelocityExample</div>;

webpackbin LIVE DEMO

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download