Horizontally-scrolling text shows scoll bar during scroll

[marcojhb]

Hi all,

 

Very new to GSAP here. I've almost got this animation covered, except that during the scrolling phase, a scroll bar appears. I've tried multiple variations of overflow: hidden, but nothing seems to work. Essentially I'd like to achieve what I've got at the moment, but without the horizontal scroll bar.

 

Also, if my GSAP could be improved in any way, that would be great too!

See the Pen podvVxZ by marcojhb (@marcojhb) on CodePen

[OSUblake]

Welcome to the forums @marcojhb

 

You're probably going to need to add a wrapper container with overflow set to hidden, so you're going to need to rework your layout and CSS a bit.

 

Also, you should never use an all transition on an element that GSAP is going to animate. That's why your animation isn't smooth. 

 

.scroll-text {
  margin-top: -100rem;
  position: sticky;
  top: 0;
  margin-left: 60rem;
  white-space: nowrap;
  z-index: -1;
/*   transition: all 0.5s; */
  will-change: transform;
}

 

[marcojhb]

Thanks for your reply! I created the .scroll-text container - do you mean I need to add in another container over that?

[OSUblake]

Yes. I can see the scrollbar even if I remove ScrollTrigger from the equation, so it's just a layout issue. Your use of margins is probably going to mess it up. Maybe consider using a fixed container with a width of 100% and overflow-x set to hidden.