Child timeline (kind of lazy loaded) updates items position on creation

[Samaritan]

Hi,

 

I've got a main timeline and a number of child timelines, each of the child timelines controls a lottie animation and some html elements and moves them around in sync. All of it is working well however as we load the animations in and create the timelines for them, which can take a few seconds, some of the child timelines towards the end of the main timeline are affecting the html elements as they get created and I'd really like them not to, as it makes a bunch of things jump around during that loading process. You can see a cut down version of the problem in the  attached codepen, if we add the tl2 directly to the main timeline without the setTimeout then it acts as we would expect, but with the setTimeout you can see that the item gets positioned to the start of the second child ani on load, but once the ani starts it acts as expected.

 

Any help appreciated.

See the Pen OJpJObN by SamaritanAU (@SamaritanAU) on CodePen

[GreenSock]

Yeah, you definitely shouldn't be creating your ScrollTrigger and attaching that timeline when it's not done populating. It's actually empty at that point, so it causes logic issues if you're trying to scrub something that has zero time. I'd recommend structuring your code so that's your last step (attaching it to the ScrollTrigger). Move your ScrollTrigger.create() inside your setTimeout() to see what I mean. 

 

Does that help? 

[Samaritan]

Thanks Jack - based on your response I've separated the the Lottie loading and the timeline creations, in effect moving the creation of the child timeline into the setTimeout function.

 

See the Pen rNyNdvq by SamaritanAU (@SamaritanAU) on CodePen

  

[GreenSock]

13 hours ago, Samaritan said:

Thanks Jack - based on your response I've separated the the Lottie loading and the timeline creations, in effect moving the creation of the child timeline into the setTimeout function.

 

Great. And it's working well for you, right? Looks good to me.