I can't understand how I am supposed to chain sequential velocity animations.

[patientplatypus]

Can you give an example of how to chain a simple animation? I've been trying to do a single chaining of an animation like so:

<VelocityComponent animation={{width: this.state.pictureclickarray[0]===true?'100%':'0%' }} duration={5000} complete={()=>{this.sliderrest(0)}}>
                     <ExplanationBox>
                       <VelocityComponent animation={{opacity: this.state.arrayshow[0]===true?'1':'0'}, {interruptBehavior: 'queue'}} duration={5000} >
                         <ExplanationPadding>
                           <p>'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel neque at enim luctus tristique vel tempor risus. Nunc ac tellus in ex maximus accumsan. Vestibulum consequat, metus non tincidunt sollicitudin, turpis justo condimentum libero, vitae maximus dui eros fermentum nunc. Sed eu condimentum felis.'</p>
                         </ExplanationPadding>
                       </VelocityComponent>
                     </ExplanationBox>
                 </VelocityComponent>

and it does not work. The documentation for optional properties mentions that they exist, but gives no simple examples of how to use them. The demos are good, but they don't seem to cover this example - I have an animation, it completes and I do another animation. Please help if you can.

[JM-Mendez]

You need to register an effect helper, and use the calls property to chain effects. The animations can also be a string value. Duration Percentage from what I can tell is just a multiplier of the set duration. I set it to 1. All call props and options get passed to velocity. More details can be seen here http://velocityjs.org/#uiPack

    // attach at a top level. I had to also place it in the same file where I used it.
    require('velocity-animate/velocity.ui')

    const animHelpers = {
      customAnim: velocity.registerEffect({
        defaultDuration: duration,
        calls: [
          [ { property: value }, durationPercentage, { options } ],
          [ { property: value }, durationPercentage, { options } ]
        ],
        reset: { property: value, property: value }
      });)
    }
// in component
<Comp  animation={animHelpers.customAnim} />