Get width of text to use in CSS scroll animation

Question

I have a text animation that scrolls text from left to right and back so the full text can be seen and isn't cut off. I have an example below:

.selectionContainer {
  max-width: 150px;
  overflow: hidden;
}

.link {
  white-space: nowrap;
  display: inline-flex;
  overflow: visible !important;
}

.link_animated {
  animation: backAndForth 5s linear infinite;
}

@keyframes backAndForth {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(-50%);
  }
  55% {
    transform: translateX(-50%);
  }
  90% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

.HS-Silk-Image {
  height: 30px;
  width: 30px;
}


  
    
      
        Monday
        2022-06-20
      
      
    
    
      
        Argentina Liga Profesional de Futbol
      
    
    
      
        20:30
      
      
        
      
      
        Godoy Cruz v Defensa y Justicia

This works fine, however I need the translateX amount in the animation to be based on the width of the text, otherwise the text scrolls too far and shows whitespace.

Perhaps I need to use a bit of JS to get the width of the text or perhaps there is better way to get what im trying to achieve in CSS?

user_7919293 · Answer

.link_animated {
    animation: backAndForth 5s linear infinite;
    display: flex;
}

Try this, although there is still a little offset to the right

user_10867454 · Answer

The amount that you need to move the text is a function of both the width of the text itself and the width of its container.

The amount that sticks out on the right hand side is (width of text - width of container).

We can use translate(100%) (or =100%) to move the text by its own width. And we can move the text to the right by the width of the container with left: 100%.

Note the text element and its container need to be position relative.

.selectionContainer {
  max-width: 150px;
  overflow: hidden;
  position: relative;
}

.link {
  white-space: nowrap;
  display: inline-flex;
  overflow: visible !important;
  position: relative;
}

.link_animated {
  animation: backAndForth 5s linear infinite;
}

@keyframes backAndForth {
  0% {
    transform: translateX(0);
    left: 0;
  }
  10% {
    transform: translateX(0);
    left: 0;
  }
  45% {
    transform: translateX(-100%);
    left: 100%;
  }
  55% {
    transform: translateX(-100%);
    left: 100%;
  }
  90% {
    transform: translateX(0);
    left: 0;
  }
  100% {
    transform: translateX(0);
    left: 0;
  }
}

.HS-Silk-Image {
  height: 30px;
  width: 30px;
}


  
    
      
        Monday
        2022-06-20
      
      
    
    
      
        Argentina Liga Profesional de Futbol
      
    
    
      
        20:30
      
      
        
      
      
        Godoy Cruz v Defensa y Justicia

Get width of text to use in CSS scroll animation

2 Answers