Scrubbing an Image coming from the right towards the left creates "Extra spacing"

[Beaowulf]

Example Code below:

 

gsap.from("#sect2-main-videoplayer", {
  scrollTrigger:{
      trigger: "#sect2-bottom",
      toggleActions: "play none none none",
      start: "-50% 50%",
      pin: true,
      anticipatePin: 1,
      scrub: 0.5,
      ease: Power1.inOut,
  },
  autoAlpha: 0,
  duration: 3,
  x: 650,
});

 

Please see the screenshot below. Im basically trying to figure out on how to "animate" a div/image coming from the right side to the left (to its original position). Unfortunately it creates "Extra spacing" (lack of a better word). If you see on the bottom of the screenshot I am able to now scroll towards the right side of the screen.

 

 

Is there anyway I can adjust / fix this?

 

Note: I have added one of your codepen examples I found online. I think it illustrates the same issue im having. It creates spacing that I am able to scroll on the X axis and "breaks" the screen abit.

 

See the Pen KKzoVGd?editors=0010 by GreenSock (@GreenSock) on CodePen

[akapowl]

 

Hey @Beaowulf - welcome to the forums.

 

This happens, because the headlines do not have a fixed width applied, so they stretch across the whole parent element. 

When translating them to the right on the x-axis, they will overflow the window, and the browser shows the horizontal scrollbar by default, because some content is out of viewport (the same goes for content, that is initially out of the viewport and about to be translated in, of course).

 

Simply set overflow-x: hidden to your body (or whatever other element neccessary), and the browser won't show that scrollbar anymore. Also, if you want to make sure, that users are not able to swipe around on the screen to the right, when content is overflowing on mobile devices, I think it would be neccessary to set a fixed width on your body element, like 100vw, for example.

 

See the Pen 6e5a9f9976f8af53458910f30b036219 by akapowl (@akapowl) on CodePen

 

 

 

[Beaowulf]

Thanks so much for the fast reply @akapowl