tricky image reveal scrolltrigger animation with gsap 

Good catch Pablo! I changed 100dvh to 100vh and it's much improved. I think the issue here is that the ScrollTrigger pin element get's its height set when the page loads (url bar visible) so it get's "stuck" at 100dvh. But when the url bar goes away it just leaves the empty space you mentioned (how did I not realize this before?!?!). The other strategy would be to wrap the collection wrapper in another div call it sticky-track and set wrapper to position sticky with top 0. You'd have to manage the scroll distance manually then in webflow and would need to adjust the code so the end point is in sync too. I think the 100dvh to 100vh is an easy way to fix this though. I think its worth asking gsap folks about pin with dvh so will post about it in the forum. Thanks again! pinning this.

Thank you for the response@@webbae . Yeah in the past I had the same problem with a loader, but had to use JS to solve it, but I thought I was implementing the 100DVH wrong, but I got a better understanding of how it works now. Thanks again.

let's see what the gsap brains say! gsap.com/community/forums/topic/40372-scrolltrigger-pin-with-dvh-css-units/

​@@webbae have you tried svh?

That's great! Glad it could help.

also check pinned comment for the extra space on mobile.

Thanks for the nice comment. I'm always working on improving my videos and am so glad it's making an impact.

haha of course!

WHAM WHAM WHAM WHAM WHAM does this law account for perpetual motion (which devolves into chaos at it's base form?)

I just loaded it on safari on my MacBook Pro and iPhone and didn’t have any issues. Can you explain a little more the problems you are seeing?

@@webbae Hi, I'm experiencing the issue on my MacBook Pro with Safari 15.5 (this is not the last version of the browser). The problem I'm seeing, it always keep displaying the first image while scrolling. Thanks :)