Jump to content
GreenSock

siangi

Problem with nested Timelines and MotionPath

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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(). 

  • Like 2
Link to comment
Share on other sites

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!

  • Like 1
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.
×