Home > Net >  Autoscrolling text animation in CSS not going all the way
Autoscrolling text animation in CSS not going all the way

Time:05-16

I'm trying to scroll some single-line labels in a single-line fixed-width container.
What I've tried so far is:

  1. Create a container with fixed dimensions.
  2. Place a scrollable container inside and attach the animation.
  3. Place the labels.

The animation partially works, but the scrolling doesn't go all the way to what is configured (translateX(-100%)).
The overflowing part (green color in codepen) that exceeds the fixed container width is ignored.
I've tried various display and flex field combinations, but noting.

Here is a codepen sample.
https://codepen.io/efthymiosks/pen/QWQGVGg

CodePudding user response:

The issue is that 100% is the size of the element, not the content. What I mean by this is because the content overflows the element, 100% only refers to the visible width of the container.

You need to change 100% to something else such as 150%. Unfortunately, this means that you need to know the width of the contents before. The only other way that I know of is using JavaScript to calculate the width of the contents.

Codepen

  • Related