BenjaminO

I tested on Chrome / Safari and Firefox with a Mac (MacOS Ventura). The problem is that ScrollTrigger is not refreshed when adding element to the DOM or when a div is resized, especially on Mobile (maybe because of the ScrollSmoother option ignoreMobileResize: true ?). That's the reason why I needed to refresh ScrollTrigger manually in my case. The scroll from top to current position is only happening on desktop (not mobile). Maybe there is another solution, I am open to suggestion. I made a new video of my case here : https://mega.nz/folder/3g4TASYD#z0sdpbAvSK2sWbUYQsYIgQ

Hello @GreenSock, I remarked that manually refreshing ScrollTrigger with a ScrollSmoother instance could cause unwanted jumps. In the demo, when adding a div to the DOM, the viewport jumps to top then scrolling back to current position 😅. Is there a practical way to fix this issue ? Many thanks in advance for your help. PS: I made a small video about it here also = https://mega.nz/folder/3g4TASYD#z0sdpbAvSK2sWbUYQsYIgQ

After digging a bit I found out that declaring the type explicitly was doing the job here 🙂 const { isMobile, isDesktop } = context.conditions as gsap.Conditions

I think the problem is related to the interface Context below : interface Context { [key: string]: any; selector?: Function; isReverted: boolean; conditions?: Conditions; // no problem without the ? queries?: object; add(methodName: string, func: Function, scope?: Element | string | object): Function; add(func: Function, scope?: Element | string | object): void; ignore(func: Function): void; kill(revert?: boolean): void; revert(config?: object): void; clear(): void; } The thing is that the different conditions (isMobile, isDesktop in my case) are typed ANY because they inherit from a union type of gsap.Conditions | undefined because of the ?. The undefined type is causing the error here so conditions should be mandatory IMHO.

I have the following typescript errors for isMobile and isDesktop in gsap.matchMedia(): const isDesktop: any property 'isDesktop' doesn't exists on type 'Conditions | undefined'.ts(2339) const mm = gsap.matchMedia() mm.add( { isMobile: '(max-width: 766px)', isDesktop: '(min-width: 767px)' }, (context) => { const { isMobile, isDesktop } = context.conditions // error ts 2339 } )

Sorry I wasn't very clear on that 😅 I was saying that even a small scroll + rotating the screen was blocking the refresh event indefinitely so ruining the UX because I am also using ScrollSmoother 😢 thus unpining my elements + creating a giant blank space at the bottom because smooth content height is not updated 🧐 EDIT: The complicated thing is that Nuxt 3 doesn't handle really well GSAP (ScrollSmoother particularly). I tried to reproduce my problem with a very simple example but I can't reproduce the problem without incorporating nuxt I think. See below : https://codepen.io/benjamOD2/pen/MWGrxze I think I'll wait for this plugin to be compatible with Nuxt 3 and see if my problem goes away. https://github.com/ivodolenc/nuxt-gsap-module/issues/24

I tried both situations : manually triggering refresh + log AND just log. In that second situation only, that's were sometimes scrolltrigger doesn't fires at all 😢 I was thinking about that ! The momentum when scrolling on Safari is long enough to block the refresh event after rotating the phone, thus causing the bug. The problem is that even a very small scroll can cause the bug, ruining the UX. What I don't understand, is that the refresh is not called AT ALL sometimes (maybe if it is block too long it is not triggered) ? So, in that situation, I think that the best for me is to trigger it manually without the true parameter. The other problem is that I need to wait that the layout is finalized before refreshing. Apart from delaying manually the refresh, I don't see another way to deal with it as single/double requestAnimationFrame() and nextTick() doesn't seems to work in my case 😅 Are you 100% sure about that. When I triggers the refresh manually ,the scroll is blocked very briefly then the screen rotates then the scroll continues which feels quite natural 🧐

Hello @Rodrigo and thank you for your suggestions ! Indeed, I have a complicated and not very stable setup that relies on third party tools 😅 which is not ideal to debug ! And of course I am aware that I have to resfresh scrolltrigger after the layout is finalized @GreenSock 🙂 I tested this without sucess 😕 window.addEventListener('orientationchange', async () => { await nextTick() ScrollTrigger.refresh() }) I tested scrollTrigger refresh event by using the following command : ScrollTrigger.addEventListener('refresh', () => console.log('refresh')) I accessed to the dev tool of my Iphone with my Mac using Safari. When changing orientation of my phone (rotating the screen), it happens sometimes that the refresh event doesn't occurs ! I found out that if I scroll, then I rotate the phone the refresh doesn't fires. However, when waiting for 1/2s without touching the screen then rotating the phone, the event is triggered. I was thinking that maybe there is an interaction between the two but I need to reproduce and isolate the problem to solve it. For now I have no idea of what's going on !

I'll try to make a repro of my problem @mvaneijgen. Even though the workaround is working, I find it weird. I think there is also something related to scrollTrigger refresh. I think that maybe scrollTrigger doesn't refresh after orientation change when the page is scrolled at the same time (with ScrollSmoother) 🧐. cc @GreenSock

Hello @GreenSock, my case is a bit complicated to reproduce. I am using ScrollTrigger to pin my elements within a ScrollSmoother instance (I made this choice because of the structure of my code -> using nuxt 3). I am also applying some animation on the pin elements childs which are conditional (I mean the animations) based on a GSAP.matchMedia(). I think it is not linked to GSAP directly but more to my image gallery. I am using vue-masonry-wall (https://github.com/DerYeger/vue-masonry-wall) which is organizing my images nicely with JS. The problem is that the « drawing » step of this plugin can end after the ScrollTrigger event thus changing the height of smooth content 🥲. This plugin emits it’s own custom event when the « drawing » event occurs but I still have to wait a little bit longer after it, so it’s not ideal (equivalent to my first solution). I’ll try to manage it with a nextTick() from vue or with your suggestion : one or two requestAnimationFrame() 🤔

Hello 👋, I remarked that my pin elements (created with scrollTrigger), are broken after I rotate my phone (tested with an IPhone 13 IOS 16 on Safari and Firefox). I added the code below (I am awaiting 100ms after orientationchange to trigger a scrolltrigger.refresh()) which is doing the job 90% of the time (still some cases where it is not working). Do you know if there is a more convenient way to wait for the refresh ? window.removeEventListener('orientationchange', async () => { await delay(80) ScrollTrigger.refresh() }) // Creation of Pin Element ScrollTrigger.create({ trigger: Element, start: 0, pin: true, pinSpacing: false, anticipatePin: 1, endTrigger: '#gridgalerie' // I tried end: 'max' without sucess in my case })

It makes total sense now ! thank you @GreenSock !!

Hello @GreenSock ! Sorry for the late response. I've been testing scrollTo() with an IPhone 13 (IOS 16.0.2) but I am still experiencing the jump issue in Safari as well as in Firefox 😅

Hello @GreenSock ! With the latest release of IOS 16, the address bar is not showing hiding on Safari in my project with scroll smoother (it stays visible) There is still some lags but the general UX is better. I will investigate a bit more and I planned to release my code once I’ll finish on GitHub I can’t imagine how much work you put into this ! Thank you very much for your patience and support for us all ! 😇

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