Horizontal Scroll

Scroll.jsx

const HorizontalScroll = styled.div`
  position: relative;
  overflow: hidden;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));

  div {
    width: fit-content;
    display: flex;
    position: relative;
    transform: translate3d(var(--move-initial), 0, 0);
    animation: marquee 5s linear infinite;
    animation-play-state: paused;
  }

  @keyframes {
    0% {
      transform: translate3d(var(--move-initial), 0, 0);
    }

    100% {
      transform: translate3d(var(--move-final), 0, 0);
    }
  }
`

UseScroll.jsx

        <HorizontalScroll>
          <div>
            Insert the Content you want to scroll
          </div>
        </HorizontalScroll>