Create an infinite horizontal scroll animation

Подписаться 918 тыс.

Просмотров 177 тыс.

50% 1

🎓 Did you know I have courses? Both free and premium ones: kevinpowell.co/courses?...
Infinite scroll animations for things like logos are relatively common these days, but there is a lot that we can do incorrectly when making one, so I decided to try and make one that respects prefers-reduced-motion, and is progressively enhanced with just a couple of lines of JS to add in the functionality (and duplicate content that we’ll need).
🔗 Links
✅ The code from this video: codepen.io/kevinpowell/pen/Ba...
✅ My playlist on CSS masks: • CSS Masks
⌚ Timestamps
00:00 - Introduction
01:16 - The HTML
02:23 - Basic CSS
05:31 - Checking for prefers-reduced-motion with JavaScript
08:50 - Setting the stage for the animation with CSS
13:16 - Adding the animation
19:53 - Fixing the doubled content in the HTML
25:50 - Adding speed and direction options
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

20 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 267

@Aliena92 2 месяца назад

"I help people fall deeply, madly in in love with css." You're succeeding every time! Thank you for all these gems!

@Shaheer-xs5os 8 месяцев назад

80% of my CSS skills, I have learned from you Kevin, you're the best buddy, thank you for these amzing videos ☺

@user-tc5do1ps9p 2 месяца назад

Same

@Catalyph Месяц назад

LOL 80% of my CSS skills i have learn from THIS video!😂

@underroad 8 месяцев назад

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

@Thekidisalright 8 месяцев назад

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.

@gbrl8633 3 месяца назад

good job!

@GuebreAdama Месяц назад

Great Job, I tried it and it's working fine.

@e11world 6 месяцев назад

I love the way you setup things and how you explain it so well even in JS. Thank you for these videos as always!

@lucacarrara00 8 месяцев назад

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!

@kerrykreiter445 8 месяцев назад

Probably my favorite of all your videos I’ve seen. Thank you for sharing this incredibly useful content!! Kevin, you’re the best!

@MarshallSC1 8 месяцев назад

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!

@yaseen2002 8 месяцев назад

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 RU-vid video. Thank you one more.

@naveenvenkateshk 8 месяцев назад

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.

@lucasferrero123 5 месяцев назад

Thanks Kevin, you've explained really well the concepts behind this animation.

@oscarh4066 7 месяцев назад

You're the best, Kevin! Thanks for the detailed tutorial.

@royhyde8842 8 месяцев назад

As always, thanks for the great content Kevin.

@anchimayen 8 месяцев назад

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! ✨

@webrevolution. 8 месяцев назад

Man? How dare you assume his gender?!!?!?! Lmao. Just kidding. Totally agree.

@Sunny-Gupta1 8 месяцев назад

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

@Manas-co8wl 6 месяцев назад

Literally same

@zabuzagaming5741 6 месяцев назад

You are not the only one Same here😂

@izyo8146 8 месяцев назад

Always on point, professional explainations, great takes, great work!

@spatialoptic 4 месяца назад

As always, THANK YOU Kevin!!!

@tomcat1112k 4 месяца назад

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.

@chriscarton4728 4 месяца назад

Everytime I have a problem I realize you already had the same problem and overcame it. Thank you for lighting the way.

@ChecoM83 4 месяца назад

It worked perfectly for me! Awesome tutorial! Thanks a lot.

@jupa8712 8 месяцев назад

Hey man the tutorial was awesome. Thanks for share your knowledge 🎉

@goranspasic4977 27 дней назад

Ok, this is the best video so far in this area! Thank you so much!!!

@dmytro_bhn 7 месяцев назад

Thank you my friend. Very useful and gives the site more interactivity.

@integrateur 8 месяцев назад

I had to built this last week and had a hard time, wished I had found your video before haha Merci Kevin!

@MrAbbo11 Месяц назад

Thanks so much for this, Kevin!

@bw-dude 8 месяцев назад

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!

@HuynhLuong227 8 месяцев назад

wow, amazing effect scroll list item, thanks for sharing

@mazboost 7 месяцев назад

Thanks mate, well done! I just re-created it in nextJS using your code

@anirudhk6109 8 месяцев назад

This is so lovely. it's like magic!!

@plastikbeau3695 8 месяцев назад

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!

@codetheworld6721 3 месяца назад

Thankyou my CSS master, you are the most helpful guy in youtube.

@ThePetekal13 8 месяцев назад

I love your videos so much!

@LarryMarkel 3 месяца назад

You are the goat, great lesson, really informative and upbeat!

@sarahtoby473 8 месяцев назад

Thank you! I have looking for this feature 😊

@_duongductrong 5 месяцев назад

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)

@aigeek1991 8 месяцев назад

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

@WebDeveloper682 8 месяцев назад

now i see , you are leveling up your animation skills

@ELStalky 8 месяцев назад

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.

@Labastidaa 6 месяцев назад

Great tutorial Kevin, I followed this to create a React component and tailwind styles

@paulab9310 5 месяцев назад

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?

@umidjonzoxidov 11 дней назад

Thank you Kevin!

@nickbrown6754 8 месяцев назад

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 😂

@John-King87 8 месяцев назад

Another masterpiece ❤❤

@jackwalsh6487 8 месяцев назад

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.

@ahooton 7 месяцев назад

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!

@TurpoChargedGaming 5 месяцев назад

Do you have a codepen with your coded version? Would be great to see how you did that! :)

@amaizingcode 7 месяцев назад

Wonderful! Thanks!

@harryprowess9871 7 месяцев назад

Respect man 🙌

@yeasinarafat540 8 месяцев назад

thank you so much for the knowledge

@fabioborba2268 4 месяца назад

You really helped me, thanks a lot

@MM-um1sq 3 месяца назад

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! ❤

@skillzorskillsson8228 8 месяцев назад

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

@KevinPowell 8 месяцев назад

One of those things I know when I see it, but never remember that we can do when I need to do it myself 😅

@skillzorskillsson8228 8 месяцев назад

@@KevinPowell 😂😅

@mateusmattossabarreto2852 4 месяца назад

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

@mundoextrano8892 8 месяцев назад

Thank you so much, it´s amazing

@cspjdbh 8 месяцев назад

Perfect video!

@sai_charan 8 месяцев назад

Thanks Kevin!

@isabelphillips451 Месяц назад

Mhuaaa 😘😘😘😘😘 ... Heaven-sent implementation

@gr81matt 8 месяцев назад

This one was very cool.

@VidarrKerr 8 месяцев назад

I am an architect, but I love CSS too. Your Videos are Awesome! Thank You!

@antonioruiz6012 5 месяцев назад

Same here! Cheers for us rare species 🎉

@mohammedminoddinsharker8460 8 месяцев назад

Hei Kevin, You are not only boss of CSS but also boss of JS. Best wishes.

@ridewithme9422 5 месяцев назад

Just amazing, jussssttttt Amazing. As a beginner who want to start in industry , I hope I get a senior like you. Respect 🚀🚀

@SaadAlShiekhAli-sg4dl 3 месяца назад

bro you are the king, thankssssssssssss

@soype 8 месяцев назад

I hate scrolling sliders because whenever I have to create a new one I forget what I did before. Adding this to my playlist!

@gbrl8633 3 месяца назад

an incredible class

@CirTap 8 месяцев назад

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.

@user-jz4iz2qh9u 8 месяцев назад

Awesome video! Could be nice making that as a webcomponent.

@ousssika5359 Месяц назад

thanks man , thanks mush love

@hassaneoutouaya 8 месяцев назад

Thank you so much!

@hameeeed5992 Месяц назад

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.

@crstnio 8 месяцев назад

Hey, I learned something today. 👍

@beinyourguard 7 месяцев назад

pretty neat!

@rain-2263 8 месяцев назад

That's what I about to ask for ❤

@user-ij9dy7vp9y 8 месяцев назад

beautiful thing godfather, thanks thanks 👍

@leehoss 8 месяцев назад

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 :)

@khanhduy3364 5 месяцев назад

amazing video

@cwilcox808 8 месяцев назад

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

@KevinPowell 8 месяцев назад

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 😅

@santoshparker8681 8 месяцев назад

Lovely 😍

@LuBre 8 месяцев назад

A _responsive_ version with no max-width would be ace!

@bikinglikebecker 8 месяцев назад

awesome sauce

@normanejm 8 месяцев назад

Thank you!!!

@pmakosyo 8 месяцев назад

man, you save me. Every time i was creating a marquee i have the issue with the sudden cut of the rotation.

@melvinace5 8 месяцев назад

Awesome!! 🤩🤩🤩. Can you do another version, like with previous and next button? Thanks man!

@gabrielomane-yeboah 6 месяцев назад

The GOD of CSS🚀

@ivanvasquez2023 2 месяца назад

esta bueno el contenido, lo he adaptado para Angular y que cubra el 100% del espacio del contenedor, gracias

@nomad100hd 8 месяцев назад

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.

@roy.mancini 3 месяца назад

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.

@user-iv8ec8ti4y 7 месяцев назад

Hi Kevin, wanted to say thanks - you've been really helping me out as I'm building my own website

@Karen-fy7mq Месяц назад

Muchas graciasssss!!!!!!!!!!!!

@davidkonevky7372 4 месяца назад

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 😭

@JaGaNezhil 8 месяцев назад

Super❤

@jerondiovis6128 7 месяцев назад

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.

@TurpoChargedGaming 5 месяцев назад

Trying to learn more JS. Do you have a codepen or link to an example of this? Would be great to see! :)

@mafhper 8 месяцев назад

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.

@TheBoysMemes123 8 месяцев назад

awesome

@growwithdesign 4 месяца назад

Much appreciated. Just an idea suggestion - can you create this in React Next JS with Typescript and Tailwind CSS?

@SurfsUpSeth 8 месяцев назад

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 😂

@user-ih8bc6hf2n 8 месяцев назад

Love you..

@jeff-creations 8 месяцев назад

Thanks for the video Kevin. Question: Does Firefox have a Ctrl+Shift+P type option in dev tools? I can't find reduce motion in FF dev console.

@jeff-creations 8 месяцев назад

I got it to work in Chrome like you did though. Chrome is way better for dev tools

@ItsMeShadowz 8 месяцев назад

Why have I never heard of the mask property? Definitely stealing this mask implementation for some components I have.

@karthiktalam 8 месяцев назад

Took me around half a day to fix this while implementing in web flow

@Qbikowski 2 месяца назад

hey, it works great, is there any way to add option that we can scroll also scroll manually with mouse/touch?

@zsoltoroszlany7172 7 месяцев назад

I was waiting for aria-hidden appear and I really appreciate that you do not forget and always think about accessibility too @KevinPowell

@prasoon3292 7 месяцев назад

It's amazing, is it possible to add and event which speed up the scroll of text when we scroll the page and slowly comeback to normal speed, and the increase in speed is also linear. And also change the direction if scrolled up and vice-versa

@fiorellafiorito 8 месяцев назад

Hello! This is a great video, you explained everything so so well (Like you always do haha)!! I was curious, how can i implement the javacript file if I am using react? Like i know i can have JS files along the JSX files that react uses but how would i call/import the JS file? Would I have to do the classic script tag on the html file that every react web app has?

@tomg55555 7 месяцев назад

i was wondering that too! any solutions yet?

@djelasrca8091 8 месяцев назад

Hi Kevin. Can you, or somebody in the comments, explain how it is possible to change the background of the div gradually based on how much of the section is scrolled? I have 4 DIVS in one section and one sticky div with arrow icon inside it. Now I want to change the background of every div gradually when the arrow points to it. So if the arrow is in the middle of the div the opacity of the background will be 1 and if it is far from the middle the opacity will be lower until it becomes transparent. Is it possible to do this with CSS only? The problem is that i have 4 divs and each of them should change background based on how far the arrow is from the middle of each div.