Problem with nested Timelines and MotionPath

[siangi]

Hi everyone

 

I'm using GSAP to animate the lyrics of a song. For that I am trying to use nested timelines. I create the animation in their own timelines in separate functions, to reuse them later. These timelines are returned and added to a base timeline. However if I do that, only the last sub-timeline added executes.

You can switch out lines 26 and 27 in the codepen to test it out. On their own, both sub-timelines work.

   // switch these lines to try out the different functions
    // only the last line will be exectued
    baseTimeline.add(setUpCrossingLines("testTextTestTextTestText"), "<");
    baseTimeline.add(setUpFlag(flagLines), "<"

 

Am I handling the timelines wrong?

Thanks for any tips or help.

 

See the Pen eYGKBNy by siangi (@siangi) on CodePen

[GreenSock]

I don't have time at the moment to wrap my head around all the logic in that 100+ lines of JS, but I suspect the problem is here:

visSVG.innerHTML += newLetter;   

When you change the innerHTML like that, you're forcing the browser to literally throw away all the original child elements and re-create them as new objects, thus if you had animations that were referencing those original elements they won't be the new ones you're having the browser create. 

 

In other words...

let child = visSVG.firstChild; 

visSVG += "<text>Foo</text>";

console.log(child === visSVG.firstChild); // false!

So the way you're building things is not only inefficient (because it forces the browser to delete and then re-parse all the HTML in that element over and over again), but it's causing your animations to reference elements that no longer exists. 

 

It would be better to not use innerHTML like that. Instead, create your elements and appendChild(). 

[OSUblake]

3 minutes ago, GreenSock said:

It would be better to not use innerHTML like that. Instead, create your elements and appendChild(). 

 

Or use insertAdjacentHTML as it will keep the original children intact.

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

 

[siangi]

Thank you both a lot!

Both versions work.

 

I am sorry for posting so much code, I tried to simulate it in a simpler way but I couldn't reproduce the problem (because the problem was not with GSAP obviously). I was very stuck.

Thanks again!