Animate out - React

[mb2233]

Hi guys,

 

I'm new to React and using GSAP with it. I'm trying to do something really simple. I'm calling an animation on componentDidMount() and now I would like for this animation to leave as well. Now, I though I could do it using componentDidUnmount(), but that is not working. Can anyone help animating something out?


Code: 

componentDidMount(){

          this.loadOverlay = TweenLite.to(this.loaderOverlay, 1, {
              width: "110%", zIndex: "900", ease: Expo.easeInOut, delay: 2.1
          });

}

 

componentWillUnmount(){
         this.loadOverlay = TweenLite.to(this.loaderOverlay, 1, {
              width: "0",  right: "0", left: "initial", ease: Expo.easeInOut, delay: 4
         }); 

}

 

 

Thanks!

[Rodrigo]

Hi,

 

The thing here is that componentWillUnmount is not designed for that actually. From the React docs:
 

Quote

This method is called when a component is being removed from the DOM

 

Basically the lifecycle methods are there only as hooks or event emitters, soto speak, pretty much like GSAP's own callback system. The onComplete, for example instance is not going to wait for something else to happen before executing the provided callback. Like that componenWillUnmount is not going to wait for some animation or anything else that might take more time than it's own execution to complete and remove the component. So that's not a good place for any of that type of code. In fact this particular hook is not as used as others lifecycle hooks.

 

A good thing would be to know exactly what you're trying to do.For your code I assume that you're still working on the loading overlay from the other day. If you're trying to simply animate out the component without removing it from the DOM then I'd recommend a simpler approach, such as a regular event handler like a button or something similar. This sample animates a DOM element with a delay (wait two secs) and then with the button you can toggle the animation

 

See the Pen wmgVGo?editors=0010 by rhernando (@rhernando) on CodePen

 

Another option is a callback in the GSAP instance itself. As I mentioned it'll be best to know exactly what you're trying to achieve and take it from there.

 

Happy Tweening!!!

[mb2233]

Hi Rodrigo,  

 

Okay, first of all, I work as a digital designer, so my coding skills are limited - but I've given myself the challenge of redesigning my portfolio and developing it myself -  in React. What I'm trying to pull off is actually really simple. What you helped me with the other day is done and dusted, that works great. What I'm trying to do now, is to have a div starting at width: 0px- animate to a full width of 110% starting from the left, then go back to width: 0px; but this time translating to the right. Like a paint stroke or a wipe. It's suppose to reveal some text beneath it. Everything around it is setup and I've got it to "paint in" I just need it to "paint out" again. I hope that makes sense. Like the white block that "paints" the image here: https://dribbble.com/shots/3907074-Nespresso-Animated

Anyhow, the Code Pen you sent actually solves my side menu issue too, so thank you for that ??

[Rodrigo]

Is the "paint out" animation happening after some time or an event handler, like click, hover, etc.? This is the most important part in order to choose the best course of action.

 

I'm going to guess based on the code you added in the first post. If the animation happens some time after the "paint in" animation is completed then GSAP has you covered. All you have to do is create a delayedCall instance and execute a function to start the other animation. You can create a method in your react class in order to simplify the whole process. Something like this:

 

class MyComponent extends Component {
  constructor(){
    super();
    // this method will create and restart the delayed call
    this.paintOutTimerCreator = this.paintOutTimerCreator.bind(this);
    this.paintInTween = null;
    this.paintOutTween = null;
    this.paintElement = null; // this is the DOM element being animated
    this.painOutTimer = null;
  }
  
  componentDidMount(){
    const { paintOutTimerCreator } = this;
    this.paintInTween = TweenLite.to(this.paintElement, 1, {
      width: "110%", zIndex: "900", ease: Expo.easeInOut, delay: 2.1,
      onComplete: paintOutTimerCreator
    });
    this.paintOutTween = TweenLite.to(this.paintElement, 1, { width: "0",  right: "0", left: "initial", ease: Expo.easeInOut, paused: true});
  }
  
  paintOutTimerCreator(){
    if ( this.painOutTimer ) {
      this.painOutTimer.restart(true);
    } else {
      this.painOutTimer = TweenLite.delayedCall( 4, () => this.paintOutTween.play(0) );
    }
  }
  
  // I'll assume that this part of your code is working
  render(){
    return(...);
  }
}

 

As I said this code is assuming a lot of things, so it would be nice to have a better grasp of what you need. As always if you could provide a reduced sample in codepen, it would be very helpful.

 

Happy Tweening!!!

Edited March 22, 2018 by Rodrigo
made a booboo!!!!

[mb2233]

Thank you again Rodrigo! I’m going to give that a shot, as it was what I wanted, to have it animate out after some time. Thanks! 

[mb2233]

Hi again Rodrigo, I gave your code a shot, but I'm getting an error message saying "this.paintOutTimer is not a function". Why is that? Appreciate the help.

[Rodrigo]

Yikes!!! there was a missing part in the code.

 

This:

 

  paintOutTimerCreator(){
    if ( this.painOutTimer ) {
      this.painOutTimer.restart(true);
    } else {
      this.painOutTimer( 4, () => this.paintOutTween.play(0) )
    }
  }

 

Should be this:

 

  paintOutTimerCreator(){
    if ( this.painOutTimer ) {
      this.painOutTimer.restart(true);
    } else {
      this.painOutTimer = TweenLite.delayedCall( 4, () => this.paintOutTween.play(0) );
    }
  }

 

I forgot to add the instantiation of the delayed call, sorry about that.

 

Happy Tweening!!