ScrollTrigger issue on mobile in react

[wtartlez]

Hello there,

I created some scrolling animations with ScrollTrigger in a react app, while it works fine on desktop and mobile emulation in the DevTools, the animation won't play at all when viewing the page on a mobile device. Another thing I noticed is that the markers are kinda messed up, but the animation still works on desktop after turning the markers off.

Here's the minimal demo on codepen. I've tried googling with keywords like "scrollTrigger not working on mobile" but couldn't find anything that seemed related to my problem. Still learning react and GSAP, so maybe I missed something there. Would really appreciate for any help!

See the Pen wvbPVXv by tartle120 (@tartle120) on CodePen

[GreenSock]

Notice you've actually got TWO scrollbars on the right side. This looks like a CSS issue in the way you set it up. Just remove the overflow-x: hidden from the html element. 

body { /* NOT html, body */
  font-family: "Rock Salt", cursive;
  width: 100%;
  height: 100%;
  color: #fff;
  overflow-x: hidden;
}

Does that clear things up? Basically, your scroller wasn't what you thought it was. 

[wtartlez]

Thank you so much for the help!!
The bug is gone after removing it, looks like I had a misunderstanding with the overflow property. 😅