Animation to continue after being displayed again

[geholger]

Hi,

first: thanks for this great plugin to make animations awsome :-). 

Here's what I am trying to achieve:
I have a web page (based on react) containing different tabs. In one of the tabs, I am running component with a gsap animation. If I switch to a different tab, I would like the animation to continue so that when I am returning to the tab that contains the animation the animated element is on a different position.

The (quick and dirty) codepen shows the problem. If you run it, the box just moves along the path. Clicking on "Show other component" will show another component (just some simple text). Clicking on the button again returns to the animated component. But this time, the box is not moving anymore. 

 

Any ideas how this could be achieved?

 

Best regards,

Holger

See the Pen MWEqrNK by geholger (@geholger) on CodePen

[GreenSock]

I'm not a React guy (@OSUblake is our resident expert - I'm sure he'll chime in), but I think it's behaving that way because your code only creates the animation on the first run, and you've got conditional logic to skip it if "added" is true. When your component re-renders, it's an entirely different element now. So GSAP is indeed running its animation still, but it's on an element that no longer exists visibly in the DOM. 

 

There are probably many ways to solve this. If you can't prevent React from re-rendering that element in this situation, you could just create a fresh animation on that new object, but copy the totalTime() from the original one and set it on the new one before killing the old one. Sorta like this: 

See the Pen qBPMLRN?editors=0010 by GreenSock (@GreenSock) on CodePen

[OSUblake]

In Vue, there is a special KeepAlive component that solves that problem. Just a quick search, and it looks like someone made a version for React. I would probably try with this first, and if that doesn't work, do something similar to what Jack showed.

 

https://www.npmjs.com/package/react-keep-alive