Heya,
I’ve read several of the threads about marquee/infinite loop scrolling but none seem to deal with a very long thread of words. There are several of these on the site i’m building now. Here are my problems:
-
the line of text is so long that I’ve had to play around with the width of the wrapper, setting it to ridiculous numbers like 410% to ensure that the two text blocks (set to display inline) inside the wrapper have space to exist next to each other.
-
the problem happens when i pull the screen size in or change breakpoints. That wrapper now overlaps itself (with text on text) or creates a second line of text below itself.
I’ve seen countless videos on how to do marquee scrolling, but they use two words or a short string of words to demonstrate the concept. That makes the animation very easy because when one is aligning the second copy to the margin, it just a matter of pulling the setting slider a tiny bit to one side. My animation settings are ridiculous, like: 0px/-3295px/0px, which works great at the large breakpoint, but if I pull in the edges of the designer even a little bit or change breakpoints, it gets messed up.
I’ve set the sections to hide the overflow, I’ve made the container 100vw, and the main wrapper is set to flex. Nothing seems to fix the problem. Do I need to add some custom code?
If someone could take a look at my build and give me some advice, i’d appreciate it greatly.