BenjaminO

Hello @GreenSock and thanks for your response. Do you know where I can download the gsap-bonus.tgz file ? I am a bit lost with the new website design (great work btw, it's gorgeous !) and I can't find it in my user settings section.

Hello folks, My question is : How can I continue to use GSAP premiums plugins after token expiration ? I was using GSAP premium plugins for a website. To do so, I used a .npmrc file with this content : always-auth=true //npm.greensock.com/:_authToken=${NPM_GREENSOCK_TOKEN} @gsap:registry=https://npm.greensock.com My NPM_GREENSOCK_TOKEN is now expired but I still need to use these plugins to maintain the website alive. Unfortunately, when updating the website and deploynig it to netlify, the website is broken. The problem is coming from GSAP installation : when doing a npm install, I get the following error : npm ERR! code E403 npm ERR! 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2fshockingly - bad authorization header. Please login again npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy, or npm ERR! 403 on a server you do not have access to. I didn't change the GSAP version since the token is expired : 3.11.5.

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

Hello @GreenSock, I still have the same issue (jump) with an IPhone 13. I also tried on IPhone SE (with both IOS 16.0.2) and with this one, the ScrollTo() method is not even triggered (nothing is happening). I cleared the cache (I even reset the IPhone SE). On which mobile did you make your test ?

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.

Hello @thei ! My code is a bit complex because it suits my needs but you don’t need that complexity. If your on nuxt 3, basically initialize the ScrollSmoother instance onberforemount or onmounted in your app.vue then just call a scrolltrigger refresh right after the page changed. You can lock the scroll with pause() method when your transitioning from a page to another. I assume the logic will stay the same on nuxt 2. In addition there is a module named nuxt-gsap-module from Ivo Dolenc that you can use for Nuxt 2. Maybe you can handle things a bit differently with this tool.

Hello @GreenSock ! I think the release solved the problem ? ! Thank you very much ? I still have some random bugs with ScrollTrigger on mobile but I need to investigate more on my side.

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 : https://codepen.io/benjamOD2/pen/MWGrxze 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

Hello @GreenSock ! ? I think you're totally right about the approach of the offset method ? you're workaround is working like a charm ! thank you for that. I am still encountering this jump issue with ScrollSmoother.scrollTo() on mobile after clearing cache (on IPhone). Please see a video of the codepen in Safari and Firefox mobile : https://mega.nz/folder/6tx0jAoK#c4QVKRSAeiCmHw6p83ouhw

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

Indeed I tested the config with ignoreMobileResize as you mentioned and it is not working on my side. Of course I have the last version of GSAP ("gsap": "npm:@gsap/shockingly@^3.11.1"). If I console.log refresh events of ScrollTrigger with ScrollTrigger.addEventListener('refresh', () => console.log('refreshed !')) on mobile (Safari IOS, not sure for the others) I can clearly see refresh events are triggered when adress bar is showing/hiding. I'll try to make a repro of my problem Please note that I am using ScrollSmoother also (not sure if that can cause an issue but I think it is worth mentioning)