Jump to content
GreenSock

jonathanramirez

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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.paths0.3, {
        opacity: 0,
        onComplete: this.destroyIntro,
      });
 
 
destroyIntro = () => {
    this.setState({ destroyIntro: true });
  };
 
{!destroyIntro && (
    <div ref={div => this.paths = div}>Content Here</div>
)}
Link to comment
Share on other sites

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!!!

  • Like 3
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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!!!

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×