Marquee

Animation

@keyframes scroll-up {
  0% {
      -moz-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);
  }
  100% {
      -moz-transform: translateY(var(--cell-move-distance)) translateY(-100%);
      -webkit-transform: translateY(var(--cell-move-distance)) translateY(-100%);
      transform: translateY(var(--cell-move-distance)) translateY(-100%);
  }
}

@keyframes scroll-left {
    0% {
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -moz-transform: translateX(var(--cell-move-distance)) translateX(-100%);
        -webkit-transform: translateX(var(--cell-move-distance)) translateX(-100%);
        transform: translateX(var(--cell-move-distance)) translateX(-100%);
    }
  }
                

.marquee-cell {

  background-color: var(--accent-color);
  width: auto;
  height: auto;
  transition: all .5s;
  padding: 1rem;
  cursor: pointer;
  &:hover{
    background-color: transparent;
  }


  &.horizontal{
    position: absolute;
    width: fit-content;
    white-space: nowrap;
    top: 50%;
    left: 100%;
    font-size: 25vh;
    transform-box: border-box;


    &.started{ 
     animation: scroll-left var(--cell-text-count) linear var(--cell-iteration);
    }
  
  } 

  &.vertical {
    position: absolute;
    width: fit-content;
    height: fit-content;
    white-space: wrap;
    top: 100%;
    left: 50%;
    font-size: 25vh;
    //transform: translateY(100%);
    display: flex;
    flex-direction: column;
    span {
     
    }
  
    &.started{ 
      animation: scroll-up var(--cell-text-count) linear var(--cell-iteration);
    }
  
  } 

}

return (
    <div
      ref={nodeRef}
      className={'marquee-cell  horizontal started'}
      style={{
        "--cell-iteration": 'forwards',
        "--cell-text-count": '{3 + textValue.length * 0.2}s',
        "--cell-container-width": '{containerWidth}px',
        "--cell-move-distance": '-{
          Math.ceil(textValue.length / 5) * containerWidth
        }px',
      }}
      key={'marquee{index}'}
    >
      {textValueArray.map((char, i) => {
        return <span key={'char2{i}'}>{char}</span>;
      })}
    </div>
  );