React transition group using gsap, Exiting and Exited not being called

Question

I'm trying to use gsap for the animations and want to call these on the functions provided. Entering ones work but can't get the exiting and exited ones to fire. i'm setting a state variable on click to change in to false but its not rerendering. Am i missing something cause i can't see anything in the documentation

constructor(props) {
    super(props);
    this.state = {in: true};

    this.handleClick = this.handleClick.bind(this);
  }
  onEnter(node, isAppearing, event) {
    console.log("on enter")
    TweenMax.killTweensOf(node);
    TweenLite.set(node, {
      x: '800px',
      onCompleteParams: [node]
    });
    // animate in the element
    TweenLite.to(node, 1, {
      x: '0px',
      onCompleteParams: [node]
    });
  }

  onEntered() {
    console.log("on entered")
  }

  onExit() {
    console.log("on exit")
  }

  onExiting() {
    console.log("on exiting")
  }

  handleClick(e) {
    e.preventDefault();
    this.setState({ in: false });
    console.log("click")

  }

  render() {
    const show  = this.state.in;

    return (

          <div className="row">
            <div className={styles.items}>
            <TransitionGroup>
              <Transition
                timeout={{
                  enter: 300,
                  exit: 500,
                 }}
                appear={true}
                in={show}

                onEntered={this.onEntered}
                onExiting={this.onExiting}
                onExit={this.onExit}
                onEnter={(node, isAppearing, event) => {
                  this.onEnter(node, isAppearing, event)
                 }}
                >
                <Link
                    to="/sub-page"
                    className={styles.item}
                    onClick={this.handleClick}
                  >
                    <div className={styles.itemimagecontainer}>
                      <img
                        src={image}
                        className={styles.itemimage}
                        alt="Sonovate"
                      />
                    </div>
                    <div className={styles.itemcontent}>
                      <h3 className="heading-small">Title</h3>
                    </div>
                  </Link>
              </Transition>
            </TransitionGroup>
</div>
</div>

Edit: Just to add more information about the build in my app.js i have this

return (
      <Router>
        <div>
        <TransitionGroup>
          <Transition
              timeout={500}
              appear={true}
              mountOnEnter={true}
              unmountOnExit={false}
              onEnter={(node, isAppearing, event) => {
               this.onEnter(node, isAppearing, event)
              }}
              onExit={(node) =>{
                this.onExit(node)
              }}
            >
            <div id={"wrapper"} style={divStyle}>
              <Header toScroll={this.toScroll}></Header>
              <Route path="/" render={props => <AppRoutes {...props}/> }/>
              <ScrollTop className={this.props.className} onClick={this.scrollTop}></ScrollTop>
            </div>
          </Transition>
        </TransitionGroup>
        <Canvas></Canvas>
        </div>
      </Router>
    );

So that does a nice little transition on the overall page and the previous code at the top is part of a route (home page)

React transition group using gsap, Exiting and Exited not being called

0 Answers0