Ivica Obadic Ivica Obadic - 3 months ago 31
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

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 {
        componentDidMount(){
             Velocity(this.refs.block,{ scale: 2 },500)
             .then(e=>console.log('animation complete'))
        }
        render(){
            return <div ref="block" >VelocityExample</div>;
        }
    }
    

webpackbin LIVE DEMO

Comments