Animate element offscreen loop with sticky and overflow-x:hidden

[arfdev]

I have element (a plane) positioned in the middle Y axis of the page which is set as sticky. I need to animate (using a motion path) this element across the screen X axis from offscreen left to offscreen right.
The problem I am experiencing is that the offscreen positions are creating a hroizontal scrollbar in the browser (allows scrolling to overflow positions). 
If I add "overflow-x:hidden" to hide and prevent the horizontal scrolling it breaks the sticky positioning. I tried overflow-x: clip but it did not eliminate the scrollbar.
Is there some method to animate element across the screen beyond the viewport width without the triggering the overflow on the x axis?

[GSAP Helper]

Hm, I'm not sure why overflow-x: hidden would break sticky positioning. It's pretty tough to troubleshoot without a minimal demo. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Did you try putting your element into a container <div> that has overflow-x: hidden? In other words, you don't need to do it on the page itself necessarily. 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). 

 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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