[React] Destroy element after animation "Cannot tween a null target"

[jonathanramirez]

Hi I am working with Gsap on React and I need to destroy elements after my animation is complete.

 

I am using a state and conditional rendering and it works fine if animate a parent element and destroy its children, but in other cases I need to destroy the element I am animating, but I get an infinite error saying "Cannot tween a null target".

 

Do you guys have an idea or a better approach to destroying elements after animating them? Please note that I will need them back later.

 

My code looks something like this:

 

 

TweenLite.to(this.paths, 0.3, {

        opacity: 0,

        onComplete: this.destroyIntro,

      });

 

 

destroyIntro = () => {

    this.setState({ destroyIntro: true });

  };

 

{!destroyIntro && (

    <div ref={div => this.paths = div}>Content Here</div>

)}

[OSUblake]

Please don't use code snippets. I can only assume that your code works fine. 

 

See the Pen 83c7e1fba5da2f7c43f1c74c7ee36d16 by osublake (@osublake) on CodePen

 

[Rodrigo]

Hi,

 

You can use React Transition Group in order to mount the element before the animation starts and then unmount it when the animation is complete:

 

https://stackblitz.com/edit/gsap-react-simple-transition-group

 

https://reactcommunity.org/react-transition-group/transition

 

If you do it manually be sure to destroy the GSAP instance after. As Blake comments the snippet you post doesn't give us the chance to know what could be the issue while a live-editable sample does. That's why I'm assuming that your problem lays elsewhere in your code, when a GSAP instance is still running after you remove the element from the DOM during a re-render.

 

Happy Tweening!!!

[jonathanramirez]

Thanks guys, I found that my problem is that I am using componentDidUpdate, because I need to children to listen for the parent change and that was causing the problem, but I will use React Transition Group. I will add the CopePen next time, sorry about that, thanks a lot!

[jonathanramirez]

@Rodrigo I am using react-transition-group now and it works perfect, I just have one question, do you know what will be the best way to have different animations for in and out? The example toggles the same property and it reverses the animation. I have some cases where I need the element coming from left and leaving to right, for example.

[Rodrigo]

Hi,

 

Actually the sample in my first post doesn't toggle the animation, it creates a new one and depending on the boolean used in the in property, the values used in the config object:

 

<Transition
  timeout={1000}
  mountOnEnter
  unmountOnExit
  in={show}
  addEndListener={(node, done) => {
    TweenMax.to(node, 0.5, {
      // in the next lines we use a ternary operator
      // whether the component should be shown or hidden
      x: show ? 0 : 100,
      autoAlpha: show ? 1 : 0,
      onComplete: done
    });
  }}
>
</Transition>

Inside addEndListener you can run a bit of code in order to set the of animation config you want, just keep in mind that show is part of the state in the main component of that particular sample.

 

Happy Tweening!!!