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

[@nanonkay5669]

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

[@Kronical_Lpd]

get undelayed

[@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!

[@slayingthedragon]

Thank you! I agree with using variables, not using them was only for the purposes of keeping this video simple and easy

[@ZakariaTEKNIS-gg4xf]

I love your suggestion, except I don't fully understand it as I'm still a CSS beginner. I'm working on a logo marquee with over 24 logos and would love to implement your soultion if you could explain how it works, thanks!

[@ahnor001]

​​​​@@ZakariaTEKNIS-gg4xfI think they mean making a local variable for each item ex .item8{ --n: 8; } and move the animation-delay to the main .item class & change the minus part to be (8 - var(--n)), but for super dynamic way you cnn make a dynamic css variable declaration using the following 2 lines in js → document.querySelectorAll('.item').forEach((item, i) => { item.style.setProperty('--n', i + 1); });

[@ZakariaTEKNIS-gg4xf]

@@ahnor001 Thank you for your explanation, I implemented your solution using CSS only and it WORKS, Except now I've ran into another problem, the marquee contains 24 logos, is there a way for it to display only 8 at a time? I did solve it using : @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-100%); } } But I had to write all 24 logos 3 times for it to be smooth, I was wondering if I could implement this solution but only displaying 8 at a time, thanks again for your time.

[@ahnor001]

​​​​​@@ZakariaTEKNIS-gg4xf → 2ways → let me summarize to you how code work regard the video 1st, this code make all the items on the same screen even if we don't see it but they all there (1hidden-6visible-1hidden), & when an item reachs it's ending it restart from the beginning with no delay, as delay only applied once at the start of animation, & keyframe is how animation moves, that means when increase the items numbers you should increase the left property [what?!] Yep, actually the left value here create the row of our rectangles & you remember that this animation make all rectangles here at once so you need to make super huge row that contain all the 24 items, so the answer is changing left to max(calc(200px * 24) , 100%) & then you increase the duration as now the items move on super sonic speed moving 800px in 1s, so change duration to 90s [reserve the ratio 8items/30s], then change the delay to work with what we made so far calc(90s / 24 * (24 - var(--n)) * -1) again the delay here means a starter position so every item on the page exist in different place at the animation start, then moves according to the keyframes left & loop Solution-1: left: (calc(200px * 24) , 100%); animation-duration: 90s; animation-delay: calc(90s / 24 * (24 - var(--n)) * -1); But this solution have a problem that all the items moves at the same time making animation of 24 items , this may cause a some problems with small devices or any device with low gpu [create lag] 2nd way: [Make a still phase] If you noticed the above solution the items actually not visible until they reach the wrapper width due to overflow hidden, & wrapper only 33% of there road so for our 90s only visible 30s so you can make a keyframe for that Solution-2: left: (calc(200px * 8) , 100%); /* 8 instead of 24 */ animation-duration: 90s; /* same 1st */ animation-delay: calc(90s / 24 * (24 - var(--n)) * -1); /* same 1st */ @keyframe slide { 0%, 66%{ left: max(calc(200px * 8) , 100%); } 100% { left: -200px; } } Would suggest this solution over the another & the math is simple active duration is 30s & loop duration is 90s so the active period should be 33.3% or about 34% this is more ergonomic to the gpu, & give a smoother website if you have another animations & a good concept for you to know. Review: left: space between items, overlap, gaps duration: speed delay: you are making a time jump, hey item2 jump to the 6/8 portion of our timeline[keyframes] so you vanish after 2 boxs & return to our start keyframe, & that's the equation clac inside animation-delay, calc((itemN - index) / itemsN * sec * -1), means the portion so in our example (8 - 2) / 8 = 6/8 portion, then we multiply it by our timeline which is our duration to make time jump, then we multiply by -1 to make it premove instead of delay For advance lvl recommend using variable for items[rectangles] count inside :root that be declared by js, & rectangle width variable :root, and duration variable :root

[@alessandrocaluori9868]

You can add this to stop the whole animation 😊: /*Select all the .items inside the wrapper when it's hovered /* .wrapper:hover .item{ animation-play-state:paused; }

[@dietrichlee518]

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

[@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.

[@BrodySmalley]

I tried re-working this through transform, but translateX(100%) seems to only move the object 100% of its own width, not the width of the parent. I tried 100vw, but that didn't work either and if the marquee parent wasn't the full width of the screen that wouldn't be good anyway. Do you have an any ideas?

[@FishTechX]

@@BrodySmalley Kevin Powell has a video utilizing transforms. This would give you a better idea as well as a clearer explanation that I could give you. Search "Kevin Powell marquee"

[@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); } }

[@kollabor8]

Thank you for adding that, was thinking as Slayer was going through the content, how to refactor

[@QuintessentialDio]

@@kollabor8 Glad it helped.

[@arvingardon]

im using sass but i used root is it ok?

[@QuintessentialDio]

@@arvingardon root? elaborate

[@Ezekiel889]

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

[@bardhan.abhirup]

Hours in the age of AI? Surely not!

[@divyasoni3834]

thanks man i was also stuck on thiss , aloota help

[@abhayag0]

Dude , .... Thanks 🤒👍🏻 I too wasted my hours

[@abhayag0]

​@@bardhan.abhirup 😂😂

[@Ezekiel889]

@@bardhan.abhirup believe me, first thing i tried was to ask ChatGPT... it couldn't get this error...

[@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. 🙏

[@marcoeliu5738]

Me too

[@okon1624]

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...

[@dripcaraybbx]

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

[@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.

[@michaelkrailo5725]

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.

[@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!

[@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.

[@nicolasmayorga8288]

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.

[@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 lotttttttttttt of time. I wish I was not dumb enough to just think this way one, but thank you master 🙏🙏

[@AntiPolarity]

just bought the CSS cource. Waiting for cource on React. I've been looking for good explanations of flex and grid for last 2 weeks and all explanations were realy clunky and complex. And then YT sugested me your wideos on the topic. And it's suddenly SO MUCH easier!

[@lcsga7683]

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)

[@kaustavroy6542]

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.

[@shaikdilkhushsyedbabasaifu3361]

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

[@eugenesoch]

Thank you, this is amazing! Now I am going to use this and implement this to work with Webflow's CMS collection :)

[@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

[@MauricioVonB]

Nice video! you could add style="--i:0" , style="--i:1" and so on to every html box item, and then add a delay property with the multiplier var(--i) to avoid polluting the css with a lot of items

[@nicholarucitadhamma6000]

CMMIW. I believe you can alternatively switch from multiplying by (8-x) * -1 to just multiplying it by (x-8) instead. The two have equal values by the distributive rule of (a-b) = -(b-a) So (8-x) = -(x-8)

[@LeMonCatCode]

This effect is very useful, especially for banner announcements below the navigation bar, for events, announcements, and notifications.❤🎉

[@Alphaship]

For that, there is also a non-void html element named marquee, mostly used for text

[@webbae]

Great walkthrough and thanks for the feature at 00:06!

[@dem0niker136]

This was so informative and cool. Crazy how people's mind works. I wish I could come up with stuff like this.

[@Svlkaa]

I love you bro. You are the best! I've always wanted to learn html, css, javascript and you are helping a lot! I'm 7-th grade now and when school ends I am gonna buy your course. Love your work, keep it up!

[@PicSta]

Hey, it's a nice tutorial. Very similar to an approach I've seen on Kevin Powell's channel. Can't say what is different, but your version works as fine as his.

[@ashutosh_tiwari]

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

[@iankaranja7765]

Negative animation delay would have been clearer if the divs were uniquely identifiable eg if they had number labels. Otherwise great video.

[@mantas9827]

Really well explained, slowly, clearly, good job.

[@edgeeffect]

This is great... I don't actually want a marquee... but there's a lot of useful information in here for what I do want.

[@AkiHan.12_369]

15:00 Basically, the reason for using -1 is to make the calculation negative without changing the value of the calculation itself. Using -1 is the best option to achieve this because it ensures that the calculation remains the same while the negative value causes the animation to start instantly.

[@reactandy]

wait till you hear that (b - a) is the same as (a - b) * (-1)

[@FayzKha]

I love the way you teach, please post a video where you create an interesting landing page with grid flex layouts and animations, esp scroll animation.

[@tonymorin6308]

A very useful video, lots of use-cases for this, thanks STD, you slayed it 🐉

[@mariaali9935]

You are a excellent teacher. Can you please make a Video about dom manipulation on javascript please 🙏 please 🙏. And if possible create complete javascript series. Your teaching style is tremendous 😊

[@ayoubsen9412]

I think i get the general idea? however its still confusing how you'd do this for "dynamic divs", when you don't know how many divs youd have (showing icons based on how many u get back from the server for example)

[@globalsurfer]

My brother, let me just say that you are not just an expert but in my opinion, you are the best in the world. From Durban, South Africa. All the best man...

[@Random-bw3rt]

Hey, the videos you create are really awesome! ❤

[@AkiHan.12_369]

it was so cool simple clear and smooth that was awesome u made some painful things easy for me thanks for upload👍

[@Hsj9e4653]

Who would’ve imagined we’d live long enough to see a overcomplicated

[@bowbowbow22]

kinda funny because growing up marquee was a html option that worked very simply.

[@AlThePal78]

I remember when the element tag Marquee would work everyone would use that instead in the 90s

[@AlThePal78]

why don't we use the role=marquee they supposingly have it

[@404-not-found-service]

Thanks, this is exactly what I need! I hope more videos like this I leave like and sub

[@user-lt9mu2ww2h]

Keep it up bro new subscriber👍

[@JoyHints]

This is a good solution if you know how many divs will be present. I can't imagine having to write css for 20 divs

[@jbink6612]

stunning and simple AF

[@rtx50700]

Simply Awesome...❤

[@strategicgod3004]

I really like your videos , simple to understand and really good . Also got a question , do you only use css for styling or use Tailwind or bootstrap ect ... if yes i would love some tailwind tutorials 😅 ❤

[@senseislade]

finally found the right video! thx ramzi

[@NicoHeinrich]

Simply amazing! You must be a genious!

[@Twg_14]

Excellent video..!!!, thank you for your knowledge and ideas

[@mrunknown3855]

Plz upload javascript content also..as your content is too gud to understand...

[@martygo]

Awesome video. Congrats.

[@pdk_1.0]

Thank you so much

[@immunity18]

You should also consider device screen width in the calc function because in mobile this will go veeerryy slowly

[@bachirghouri7285]

You’re fucking great brother, thank you for sharing this

[@xiztspike81]

thanks so much! 🤩

[@anastasiats9793]

amazing, thank you

[@thebilalafsar]

Bro, please make a detailed tutorial on semantic HTML elements and explain when and how to use them correctly😠😭

[@alexchon3258]

Hey man! I just want to say I love you tutorials. On your website, I can see you are working on a course on JavaScript. When do you think that will be made ready?

[@slayingthedragon]

Thanks! Aiming for Autumn

[@alexkodr]

Nice approach. Be better if it worked with dynamic items. Rather than a fixed amount. Also adding animation pause on hover.

[@royandescartes]

the master of CSS

[@mujakapasa]

Perfetto, I love the approach!

[@NurioonSoftware]

Nice video bro 👍

[@sale7680]

Well done

[@Parzula]

I subscribe you because of this video. The explanation is cleaner than a bald man's head

[@musafeerr_inc]

Thanks.

[@YossiAmsalem]

Great! Thank you

[@jlonso1840]

godly

[@alexfurtado1759]

Hi slaying, How are you? How about the Full Css course? Any release date? I am waiting for that! Thank you, From Brazil ❤

[@JosephVasko]

instant subscribe

[@funnynpcname]

may you do a CSS tutorial

[@unknown-frames]

❤just awesome. Thank you

[@Biranavan]

ty

[@freshkumar1557]

RESPECT BRUV 🙏

[@masdd7809]

Cool

[@CharlesPercival-e5b]

Great video! Just wondering if there are any amendments that can be made to evenly space each item in the marquee when they have differing lengths since I need to use text rather than a box and it looks janky.

[@ZakariaTEKNIS-gg4xf]

Great video as always, but what if you had multiple elemnts and only wanted to show a few of them at a time?

[@tejasshekar]

To people who have come to the comments section see what others are saying, DONT CONFUSE THIS WITH THE INFINITE SCROLLING IN WEB APPS LIKE ON TIMELINE AND HOMEPAGE of many web apps. THIS is an endless scroll with a fixed set of elements.

[@laptoprelaks]

will you do you JAVASCRIPT course? i swear if you js course have this same quality of teaching i will buy your js course

[@abdulwaheedorg]

It's really amazing. Is there any solution of having same amount of gap between slides? When you make it full screen, the gap between divs increases

[@reactandy]

adjust the wrapper's max-width

[@cotigasenegal]

A l'heure ou l'on conçoit tout en responsives (sans parler de dynamisme des éléments) ce code est tout simplement impossible à mettre en production. Ne perdez pas votre temps et utiliser du JS pour des "marquee" responsives et dynamiques 😋

[@mr.fabian8471]

Thnaks

[@YossiAmsalem]

This is great idea, i want to adapt this to dynamic number of logos from my database. i changed all the math element to be variables but the problem is the need to adjust the "left" property in the keyframes so logos won't be on each other. do you have any idea to overcome this?

[@sicfxmusic]

Do anyone remember the tag from the 90s?

[@irfansaeedkhan7242]

but will it repeat the same element infinitely ? which is the real requirement

[@osamaansari2174]

please create a video on javascript crousel

[@lerisa_ch]

I have this slight problem when the list ends theres always a gap before it goes back to the starting list

[@spdomingoo]

How does this work if the images have different widths? Say displaying a carousel of mobile screens and desktop screens, they can have the same heights but how would it work with width?

[@omidcrazy]

Please Make More Videos About JavaScript 🙏 , Thanks!

[@stakedesigner]

Look good, but it now works for dynamic content

[@febryanvaldo]

Hello, i got a question, It's like the gap is predefined, when it gets on the large breakpoint (>1980px), the gap is wider, but when it gets on smaller breakpoint (mobile) the gap is smalller. I want to change the gap for each item, anybody know?

[@Sujalchaudhary004]

Hey can u suggest me how much time should we give on front js❓❓❓❓

[@abdulwaheedorg]

Is there a way to stop scrolling on hover?

[@slayingthedragon]

.wrapper:hover > .item{ animation-play-state: paused; }

[@sssrikanthhh]

make videos on JS as well

[@mirjalol49]

Make more vid about Js

[@sleeklooking]

is the same solution possible with variabled widths?

[@LougenneCastillo]

Lun Dev has a cooler solution on this, without a long list of code.