Timeline animation with DOM nodes that are occasionally gone

[Mikhail V]

I'm integrating GSAP with React, and I bumped into a surprise: when I specify elements on animation timeline by classes / ids, and DOM nodes with those classes/ids are not yet mounted by React, GSAP will silently wait the amount of time designated for animating those missing elements without giving a clue on the fact that there is a problem.

 

In React, where DOM nodes come and go, I badly need some console warnings for such cases. Can I somehow turn on warnings about missing elements on a timeline?

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

As you mention GSAP keeps reference to the DOM nodes so if their aren't in the DOM tree you don't get the cannot tween a null value error.

 

What you could try is run some code in componentWillUnmount in order to check if those nodes are part of a GSAP instance using getTweensOf().

 

Also since you're using RTG on an entire component, you could create an association between a component and a specific GSAP instance since the component is not in the DOM tree, you could prevent that specific timeline from playing.

 

Another scenario is that some DOM elements of the component being animated might not be present at some point during the component's lifecycle after the GSAP instance has been created?. In that case get the tweens of the timeline and check the target of those to see if they are present in the DOM tree or not. IN this regard you're storing an internal reference in the component's instance using the ref callback. When/if the node is not rendered, that reference is updated or not?. Perhaps you can check that and update everything after a component update.

 

A more detailed information of what is happening React-wise in your app and how that creates the issue would be nice.

 

Happy Tweening!!!

[Mikhail V]

@Rodrigo Whoa, that was a warm greeting and a very helpful answer, thanks!

 

My use case is tweening URLs on the whole site. Every page is assembled and disassembled in its own way, it's not just uniform crossfades. This is how the end result should look like and this is the repository I'm working on.

 

I'm still figuring out how to do this; should I use a single timeline, or multiple timelines, or multiple timelines on a single timeline... Any suggestions on how you would approach this are kindly welcome.