[ScrollTrigger - Syncing animated text with Lottie animation]

3 hours ago, OSUblake said:

Just paste the url.

Ah, so simple Thanks!

 

3 hours ago, OSUblake said:

You can fine tune it with durations and the position parameter. 

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

[ScrollTrigger - Syncing animated text with Lottie animation]

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

[ScrollTrigger - Syncing animated text with Lottie animation]

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

See the Pen BaWvQdz?editors=1010 by 12_nick (@12_nick) on CodePen

[Pinned ScrollTrigger has wrong start position when DOM dynamically changes]

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

[Pinned ScrollTrigger has wrong start position when DOM dynamically changes]

3 minutes ago, akapowl said:

 

Hello there @NZZ Editorial Tech and welcome to the forums.

 

 

Yes, ScrollTrigger does have a .refresh() method that you'd likely want to call in a scenario as such.

 

Hope that helps. Happy scrolling

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

[Pinned ScrollTrigger has wrong start position when DOM dynamically changes]

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

See the Pen WNpKPgP?editors=1010 by 12_nick (@12_nick) on CodePen