ScrollTrigger Horizontal scroll not working in Mobile devices (Small screens)

[Atharv varshney]

Hey, what's up?

 

I have created a website https://jimny.vercel.app/ where I used a ton of ScrollTrigger animations. All went perfectly, this forum helped me a lot. 

I have encountered a problem which is very common among the people in this forum. The horizontal pinned scroll created using ScrollTrigger is overflowing the viewport width in small (mobile) devices. What I want is obviously, the scrolling section should not overflow the width.

I have tried adding a media query where I set the width of wrapper div as 100vw and overflow-x  as hidden, but still it didn't worked. I have added a codepen, Please help me fix it. I really appreciate your suggestions.

Thanks a lot,

Atharv varshney

See the Pen jOQEGZM by Atharvvarshney (@Atharvvarshney) on CodePen

[Rodrigo]

Hi,

 

I just wrapped that section around an element with overflow hidden and it seems to work as expected on my devices:

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

 

Here is the example without iframes:

https://cdpn.io/pen/debug/YzRPrdb

 

Finally the box-sizing property, ideally should be global and not just applied to the body element:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Hopefully this helps.

Happy Tweening!

[elegantseagulls]

#designExt {
  max-width: 100vw;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
}

Updating the css to this seemed to work for me, unless I'm misunderstanding your question.

You shouldn't need to limit the overflow on the body.

[Atharv varshney]

Thanks for the solutions, both of them perfectly work in my case.