tricky image reveal scrolltrigger animation with gsap

[@pablocortes682]

Hey WebBae, thank for another great tutorial, I have a question though, I understand that for the wrapper you use 100dvh so that when used on mobile the wrapper adapts to the browser expansion or contraction, right? but that doesn't seem to work on my iphone, safari and chrome, when I scroll downwards as the browser search bar contracts the viewport is cut off at the bottom. Also, I tried using 100svh in mobile but the problem persist. Do you know of any fixes for this? thanks!

[@webbae]

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.

[@pablocortes682]

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.

[@webbae]

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

[@mihai227]

​@@webbae have you tried svh?

[@alexandrb1543]

Thank you! I know that this is mostly for mobile version, but even on desktop the animation looks better than just fixed background on an image. My client loved it!🙂

[@webbae]

That's great! Glad it could help.

[@webbae]

also check pinned comment for the extra space on mobile.

[@IOSALive]

Subscribed because your videos always make me smile!

[@webbae]

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

[@thevectorbox]

3:27, Thanks now I understand that part, Great tutorial

[@webbae]

haha of course!

[@heatherliu6856]

Newton's 3rd says WHAM

[@webbae]

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

[@mathieupreaud]

Hi Web Bae, thanks a lot for the tutorial. This gallery built with GSAP and ScrollTrigger looks awesome. I just tried out the demo on Safari browser (Mac) and it doesn't seem to work. Any idea? Thanks again.

[@webbae]

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?

[@mathieupreaud]

@@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 :)