Animation did complete hook about velocity-react

[fionawhim]

Happy news! It should be secretly already there. Any props you pass to VelocityComponent that it doesn't interpret itself get passed in the options hash to Velocity. So, if you put a complete property on VelocityComponent it should get called.

The Velocity docs have a list of all the options.

[fionawhim]

Fixed in 1.1.2, now published.

[fionawhim]

P.S.: Glad to hear you're liking it!

[kristian-puccio]

Thanks!

On 6 October 2015 at 00:41, Pete Hopkins [email protected] wrote:

P.S.: Glad to hear you're liking it!

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[nathantalewis]

I'm not sure if you want this as a separate issue, but it looks like the complete callback doesn't fire on the leave animation of a VelocityTransitionGroup.

In the following, begin and progress work happily, but complete is never called.

getInitialState() {
  return { maximize: undefined };
},

changeStateToMaximize() {
  this.setState({maximize: true});
},

render() {
  return (<VelocityTransitionGroup
      enter={{ animation: "slideDown" }}
      leave={{ animation: { height: "100%" },
        begin: () => console.log("Beginning..."),
        progress: () => console.log("Progress..."),
        complete: () => console.log("Completed.") }}
      runOnMount={true} >
    {this.state.maximize !== undefined ? undefined : (<div key="default" style={{ bottom: 0, height: "200px", left: 0, position: "fixed", width: "100%" }}>
      <div onClick={this.changeStateToMaximize}>
        Inner text
      </div>
    </div>)}
  </VelocityTransitionGroup>);
}

[bsalex]

@nathantalewis, did you find any workaround?

[nathantalewis]

@bsalex, sorry no. We ended up going with react-gsap-enhancer instead. https://github.com/azazdeaz/react-gsap-enhancer

[bsalex]

Just in case anyone else has the same problem.
We've ended up using progress(elements, complete) callback, checking for complete === 1

[fionawhim]

This is a bug in velocity-react. ReactTransitionGroup clobbers the complete callback. I can look into fixing this, though if anyone wants to take a go at it LMK.

[fionawhim]

Put up #53 for this. Anyone who wants complete for VelocityTransitionGroup care to try it out?

[py-in-the-sky]

I just gave the latest of master a try. Works brilliantly! Thank you!

When do you plan on your next npm release?