Jump to content
Search Community

ScrollTrigger.config autoRefreshEvents on Mobile

BenjaminO test
Moderator Tag

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

  • 9 months later...
40 minutes ago, Micah Chukwudobe said:

This is marked a solution but it just takes me to redundant codes, is it possible the link has been updated or changed? Can you please send a link to the solution I can access. 

What do you mean by "redundant codes"? And what exactly is the problem you're trying to solve, @Micah Chukwudobe? Got a minimal demo that clearly shows the issue? The fix has been in GSAP for quite some time. 

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.
√ó
√ó
  • Create New...