You Don't Need JavaScript For This - CSS ONLY Infinite Scroll

Examples from beginning of video:

Over the span of your entire online history, you’ve probably visited websites with this cool looking animation. These animation are called a marquee, and all it is, is elements laid out horizontally and that scroll infinitely. On the surface this seems like a pretty simple animation, however if you’ve ever tried to build this yourself, than you know that it’s deceptively difficult, or at least, difficult enough that you felt the need to use JavaScript. And actually, most tutorials you’ll find on YouTube and on the web in general about this animation has you using JavaScript. However in this video, we’re going to be building it with CSS only. So no JavaScript, only CSS.

[nanonkay]

I could be wrong, but an interesting way to think about negative delay is that a negative delay is actually a head-start (i.e. the opposite of delay). So a delay of -10s means the item will have a 10s head-start into its animation. And that is why the item would start in a different position, because it is starting where it would've been after 10s have passed into its animation

[MineGAGGER]

Brilliant solution! I have looked for this and not seen this solution as you mentioned. You can make it a lot cleaner using CSS variables. On each item, instead of .itemn class in the HTML, put a style attribute:

style="--n: 1"

For each value 1, 2, 3... Then there is no need for all those CSS classes on .item just put

animation-delay: calc(30s / 8 * (8 - var(--n)) * -1);

Thanks for this!

[dripcaraybbx]

Never thought I'd see "marquee" and "HTML" in the same sentence again

[Ezekiel]

a tip for all the new programmers out there( like me ) that are trying to replicate this code, but the animation delay doesn't work: DON'T FORGET TO PUT SPACES BETWEEN EVERY ARITHMETIC OPERATOR IN THE CALC() FUNCTION. I wasted hours to figure out what was wrong T_T

[FishTechX]

This is a great solution. That said, as it stands now with absolute positioning, the browser is working a little more when it comes to rendering and the constant repaints. For optimal performance, I suggest approaching this with transforms. This will eliminate the constant repaints.

[imredoyyy]

I swear yesterday I was wondering how to add those fade in and fade out effect in this type of animation. And today you uploaded a video and explained how to do this. 🙏

[javasquid]

Thank you for the excellent tutorial! As a motion designer familiar with After Effects and CSS, I really appreciate the breakdowns on how you constructed your project. The negative delay is genius. Well done!

[QuintessentialDio]

Good video as always Slayer. For sass lovers, u can use this:

$item-width: 200px;
$item-height: 100px;
$item-duration: 30s;

.item {
width: $item-width;
height: $item-height;
background-color: purple;
border-radius: 6px;
position: absolute;
left: max(calc(200px * 8), 100%);

@keyframes scrollLeft {
to {
left: -200px;
}
}

animation-name: scrollLeft;
animation-duration: $item-duration;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

@for $i from 1 to 8 {
.item-#{$i} {
animation-delay: calc(#{$item-duration} / 8 * (8 - #{$i}) * -1);
}
}

[IssaAbbani]

Just when you think you understood it all... something new comes up. That's both the most beautiful and frustrating part about programming. You truly can't know it all in this field.

[michaelkrailo]

Mind blown. That is absolutely amazing how it all works mathematically to produce the marquee effect. It's very simple to add in custom properties for the marquee timing and number of items. Fantastic.

[dietrichlee]

to think after 2 years of working with CSS i only just discovered negative delay. The way you explain too is just perfect. Even a beginner will understand. Thanks bro

[lcsga]

Instead of adding delays for each item, you should add style="--pos: 1", style="--pos: 2", etc on them and use it in only one calc in .item itself 😉 (You could assume the number of items is dynamic, si instead of a hard coded 8, you could add style="--count: 8" on the list and also use it in your calc)

[okon]

so much like your explanation, very concise, your goal is to teach, not like most people who make video just for the view.
not covering a topic of 1 hour for 5 minute.

thanks so much...

[nicolasmayorga]

Just discovered this video and you won't believe it but I needed this without knowing I'll need it in the future. Amazing explanation love the calm way you explain and thanks for explaining everything, i.e the max function i had never heard of it and you explained. Really happy to found and I really appreciate you for this content.

[shaikdilkhushsyedbabasaifu]

thanks man another way of doing this infinite scroll really made me think CSS have more potential too other than javascript.

[mimiokoi]

The first time I got into website development the first group project I did I was given this. I cried at some point. It looks easy but it's not.

[kaustavroy]

Dude u are a gem teacher.
I never seen such a brilliant explanation of the the marquee effect.
I always thought of js when dealing with this things which inturn requires dom manipulation hence effected performance. Thanks and subbed.

[HimanshuLilhore]

I feel so dumb right now. I had to do this same effect in my portfolio, I search a lot for it, everyone was saying make it with intersection observer, then i read it in detail, implement it in few places, the implemented in my portfolio, and the infinite scroll was janky, so i did some tricks to make it smooth, but then the performance of page was heavily affected, and all that work took me a of time. I wish I was not dumb enough to just think this way one, but thank you master 🙏🙏

[BrigliBushati]

At 12:00 there is no need to to copy paste a couple times that. Just add nth-child() and so on so no need to create the classes to the divs just make it wrapper:nth-child(1) and so on

[ashutosh_tiwari]

You are actually a good educator bro keep it up! ✨🥂