2 

.marquee {
    height: 100%;
    width:100%;
    overflow: hidden;
    position: relative;
}

.marqueeContentContainer {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: space-evenly;
    height: 100%;
    -moz-animation: scroll-left 20s linear infinite;
    -webkit-animation: scroll-left 20s linear infinite;
    animation: scroll-left 20s linear infinite;
}

.marqueeContentContainer2 {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: space-evenly;
    height: 100%;
    -moz-animation: scroll-left 20s linear infinite;
    -webkit-animation: scroll-left 20s linear infinite;
    animation: scroll-left 20s linear infinite;
    animation-delay: 10s;
}

@keyframes scroll-left {
    0% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}
<div class='marquee'>
  <div class='marqueeContentContainer'>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
  </div>
  <div class='marqueeContentContainer2'>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
  </div>
</div>

I'm trying to create an infinite scroll for stock feeds but unable to get them side by side. Here is what I currently have and it's code.

Error here

So you can see how the two containers are below eachother but in the correct spot in regards to timing

Improve this question
3
  • 1
    Could you make your code into a working snippet? It's easier so see what's going on - especially in relation to the timing. Thanks. Commented May 15, 2021 at 6:52
  • I added the snippet, lmk if you think of any solutions. I'm really bad at css lol Commented May 15, 2021 at 16:32
  • Does this answer your question? Pure CSS Continuous Horizontal Text Scroll Without Break Commented May 15, 2021 at 16:45
Related questions
95
Infinite scrolling with React JS
1
React scroll nav
0
Unlimited horizontal div scroll - React/CSS
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.