arfdev Posted December 20, 2022 Share Posted December 20, 2022 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? Link to comment Share on other sites More sharing options...
GSAP Helper Posted December 20, 2022 Share Posted December 20, 2022 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now