Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Elvin Agaragimow

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

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.