BenjaminO

October 15, 2023

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.

October 15, 2023

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.

December 28, 2022

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

December 28, 2022

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

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

November 6, 2022

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

November 6, 2022

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.

November 5, 2022

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
    }
  )

October 15, 2022

37 minutes ago, GreenSock said:

didn't follow that - what exactly "ruins the UX"? You switch orientations and then scroll only a tiny bit and something horrible happens?

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 :

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

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

October 15, 2022

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 😢

19 minutes ago, GreenSock said:

Keep in mind that by default, ScrollTrigger does a "safe" refresh if it's called in the middle of a scroll on a mobile device because refreshing would interfere with the scroll (stop it). That's just how iOS devices work - you lose the momentum scroll in that case. That's why ScrollTrigger waits for the "scrollEnd" event to fire before executing the "refresh" in that particular case. But when you manually call a ScrollTrigger.refresh(), it should force it (not "safe").

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 😅

19 minutes ago, GreenSock said:

you lose the momentum scroll in that 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 🧐

October 15, 2022

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 🙂

2 hours ago, Rodrigo said:

I think the first approach you should try is Vue's Next Tick function, since that is incorporated into the framework and is totally battle tested.

I tested this without sucess 😕

  window.addEventListener('orientationchange', async () => {
    await nextTick()
    ScrollTrigger.refresh()
  })

2 hours ago, Rodrigo said:

How can you scroll at the same time you are changing the devices orientation? 🤔 I never been in such situation and also never heard about such way of testing a site. It would be great if you could elaborate a bit more about this.

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 !

October 15, 2022

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

October 14, 2022

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() 🤔

October 13, 2022

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
      })

October 13, 2022

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

October 11, 2022

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 😅

October 5, 2022

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 ! 😇

October 5, 2022

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

October 3, 2022

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 ?

September 29, 2022

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.

September 29, 2022

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.

September 27, 2022

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.

September 27, 2022

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

September 27, 2022

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

September 27, 2022

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

September 13, 2022

7 hours ago, GreenSock said:
Are you saying that you did this...
ScrollTrigger.config({
  ignoreMobileResize: true
});
And it STILL called ScrollTrigger.refresh() when the address bar showed/hid? Are you positive you didn't have a typo or you weren't using an old version that pre-dated that feature? Please make sure you're loading 3.11.1 (latest)

I just don't see a good reason to add orientationchange event stuff because that's already covered in the resizing and you can get around the minor amount of height change that the address bar showing/hiding causes with the ignoreMobileResize feature.

If you're using the latest version and there's no typo and it's still not working for you, could you please provide a minimal demo that clearly shows the issue so that we can investigate further? Just a few colored <div> elements is fine (please don't include your whole project).

Thanks for being a Club GreenSock member, @BenjaminO! 🎉

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)

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by BenjaminO