ScrollTrigger not working on iOS

[MarioBros]

Hi, I've just discovered gsap and I am trying to do simple animation but my ScrollTrigger is not working on iOS(Brave, Safari)

Animation should be below black buttons.

 

I've also tried to search for similar problems on goggle but didn't find anything helpful. 

 

Video

GitHub repo

 

My project:

React + Vite

I've installed gsap: npm i gsap

Deployed on Netlify and AWS Amplify - animation works on both on desktop pc but not on iOS (I didn't try Android)

[GSAP Helper]

Hi there! I see you're using React -

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.

Here's the structure:

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.

We strongly recommend reading the React information we've put together at https://greensock.com/react

 

If that doesn't fix your issue please provide a minimal demo demonstrating the issue. Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[MarioBros]

Thank you for all information. I've created demo in stackblitz:

 

Demo

[Rodrigo]

Hi,

 

There seems to be a compatibility issue for iOS browsers (at least in my device iOS 16.1) for stackblitz sandbox. I have to update it so until then I can't test. I tried to test the stackblitz example on my android phone but something seems to be failing as well so the only test I can make is chrome and firefox on small screen sizes and the resulting HTML is quite different from the video you uploaded, since the first thing I see are the black buttons and the animation seems to work as expected.

 

Sorry but with these limitations there is not a lot that we can do to help you.

 

If you keep running into issues please see if you can create a codepen example with just the part of your project that is not working, no need to upload your entire project to codepen at all.

 

Happy Tweening!

[MarioBros]

Hi, 

thank you for trying to solve this problem.

 

Animation(under black buttons) on stackblitz sandbox is working as expected but it's not working on mobile devices as you can see on the video recorded on iPhone(empty space under black buttons). 

 

Website

 

 

 

 

 

 

 

 

 

 

 

[Rodrigo]

Hi,

 

Yeah, but we can't debug live sites, is impossible for us to test and check the code in there, plus the demo that you provide does work and it doesn't reflect your real scenario. So anything we check in the demo, might not be portable to your actual project.

 

Finally is worth noticing that the animation doesn't work neither on an android phone, but just out of curiosity I scrolled all the way to the bottom of the site and then when scrolling up the elements were there. I strongly suggest you to use markers, the first thing you should try when debugging some ScrollTrigger issue is set the markers to true and give the ScrollTrigger instance that is not working a specific ID in order to properly identify it. Oddly enough this does work as expected in a desktop on a screen resized to a phone scale, so there is something else here at play that might not be GSAP related, because this doesn't seem to be related with the screen size or the OS, but something else that is detecting whether or not you are using a device.

 

Hopefully this helps.

Happy Tweening!

[MarioBros]

As you mentioned something else must causing the problem and you were right. I commented out components above gsap animation and there was a problem with the first animation(sliding words left and right) as the div's width of some of them were causing overflow-x so I changed it and now gsap animation works! 

 

Thank you!