Jump to content
GreenSock

BenjaminO

ScrollTrigger.config autoRefreshEvents on Mobile

Go to solution Solved by GreenSock,

Recommended Posts

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

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 // ...

 

Link to comment
Share on other sites

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!¬†ūüéČ

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

  • Solution

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? 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
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)?

Link to comment
Share on other sites

@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. 

 

  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
√ó