Pinned ScrollTrigger has wrong start position when DOM dynamically changes

[NZZ Editorial Tech]

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

[akapowl]

 

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

 

22 minutes ago, NZZ Editorial Tech said:

 

Is there a way to refresh the start position of the ScrollTrigger, when additional content was added to the DOM?

 

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

 

Hope that helps. Happy scrolling  

 

See the Pen 1ccb9fdcb3ce33fa2285a5caed2bdaab by akapowl (@akapowl) on CodePen

 

[NZZ Editorial Tech]

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

[akapowl]

 

Sorry, I don't think ScrollTrigger has any functionality to auto-detect changes made to the DOM.

And I quite frankly don't think I can be of any more help than that since that sounds like a more general thing to me.

 

Maybe someone else has an idea though.

[OSUblake]

30 minutes ago, NZZ Editorial Tech said:

but I don't know how I can react to the change in the DOM

 

The DOM doesn't magically change itself. Whatever changes the DOM should trigger the refresh.

 

You could also try using a mutation observer. 

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

 

 

[GreenSock]

6 minutes ago, OSUblake said:

You could also try using a mutation observer. 

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

Just a little warning: I read somewhere that MutationObserver is pretty expensive performance-wise. 

 

Like Blake said, it's typically best to just do the .refresh() when your code makes changes. If you use MutationObserver, for example, and had to change 10 elements at one time, my guess is that you'd inadvertently be triggering a .refresh() 10 times which is a terrible idea performance-wise. So just make your changes, then do your .refresh() call. 

[NZZ Editorial Tech]

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