When is it safe to call ScrollSmoother.scrollTo() after dynamically adding an element to the DOM?

[alexbrt]

Hi all!

 

I am currently working on a SPA in which I use a ScrollSmoother instance to synchronize the window's scroll with some WebGL elements, and I also use ScrollTrigger to pin sticky elements.

 

A section of this website has a filtering system which dynamically adds / removes items from the DOM. After the DOM updates, I call ScrollTrigger.refresh() to recalculate the positions and then ScrollSmoother.scrollTo() to scroll back to the top of the section which is always present in the DOM. The pinned items' positions are correctly recalculated; however, the ScrollSmoother.scrollTo() call does nothing unless I delay it (via a setTimeout()).

 

I was wondering if you guys know off the top of your heads when it is actually safe to call ScrollSmoother.scrollTo() after updating the DOM.

 

I will try later today to reproduce the issue on a CodePen, though I couldn't help but pop the question now because it's currently really late in my time zone.

 

Many thanks!

[alexbrt]

Update, here is the CodePen. I would expect that clicking the button adds a new element and scrolls the page back to the first section.

 

See the Pen ExErBez by alexbrt (@alexbrt) on CodePen

[Cassie]

Thanks for the heads up! We'll look into it.

An alternate route for now -

 

See the Pen vYRbobR?editors=0011 by GreenSock (@GreenSock) on CodePen

[GreenSock]

Here's a fork with the beta version of the upcoming release - better? 

See the Pen wvjgKKm?editors=0010 by GreenSock (@GreenSock) on CodePen

[alexbrt]

@Cassie, thanks for the alternative route. While it works, it makes it harder to handle both animating and manually scrolling at the same time.

@GreenSock Jack, this is certainly better, though I'm still noticing the old behavior when clicking the add button while scrolling.

[GreenSock]

12 hours ago, alexbrt said:

@GreenSock Jack, this is certainly better, though I'm still noticing the old behavior when clicking the add button while scrolling.

Should be resolved in the latest beta (please clear cache): 

See the Pen wvjgKKm?editors=0010 by GreenSock (@GreenSock) on CodePen

[alexbrt]

@GreenSock Cleared the cache, it works great now!

[BenjaminO]

Hello ?,

 

Thank you for this update @GreenSock ! I have a quite similar code as the one you shared on the code pen. My problem is that I'd like to keep the scroll position when the user add elements to the dom. If you supress smoother.scrollTo("#start", true); from your code you'll see that when adding elements the window jumps to top but the scrollbar stills on the right position creating an offset between what is diplayed (top of the page) and the actual scroll position ? When scrolling down again the window jump back to the correct position.

 

Please see a video here : https://mega.nz/file/W8w0jR5Z#uZ-6XnU2sTz03G5DbJLQQtP4Tv7jRnkaViA9r6WSynU

 

EDIT : just wanted to point out that ScrollSmoother.scrollTo() still not working for mobile browsers and offset method stills have the 'overscroll bug'. Please see the below issue I opened last month 

 

[GreenSock]

Hi @BenjaminO. It's pretty difficult to troubleshoot by just looking at a video - can you please provide a minimal demo (like in CodePen) and also make absolutely sure that you're using at least version 3.11.2? I suspect you're using an outdated file. 

 

What's very odd is that I never got any notifications about your old post there, sorry. Perhaps it went to my spam folder, but I wasn't ignoring you. I just posted a response there. ?

[BenjaminO]

Hello @GreenSock ! 

 

No worries thank you for the response ! I forked your codepen but I still have the weird jump to top when adding elements (I cleared the cache !). Please see :

See the Pen MWGrxze by benjamOD2 (@benjamOD2) on CodePen

I am 99,99% sure I am using GSAP 3.11.2 but just in case, how do you clear your cache ? For Safari I am doing [cmd] + [alt] + [e]. For firefox I am doing the following : Preferences > Privacy & Security panel > In the Cookies and Site Data section => Clear Data….

I also tried with CleanMyMac but still the same results

[GreenSock]

Aha, yes, thanks for the demo. Please clear your cache and refresh - does that work better? 

https://assets.codepen.io/16327/ScrollSmoother.min.js (updated beta version)

[BenjaminO]

Hello @GreenSock ! Indeed it is working as expected now !! I look forward to dl this new version ! ? I also replied to you on the following topic. Thank you again for the great work.

 

 

[GreenSock]

@BenjaminO - GSAP 3.11.3 is officially released. The CDN is in the process of updating, but should have the files within 15-30 minutes (typically). Enjoy!

 

? 

[BenjaminO]

Hello @GreenSock ! It is working perfectly with this new version ? thank you