Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jonathanramirez

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

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>
)}

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×