You are not only good at what you know, Mr. Powell, but you also know how to articulate what you know properly and, most importantly, in a simple yet fun way. Thank you for your work in the CSS community. I don't think it will be wrong to refer to you as the CSS King, I mean...
@KevinPowell this is great demo! I added this code to pause the animation on hover. .scroller[data-animated="true"] .scroller__inner:hover { animation-play-state: paused; }
This is really wonderful so user don’t have to “chase” the button on screen, especially if the animation is any faster than what Kevin showed in the video.
I was just looking for this kind of animation yesterday, found few solutions but neither of them with an explanation. Now I got the idea behind it and also the reason why my infinite scroll had this kind of "jump" between the first set of icons and the second. Thanks a lot!
@@webrevolution. I am making a meme video on America'a gender crisis. I got shocked when I saw multiple gender options on Netflix's software Engineer job application lol
The reason you can manipulate properties and attributes of elements created with JS is that a DOM element is just an object in JS, the difference is it does not have a context (like a parent element, etc.) before it's added to a document. Everything else is there as soon as it's created. You can even add event handlers and trigger events on it!
Thank you Kevin for this informative video. 2 years ago I had a requirement to implement an infinite scroll component to display brand logos. I searched in internet and youtube but never found a proper guide / implementation. If I had this video 2 years ago, it would have saved me a ton of efforts, time and stress.
you probably already know this, but you can shorten the gradient in the mask by using -webkit-mask: linear-gradient(90deg, transparent, white 20% 80%, transparent); so you don't need to write "white" twice
If you track the parent's width and the width of the children and put the `forEach` that adds items into a `while` loop, you can continue adding them until there are enough items to eliminate any gaps, regardless of the size and number of child elements.
can you share the code you mean? I have a problem when the items are not enough to fill the container. I want to duplicate the items before finish the first cicle.
The object returned from matchMedia has a "change" event, by the way. Using that, one can react to changing user (and emulation) settings without reloading the page.
I have been trying to do something like this for about a week now. Tried to use a queue for duplicating the items, tried all kinds of weird animations and nothing worked, you really saved me
Kevin, I've used clamp() for the column-gap value which allows me to have the scroller span any viewport width whilst keeping the column-gap responsive. I then added clamp() - with the halved values - to the calc() function. Works great! I was initially having a nightmare getting this effect to work properly until I came across your tutorial. Your solution using calc() with the translate and gap value to correct the animation glitch is brilliant. Thank you!
rather than adding the list individually within ul , u can create a variable with the list items and a function that concatenates a list with itself. Now within the ul tag, u can map through the concatenated list items (using the function so it doubles), and create a list tag for each.
Hey Kevin, once again great script, thank you! The moment I saw this idea I thought, "why stop with left and right?". I just played around with it, basically I duplicated the "scroll" animation, renamed it to "scrollv" and changed translate to translateY A CSS query to set the list elements to block when direction is up or down, a little CSS manicure and it works already! Currently I still have a small timing problem to fix, but I am so happy about this solution already. You just are the man!
So good, seeing the animation depend on "Reduce motion" not being enabled. And good to see `aria-hidden="true" `being added to the duplicated items, so a screen reader user wouldn't have to navigate through them. But what if the images were wrapped in links? The links would still be in the focus order so a keyboard user would still have to navigate through them all. At first I thought the solution would be to use the `inert` attribute instead of `aria-hidden`, making them both hidden from screen readers and non-interactive. However, that would prevent cursor/touch users from clicking on the duplicated links; awkward. The solution is to do what was done before `inert` was supported, add `tabindex="-1"` to the duplicated links. As long as we're thinking about keyboard users, how awkward is it to be focusing on links that are animating? That can be addressed by adding a couple of `:focus-within` rules, one to change the `overflow` from `hidden` to `scroll` and another for the `animation` property so it only animates when `:not(:focus-within)`.
I don't think I'd ever use something like this for content I expect the user to interact with. Carousels where the user has control are problematic enough, something like this that scrolls by sounds like a nightmare from a UX perspective, even for fully abled users using a mouse. That said, I love that you thought about it and came up with some valid solutions to make it work, because you just know a client is going to ask for that 😅
thanks for this amazing video Kevin. Loved how thorough the lesson was. I'm gonna customize and implement your technique in my University's final project.
Hey Kevin you are a star. This logo animation was exactly what I needed for my current project. I didn't know where to begin until I saw your UA-cam video. Thank you one more.
Hey! Firstly - absolutely love the CSS parts and the extra explanations as to why not to do it the other ways, e.g. by doubling the content. However, the JS is faulty. As in it works, but could be better. Doing a forEach there is wrong - other animated things may also want to know if prefers-reduced-motion is set to reduce and then you have to add more and more forEach's every time a new animated thing is used on the page. instead, it should be set on the body ( is too high and irrelevant, but is global enough to affect everything). This then means the same code is not repeated for each animated thing, but only once - on the window - making it more efficient and clean. Secondly, as the data attribute is redundant, attribute selectors are not recommended, it only affects CSS and not HTML or other JS logic, and it is a boolean flag, it would probably be better as a class that is added dynamically, rather than a data attribute selector. But, there was also some great JS - for example, the Array.from - I always forget this is a thing!
Hey @Labastidaa, I did the same thing! I am using this ininite scroll in my current React project, I decided to go with a separate CSS file for the component I have the scroller on. My only issue is is that the animation seems to work for me only when I hit save on my .js file. If I refresh the page then it all breaks and it does not look that pretty. Should I be adding some sort of hook for it? How did you get that .js file to mont every time you refresh the browser?
I have literally just struggled to build exactly this in a project. Now im going to have to go refactor it because your solution is so much cleaner and simple to what I did 😂
To improve JS part a bit, you could add all duplicate nodes to DOM in one go - by first creating a Fragment, appending nodes to it, and then appending fragment to scrollContent. Only one DOM modification instead of many, would save some milliseconds on initialization of this scroller.
Thanks for this tutorial Kevin! Now I have to go and change three logo scrollers on my current project because they all use duplicated content as a solution. It should help page load speed too.
you might also add the standardised `dir` attribute for RTL/LTR content flow to keep the internal order of things and the right to left animation. You then use that attribute for your CSS selector.
For sanity use --private-animation-duration , --scoped--animation-duration etc instead of underscores in CSS var names. You will misread over underscores , worse someone else definitely will. Causing a lot of headaches when one line-character is preceded by other line-characters. The tooling just isn't there to catch misspelling headaches like inline private underscore affixing in CSS. While underscoring has a history of in indicating private scopes in languages it's almost ALWAYS the first character simplifying tooling like syntax highlighting etc.
About ten years ago, a client asked for a website made in sections that had a side scroll. As much as I tried to convince them otherwise, I had to. It was a cool challenge. I used parallax in some parts. Usability 0, style 10.
awesome kevin, good job 👏 I'm currently working on a svelte project and need this option the the website i did it. with typescript , svelte , tailwind, skeleton + css. i really enjoyed! ❤
It’s crazy how similar this is to lua when dealing with roblox guis, I never noticed since I’m always in react but they use the same formatting for changing things 😂
Todays so called web developeres like to do `npm i easy-unlimited-scrollbar` it is good if you know how it works, but the problem is they don't know how that a particular library works or operate, they just want to copy the code. Agree?
I think I was too eager to write comment, but what came in my mind after watching is, it would be nice that the scroller could take text direction into account like dir ltr, rtl.
@Kevin Powell - I was about to literally message you asking for a tutorial on how to do something like this a couple nights ago. What a coincidence. Are you betting on any horses this week?
Nice video - would be good to show in vertical scrolling as well - I assume it would work the same way. Additionally be good if the scroll speed could work of the inner scroll width so you could get consistent speed regardless of content size :)
Think I would move the const scrollers inside of the addAnimation() function. Since you are not doing anything with it outside of that function. const is better than let in the cases you are using for. Also should do the top to bottom and bottom to top, but it should be just changing direction 90deg.
Good point about the const for the scrollers. Not sure what you mean by this though "Also should do the top to bottom and bottom to top, but it should be just changing direction 90deg."
Vertical instead of horizontal movement, which I would not think is common or that much more complex. Also, have a question on if you have fewer elements than the full width. Think it should still work though it might look odd. I also like the concept of INF scroll for a few things and might use it later.
"I help people fall deeply, madly in in love with css." You're succeeding every time! Thank you for all these gems!
80% of my CSS skills, I have learned from you Kevin, you're the best buddy, thank you for these amzing videos ☺
Same
LOL 80% of my CSS skills i have learn from THIS video!😂
You are not only good at what you know, Mr. Powell, but you also know how to articulate what you know properly and, most importantly, in a simple yet fun way. Thank you for your work in the CSS community. I don't think it will be wrong to refer to you as the CSS King, I mean...
I know You don't do a lot of JS video, but man, when you do, they are beyond awesome.
Thank You for the free knowledge!
@KevinPowell this is great demo! I added this code to pause the animation on hover.
.scroller[data-animated="true"] .scroller__inner:hover {
animation-play-state: paused;
}
This is really wonderful so user don’t have to “chase” the button on screen, especially if the animation is any faster than what Kevin showed in the video.
good job!
Great Job, I tried it and it's working fine.
Sir following you since the beginning of my coding journey. I'm not primarily a front end dev so your tutorials are a gem. Thanks for amazing content.
I was just looking for this kind of animation yesterday, found few solutions but neither of them with an explanation. Now I got the idea behind it and also the reason why my infinite scroll had this kind of "jump" between the first set of icons and the second. Thanks a lot!
Everytime I have a problem I realize you already had the same problem and overcame it. Thank you for lighting the way.
Couldn't be a more perfect timing for me. I've been thinking about adding such a slider to my art portfolio website. Appreciate your work man! ✨
Man? How dare you assume his gender?!!?!?!
Lmao. Just kidding. Totally agree.
@@webrevolution. I am making a meme video on America'a gender crisis.
I got shocked when I saw multiple gender options on Netflix's software Engineer job application lol
Literally same
You are not the only one Same here😂
The reason you can manipulate properties and attributes of elements created with JS is that a DOM element is just an object in JS, the difference is it does not have a context (like a parent element, etc.) before it's added to a document. Everything else is there as soon as it's created. You can even add event handlers and trigger events on it!
Thank you Kevin for this informative video. 2 years ago I had a requirement to implement an infinite scroll component to display brand logos. I searched in internet and youtube but never found a proper guide / implementation. If I had this video 2 years ago, it would have saved me a ton of efforts, time and stress.
man i'm struggling with my current project to get a fluid continuous effect... you made my day ... cheers from France
Kevin, you make me fall in love with CSS each time, I visit one of your videos . thank you so much for the value! 🙌
I love the way you setup things and how you explain it so well even in JS. Thank you for these videos as always!
this is pretty much exactly what I needed for a project I'm working on, now to just stop procrastinating and actually get to coding
you probably already know this, but you can shorten the gradient in the mask by using -webkit-mask: linear-gradient(90deg, transparent, white 20% 80%, transparent); so you don't need to write "white" twice
One of those things I know when I see it, but never remember that we can do when I need to do it myself 😅
@@KevinPowell 😂😅
I am an architect, but I love CSS too. Your Videos are Awesome! Thank You!
Same here! Cheers for us rare species 🎉
If you track the parent's width and the width of the children and put the `forEach` that adds items into a `while` loop, you can continue adding them until there are enough items to eliminate any gaps, regardless of the size and number of child elements.
can you share the code you mean? I have a problem when the items are not enough to fill the container. I want to duplicate the items before finish the first cicle.
now i see , you are leveling up your animation skills
I hate scrolling sliders because whenever I have to create a new one I forget what I did before. Adding this to my playlist!
The object returned from matchMedia has a "change" event, by the way.
Using that, one can react to changing user (and emulation) settings without reloading the page.
I have been trying to do something like this for about a week now. Tried to use a queue for duplicating the items, tried all kinds of weird animations and nothing worked, you really saved me
Kevin, I've used clamp() for the column-gap value which allows me to have the scroller span any viewport width whilst keeping the column-gap responsive. I then added clamp() - with the halved values - to the calc() function. Works great! I was initially having a nightmare getting this effect to work properly until I came across your tutorial. Your solution using calc() with the translate and gap value to correct the animation glitch is brilliant. Thank you!
Do you have a codepen with your coded version? Would be great to see how you did that! :)
Thankyou my CSS master, you are the most helpful guy in youtube.
rather than adding the list individually within ul , u can create a variable with the list items and a function that concatenates a list with itself. Now within the ul tag, u can map through the concatenated list items (using the function so it doubles), and create a list tag for each.
Wow, that's so amazing, I think it was so complex, but after I saw your video, understood it so easy (sorry for my English)
Ok, this is the best video so far in this area! Thank you so much!!!
Hey Kevin, once again great script, thank you!
The moment I saw this idea I thought, "why stop with left and right?".
I just played around with it, basically I duplicated the "scroll" animation, renamed it to "scrollv" and changed translate to translateY
A CSS query to set the list elements to block when direction is up or down, a little CSS manicure and it works already!
Currently I still have a small timing problem to fix, but I am so happy about this solution already. You just are the man!
So good, seeing the animation depend on "Reduce motion" not being enabled. And good to see `aria-hidden="true" `being added to the duplicated items, so a screen reader user wouldn't have to navigate through them.
But what if the images were wrapped in links? The links would still be in the focus order so a keyboard user would still have to navigate through them all. At first I thought the solution would be to use the `inert` attribute instead of `aria-hidden`, making them both hidden from screen readers and non-interactive. However, that would prevent cursor/touch users from clicking on the duplicated links; awkward. The solution is to do what was done before `inert` was supported, add `tabindex="-1"` to the duplicated links.
As long as we're thinking about keyboard users, how awkward is it to be focusing on links that are animating? That can be addressed by adding a couple of `:focus-within` rules, one to change the `overflow` from `hidden` to `scroll` and another for the `animation` property so it only animates when `:not(:focus-within)`.
I don't think I'd ever use something like this for content I expect the user to interact with. Carousels where the user has control are problematic enough, something like this that scrolls by sounds like a nightmare from a UX perspective, even for fully abled users using a mouse.
That said, I love that you thought about it and came up with some valid solutions to make it work, because you just know a client is going to ask for that 😅
Great Job!! Not even chatGPT could give me the solution for the empty gap between the duplicated items. I love you :)
Thanks Kevin, you've explained really well the concepts behind this animation.
thanks for this amazing video Kevin. Loved how thorough the lesson was. I'm gonna customize and implement your technique in my University's final project.
Hei Kevin, You are not only boss of CSS but also boss of JS. Best wishes.
Probably my favorite of all your videos I’ve seen. Thank you for sharing this incredibly useful content!! Kevin, you’re the best!
I had to built this last week and had a hard time, wished I had found your video before haha Merci Kevin!
You're the best, Kevin! Thanks for the detailed tutorial.
Hey Kevin you are a star. This logo animation was exactly what I needed for my current project. I didn't know where to begin until I saw your UA-cam video. Thank you one more.
It worked perfectly for me! Awesome tutorial! Thanks a lot.
As always, THANK YOU Kevin!!!
You are the goat, great lesson, really informative and upbeat!
Hey! Firstly - absolutely love the CSS parts and the extra explanations as to why not to do it the other ways, e.g. by doubling the content. However, the JS is faulty. As in it works, but could be better. Doing a forEach there is wrong - other animated things may also want to know if prefers-reduced-motion is set to reduce and then you have to add more and more forEach's every time a new animated thing is used on the page. instead, it should be set on the body ( is too high and irrelevant, but is global enough to affect everything). This then means the same code is not repeated for each animated thing, but only once - on the window - making it more efficient and clean. Secondly, as the data attribute is redundant, attribute selectors are not recommended, it only affects CSS and not HTML or other JS logic, and it is a boolean flag, it would probably be better as a class that is added dynamically, rather than a data attribute selector. But, there was also some great JS - for example, the Array.from - I always forget this is a thing!
A _responsive_ version with no max-width would be ace!
Thank you my friend. Very useful and gives the site more interactivity.
Great tutorial Kevin, I followed this to create a React component and tailwind styles
Hey @Labastidaa,
I did the same thing! I am using this ininite scroll in my current React project, I decided to go with a separate CSS file for the component I have the scroller on. My only issue is is that the animation seems to work for me only when I hit save on my .js file. If I refresh the page then it all breaks and it does not look that pretty. Should I be adding some sort of hook for it?
How did you get that .js file to mont every time you refresh the browser?
Just amazing, jussssttttt Amazing. As a beginner who want to start in industry , I hope I get a senior like you. Respect 🚀🚀
I have literally just struggled to build exactly this in a project.
Now im going to have to go refactor it because your solution is so much cleaner and simple to what I did 😂
Thanks mate, well done! I just re-created it in nextJS using your code
okay now working, thankyou kev
To improve JS part a bit, you could add all duplicate nodes to DOM in one go - by first creating a Fragment, appending nodes to it, and then appending fragment to scrollContent.
Only one DOM modification instead of many, would save some milliseconds on initialization of this scroller.
Trying to learn more JS. Do you have a codepen or link to an example of this? Would be great to see! :)
Thanks so much for this, Kevin!
Thanks for this tutorial Kevin! Now I have to go and change three logo scrollers on my current project because they all use duplicated content as a solution. It should help page load speed too.
for mac users who like to fiddle with their system settings, make sure accessibility > display > reduce motion is turned off!
As always, thanks for the great content Kevin.
I remember trying to add a marquee like this in one of my first projects and suffering because it didn't line up in different screen sized 😭
Always on point, professional explainations, great takes, great work!
wow, amazing effect scroll list item, thanks for sharing
you might also add the standardised `dir` attribute for RTL/LTR content flow to keep the internal order of things and the right to left animation. You then use that attribute for your CSS selector.
This is so lovely. it's like magic!!
For sanity use --private-animation-duration , --scoped--animation-duration etc instead of underscores in CSS var names.
You will misread over underscores , worse someone else definitely will.
Causing a lot of headaches when one line-character is preceded by other line-characters.
The tooling just isn't there to catch misspelling headaches like inline private underscore affixing in CSS.
While underscoring has a history of in indicating private scopes in languages it's almost ALWAYS the first character simplifying tooling like syntax highlighting etc.
About ten years ago, a client asked for a website made in sections that had a side scroll. As much as I tried to convince them otherwise, I had to. It was a cool challenge. I used parallax in some parts. Usability 0, style 10.
Hey man the tutorial was awesome. Thanks for share your knowledge 🎉
this is perfect, but I wanna try it by taking the first child remove it and then put it at the end. idk how performant it will be against this tho
The GOD of CSS🚀
Mhuaaa 😘😘😘😘😘 ... Heaven-sent implementation
Well done, great explanation
Thank you! I have looking for this feature 😊
awesome kevin, good job 👏
I'm currently working on a svelte project and need this option the the website i did it. with typescript , svelte , tailwind, skeleton + css.
i really enjoyed! ❤
thank you , you are good person yes. with this i hope ill actually get a job now
Every video I'm always like, I wish I knew about this 2 days ago 🤣
man, you save me. Every time i was creating a marquee i have the issue with the sudden cut of the rotation.
yapping final boss 4 minutes tutorial in 32 minutes
lmaoioo
I get disoriented when I hear disorientated.
Respect man 🙌
This one was very cool.
bro you are the king, thankssssssssssss
an incredible class
That's what I about to ask for ❤
I love your videos so much!
forever
this should be a web component where the elements scrolling are added through the slot tag.
It’s crazy how similar this is to lua when dealing with roblox guis, I never noticed since I’m always in react but they use the same formatting for changing things 😂
Todays so called web developeres like to do `npm i easy-unlimited-scrollbar` it is good if you know how it works, but the problem is they don't know how that a particular library works or operate, they just want to copy the code.
Agree?
You really helped me, thanks a lot
Another masterpiece ❤❤
Thanks Kevin!
thank you so much for the knowledge
I think I was too eager to write comment, but what came in my mind after watching is, it would be nice that the scroller could take text direction into account like dir ltr, rtl.
Took me around half a day to fix this while implementing in web flow
Peeeerrrrfeeeecto!!! Thanks so much
@Kevin Powell - I was about to literally message you asking for a tutorial on how to do something like this a couple nights ago. What a coincidence. Are you betting on any horses this week?
Wonderful! Thanks!
esta bueno el contenido, lo he adaptado para Angular y que cubra el 100% del espacio del contenedor, gracias
Why have I never heard of the mask property? Definitely stealing this mask implementation for some components I have.
Thank you so much, it´s amazing
Awesome video! Could be nice making that as a webcomponent.
Nice video - would be good to show in vertical scrolling as well - I assume it would work the same way. Additionally be good if the scroll speed could work of the inner scroll width so you could get consistent speed regardless of content size :)
for somebody whos such a css wizard ur website sure is vanilla
I haven't touched it in years now... Was on my list for last year, and never did... Maybe this year 😅
Think I would move the const scrollers inside of the addAnimation() function. Since you are not doing anything with it outside of that function. const is better than let in the cases you are using for.
Also should do the top to bottom and bottom to top, but it should be just changing direction 90deg.
Good point about the const for the scrollers. Not sure what you mean by this though "Also should do the top to bottom and bottom to top, but it should be just changing direction 90deg."
@@KevinPowell I think they mean just allowing for a vertical scroll animation?
Vertical instead of horizontal movement, which I would not think is common or that much more complex.
Also, have a question on if you have fewer elements than the full width. Think it should still work though it might look odd.
I also like the concept of INF scroll for a few things and might use it later.
thanks man , thanks mush love
Hey, I learned something today. 👍