0

Im trying to animate react router pages with TransitionGroup and gsap App 

class App extends React.Component { render() { return ( <div> <ul> //links </ul> <div className="detail"> <TransitionGroup component="div"> {this.props.children} </TransitionGroup> </div> </div> ) } }

Page component, only componentDidMount action is calling and animating, componentWillLeave not working.

class Page extends React.Component { componentDidMount() { // working var dom = ReactDOM.findDOMNode(this) TweenMax.fromTo(dom, 0.3, {y: 100, opacity: 0}, {y: 0, opacity: 1}) } render() { return ( <div> Page </div> ) } componentWillLeave() { // not working var dom = ReactDOM.findDOMNode(this) TweenMax.fromTo(dom, 0.3, {y: 0, opacity: 1}, {y: 100, opacity:0}) } }

Im new to react, i have complex animations with each page loading and leaving, please help me to find a solution to fix this issue.

thanks in advance.

Improve this question
6
  • Are you sure that componentWillUnmount is not the lifecycle method you're looking for? Commented Oct 11, 2016 at 17:17
  • I'v tried componentWillUnmount it's triggering but not supports animations. Commented Oct 11, 2016 at 17:21
  • I believe that you're supposed to call the fade out animations from that method. Do you mind changing the original question to use componentWillUnmount? That will make it a bit easier to reason Commented Oct 11, 2016 at 17:31
  • componentWillUnmount not working with animations. Commented Oct 11, 2016 at 17:33
  • One way or the other, componentWillLeave is not a lifecycle method thus it is not being called as per specs: facebook.github.io/react/docs/component-specs.html Commented Oct 11, 2016 at 18:03
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.