Dynamic update ScrollTrigger after DOM-changing (vertical pinned scroll)

[Elvin Agaragimow]

Hi everyone!

 

There is a working script for scrolling news.

 

But the question is how to upload new news, or search for news, if I can not update ScrollTrigger? Trying ScrollTrigger.refresh(true), in documentation effect that I need, but in action I have nothing.
 

So when we click on the "View More"-button we adding new content to list then trigger ScrollTrigger.refresh(true), and scroll positioning should be recalculate, but it does it incorrectly, at the output we have that it does extra scrolling, and at the top we have not 0 but ~-2000px(depends to screen resolution)

 

Maybe I'm doing something wrong, maybe in the wrong sequence?
Maybe I'm missing something ..

 

Thank you very much in advance!

 

See the Pen VwQPQYe by eagaragimow (@eagaragimow) on CodePen

[akapowl]

Hello Elvin!

 

The way you are handling the refreshes, you are creating more and more ScrollTriggers on every refresh - that is not good.

 

There is no need for that, as ScrollTrigger does have built in properties/ways to handle those: You will need to use function-based values on the tween alongside invalidateOnRefresh: true  on the ScrollTrigger if you want ScrollTrigger to get fresh values to work with every time dimensions change.

 

invalidateOnRefresh

Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

 

 

Also overriding the values in an eventListener on "refresh" might be too late, so you may want to use "revert" instead.

 

When those things are changed, you'd notice, that the tween on scroll would become faster and faster everytime you refreshed, because you are making the end dependent on the container that never actually changes height, so you might want to make it dependent on the height of the element of which the size is being changed instead, to guarantee a constant 'speed' of the scrub, e.g. something like this; notice how the end here also uses a function-based value, as that value is going to change and will need to be gotten from scratch for every refresh. 

 

end: () => "+=" + news_list_wrap.height()

 

See the Pen rNJyMxz by akapowl (@akapowl) on CodePen

 

 

 

Also as a sidenote not related to your question here: You might want to reconsider how you are handling resizes.

I don't think the way you have things set up now will really work well - better have a look at ScrollTrigger.matchMedia() which is built for handling exactly those.

[Elvin Agaragimow]

@akapowl
Thank you for clear information, as always ! 🙂