Animate on unmount?

[irvinebroque]

I'm using react-tween-state to animate components on mount, and it works great. But componentWillUnmount doesn't allow state manipulations, so the following code throws an invariant violation:

  componentWillUnmount: function() {
    this.tweenState('translateY', {
      easing: tweenState.easingTypes.easeInOutQuad,
      duration: 300,
      endValue: this.state.translateY === 100 ? 300 : 0
    });
  }

Invariant violation:

Uncaught Error: Invariant Violation: replaceState(...): Cannot update while unmounting component. This usually means you called setState() on an unmounted component.

Is the solution to this to just use react-state-stream, which handles unmounting? Trying to find an interim implementation -- one of the reasons I like react-tween-state is that animations can be defined easily as lifecycle methods, rather than wrapper components ala <CSSTransitionGroup>

[chenglou]

Btw state-stream is very unstable right now. Don't use it as I'm changing things on a daily basis.

No, the solution is to have a better TransitionGroup, which benefits both tween-state and state-stream. Neither tween-state nor state-stream handles unmounting, and they shouldn't. And imo React's addon TransitionGroup really shouldn't have taken care of the lifecycle events or animation for you; it should have been focused on unmounting logic.

I'll gradually extract the unmounting wrapper out from state-stream into a standalone library, which will hopefully replace React addon TransitionGroup. This way you can combine it with any other animation lib if you ever feel like state-stream or tween-state is not your thing. Stay tuned!

[irvinebroque]

Count me in for a replacement <TransitionGroup/> that just handles unmounting logic. That's exactly what I want!

[chenglou]

https://github.com/chenglou/react-motion

=)