[Bug] Scroll pining example in docs not working for mobile breakpoints

[Luiz Fernando da Silva Cieslak]

1. Describe the bug

Hi! I was browsing the docs and notice the scroll pining looks really good but it the horizonal image gallery breaks in a mobile breakpoint.

I did some digging and found out it's something related to the sticky position for the elements and a overflow-x attribute setting but haven't got in a setup where it works for mobile.

I understand this might not be an issue with the library per se but I wanted to know if anyone got a working setup for scroll pining in mobile?

2. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/motion-one-pinning-rwiuju?from-embed

3. Steps to reproduce

Steps to reproduce the behavior:

1. Open the sandbox
2. On the top right, click in the "open in a new window" button
3. In this new window, change the breakpoint to a mobile one and refresh
4. See error

4. Expected behavior

No horizontal scroll

5. Video or screenshots

You can open the sandbox URL and you see something like this:

6. Browser details

Tested in Chrome and Firefox

[Luiz Fernando da Silva Cieslak]

I could fix it by adding a overflow-x: clip into the article tag: https://codesandbox.io/s/motion-one-pinning-forked-p4n5kc?file=/src/styles.css

It seems the https://motion.dev website is not open sourced but I'd happy open up a PR to change the codesandbox link.