NZZ Editorial Tech

Ah, so simple Thanks! See, I knew about the position parameter, but I think using it with a Lottie animation had me confused. I think I got it now, thanks to posting my issue here and going through my code again step by step. Thanks for all the replies. Greetings Nick

Thanks guys for your answers. They did help, but I'm still kinda confused about the whole timing. I had some time now to make an illustration (I added it on top. How do I add a CodePen in a reply? ?). My goal is to sync the two texts to the Lottie. The Lottie is around 3 seconds long (181 frames at 60 fps). How do I set the TimeLine correctly, so that the first text flies over at second 1 of the Lottie (and the second text at second 2, etc.)? Greetings Nick

Hi I'm using the ScrollTrigger to scroll through a Lottie animation using the following settings: animation = lottie.loadAnimation({...}); ScrollTrigger.create({ trigger: lottieTrigger, start: "top top", end: "+=750%", scrub: true, pin: true, // markers: true, onUpdate: self => { animation.goToAndStop(self.progress * (animation.totalFrames - 1), true); } }); So far so good. The animation I use has "scenes" with a length of 4 seconds each. Now, I want to animate some text to fly over every scene. What's the best way to do that? I tried using a Timeline, but the timing gave me a headache. I wasn't able to time the texts in a way, that each one flies in at exactly the start of a "scene" and disappears on top before the next "scene" starts. Any help is greatly appreciated. Greetings Nick

Thanks for all your answers. After I posted this topic and after the first answer from @akapowl it dawned on me, that this cannot be fixed by the ScrollTrigger itself. I guess it helped to be able to write it down and get some feedback from you guys. Anyways I'll have to find another solution. Thanks again Greetings Nick

Hi @akapowl Thank you for your response. I'm already aware of that method, which, quite frankly, would solve my problem, but I don't know how I can react to the change in the DOM. Is there a way where ScrollTrigger can handle this situation? Greetings Nick

Hi I'm using the ScrollTrigger plugin to scroll through a Lottie animation. This works fine so far. The issue I am having is with dynamically loaded content on our website, which causes the ScrollTrigger, due to the property pin: true, to have a wrong start position. The culprit are ads which are loaded when the user scrolls through the site. Because the space they use is not reserved beforehand, the content height changes and the position of the ScrollTrigger is not up to date anymore. I tried to replicate the issue in CodePen (only for demonstration purposes!). After clicking the button, an additional <div>will be added which causes the ScrollTrigger to have a wrong start position. Is there a way to refresh the start position of the ScrollTrigger, when additional content was added to the DOM? Greetings Nick