ScrollTrigger.config autoRefreshEvents on Mobile

[BenjaminO 20 Likes (Newbie)]

Hello  🙂,

 

I am using scrolltrigger for few animations on my website with toggle actions 'play none none reset'. While on desktop it is working as expected, it's not the case on mobile (especially IOS Safari). It seems that the toggle actions are called when address bar is showing / hiding. I tried the ignoreMobileResize options under ScrollTrigger.config and/or ScrollSmoother.create but it doesn't seems to work well on Safari. I found the following workaround :

  if (ScrollTrigger.isTouch === 1) {
    ScrollTrigger.config({
      autoRefreshEvents: 'visibilitychange,DOMContentLoaded,load'
    })
    window.addEventListener('orientationchange', () => {
      const promise1 = delay(100)
      promise1.then(() => {
        ScrollTrigger.refresh()
      })
    })
  }

// Utils.ts
export const delay = (n: number) => {
  n = n || 2000
  return new Promise<void>((resolve) => {
    setTimeout(() => {
      resolve()
    }, n)
  })
}

so I removed the resize event from autoRefreshEvents (because it was called on scroll hence causing the problem) and I added an event listener on orientationchange instead (with 100ms of delay before refreshing).

 

I was wondering if maybe orientationchange could be added to autoRefreshEvents list because the following syntax doesn't work  🙂

  if (ScrollTrigger.isTouch === 1) {
    ScrollTrigger.config({
      autoRefreshEvents: 'visibilitychange,DOMContentLoaded,load,orientationchange'
    })
  }

 

[Cassie 5,122 Likes (Superhero)]

Hi there!

 

Is it possible to give us a demo of what this is solving and show the toggleActions issue you're trying to work around?

Thanks!

[BenjaminO 20 Likes (Newbie)]

Hi @Cassie,

 

please check this link with screen recordings. https://mega.nz/folder/SxZlTRYR#cqwmb7caHUz9tjOFHt5EkQ.

 

Tell me if you need more info !

 

EDIT : My scrolltrigger config 

gsap
    .timeline({
      scrollTrigger: {
        trigger: '#contact-container',
        start: 'top 100%',
        toggleActions: 'play none none reset' // same results with 'play resume resume reset'
      }
    })
    .to // ...

 

[GreenSock 18,251 Likes (Superhero)]

17 hours ago, BenjaminO said:

I tried the ignoreMobileResize options under ScrollTrigger.config and/or ScrollSmoother.create but it doesn't seems to work well on Safari.

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

[BenjaminO 20 Likes (Newbie)]

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)

[GreenSock 18,251 Likes (Superhero)]

Sorry about any confusion there. It looks like there was a regression that caused the base screen height not to get recorded properly for comparison in certain situations. That should be resolved in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Does that resolve things for you? 

[Mucha 0 Likes (Newbie)]

On 9/17/2022 at 6:29 AM, GreenSock said:

Sorry about any confusion there. It looks like there was a regression that caused the base screen height not to get recorded properly for comparison in certain situations. That should be resolved in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Does that resolve things for you? 

Hello everyone, I'm glad to join the forum. I found this topic because ignoreMobileResize didn't work also in my project. Luckily, the release you provided solved the problem. It works just fine now. Do you know when it's going to be released officially (on CDN)?

[GreenSock 18,251 Likes (Superhero)]

@Mucha we're feverishly working on getting that out ASAP, but I cannot give you a specific date right now. "Soon" is all I can say.  In the meantime, you're welcome to use that beta version or roll back. 

 

[BenjaminO 20 Likes (Newbie)]

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.