Hey Robby, this is awesome!! Exactly what I was looking for... neat CSS, no Javascript even needed. Pure and simple CSS code. Keep up the great work. Thank you!!!
Can you just imagine, and ive been battling with swiper js for months on how to create fluid autoplay infinite loop carousel, you solved my problem flawlessly
Any time I am working on a project and I realize I need to add a js library to the project. I feel some type of way. Especially libs that does these kind of stuff.
Awesome tutorial Robby! Instead of adding the :before & :after tags you can also add the following css to the .logos container: mask-image: linear-gradient( var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0) ); * This will fade in from transparent at 20% on each side using the background of the container ;)
you made it so easy , thanks , i was doing it with intersection observers and intersection ratio in javascript , after i failed i came here and saw this , thanks
Looked for a clean and simple solution for a while, very cool way to do it. You can also use CSS Mask in place of the :before:after and a linear gradient. Thanks for sharing this!
No words for you sir , I just fascinated by your lecture , hats off to you sir You are teaching in next level , Thank you for such a great content sir Thank you so much for your efforts and explanation
Thank you, I spent hours on other tutorials ,and as a beginner this was the simplest and easiest to understand and it WORKED!! Saved me more hours of frustration!
you are a legand man, you just made my day with this simple and efficient explanation, also thank you so so much for sharing the code, im no coder and trying to navigate my way building my website and you made me a massive help with this video and the code, thank you so much man, wish you and your family all the best 🙏🏻
Nice brilliant! Very well explained as well thank you, especially with the basic concepts, as i'm not a full-time coder , so I do tend to forget the basic things at times.
the issue with this (as seen at 06:00) is that if the logo-slide is longer than the screen/.logos width it will only translate the width of the parent ie .logos or html width. watch how the mr beast logo starts off screen but doesnt end offscreen. very annoying because i have about 20 logos, which have a combined width of lets say 2000px. so i can only see the first few logos.
@@АлмазбекАлтынбекУулу I’m thinking off the top of my head now, but for a pure css solution i took all the logos i wanted, and put them in two divs (flex-row for even spacing and alignment. I put those two divs side by side in a container, which should have overflow-x-hidden. Then for the animation, translate each of the logo divs 100% to the left. This way, once the first logo div goes off the screen, the second one is right behind it, showing the first couple logos. Then the animation snaps back to the start, and the first logo divs logos should line up with where the second logos div’s logos were at the end of the animation. Making it seem infinite
A couple of issues to mention, my carousel dos not run as smoothly as yours, e.g., 1 - it jumps after it completes the loop, 2 - the fade in and out works when the position is relative but fade in from right disappears when I change position to fixed or absolute to re-position the carousel to the bottom of the page. Any feedback is appreciated.
hey i know exactly the issue you are having, what you can do is this, you have duplicated the inner scroller, good, now mess around with the @keyframes slide from transform: translateX(%); }, mess adjust the percentage so that it starts exactly from where your second innerscroll will be, i hope that makes sense , instead of 0%, you can adjust it to 20% or whatever until its seamless
@@herlocksholmes-uv5qw in your html, there is parent container and there is the child, the child is the one that translates right, so what i mean is duplicate the child, and mess with the( @keyframe from % ), until the first child is looping exactly from where the second child will be ,
If anyone is having a problem where you have a lot of logos to cycle through and the width of each of the "logos-slide" divs are much larger than the viewport and overlapping on each other, adding a "width: max-content;" on the "logos-slide" class solved the problem for me.
Exactly what I was looking for simple and clean, I never get tired of seeing this slide. Great tutorial Robby!
moi aussi
Came across this video by pure chance and thank you very much for it. Exactly what a tutorials needs to be like! ❤
Hey Robby, this is awesome!! Exactly what I was looking for... neat CSS, no Javascript even needed. Pure and simple CSS code. Keep up the great work. Thank you!!!
Straight to the point. You made it so easy to understand, thanks!
The best short css trutorial I've ever seen 😊. Well explainded. Great. Looking forward to next one.👍
Can you just imagine, and ive been battling with swiper js for months on how to create fluid autoplay infinite loop carousel, you solved my problem flawlessly
Any time I am working on a project and I realize I need to add a js library to the project. I feel some type of way. Especially libs that does these kind of stuff.
for months? why, is that a huge neccesity for you
It was a requirement from work, when i did it on my own it always has bugs and glitches and layout shifts.
@@crim-son ok buddy good luck may god be with you and ease your work🙏
So useful... In case if anybody saw a glitch when the width is more and images are less, all we need to do is copy multiple times.
Damn, I spent 1 hour and didn't find the solution until found your comment. Thanks!
Thank you, saved my life, I was literally about to bang my head on the keyboard
Lol I was actually trying to fix this for like 3 hrs
After all the hassel of reading different blog posts, this is just the solution I was looking for, simple and straight forward. Thanks!
Awesome tutorial Robby!
Instead of adding the :before & :after tags you can also add the following css to the .logos container:
mask-image: linear-gradient(
var(--mask-direction, to right),
hsl(0 0% 0% / 0),
hsl(0 0% 0% / 1) 20%,
hsl(0 0% 0% / 1) 80%,
hsl(0 0% 0% / 0)
);
* This will fade in from transparent at 20% on each side using the background of the container ;)
Wow I spent so many hours trying to make this and even did some math calculations to render them. But your solution is so much better and simpler
This channel is underrated Why you only have 9k subs? You deserve more sir. Thank you for this.
hhghjgjh
been struggling for days to find an exact tutorial, u are a life savior !!
you made it so easy , thanks , i was doing it with intersection observers and intersection ratio in javascript , after i failed i came here and saw this , thanks
Looked for a clean and simple solution for a while, very cool way to do it. You can also use CSS Mask in place of the :before:after and a linear gradient. Thanks for sharing this!
No words for you sir ,
I just fascinated by your lecture , hats off to you sir
You are teaching in next level ,
Thank you for such a great content sir
Thank you so much for your efforts and explanation
Damn thats what i was trying for past 3 days chat gpt failed to to ths mannn love itttt you got a subscriber man
THanks so much for the video... You are one of the best TEACHERS, who know's exactly what to explain for a beginner like me! You are awessom SIR.
I wasn't expecting it to be this easy. Thanks man ❤
Thank you, I spent hours on other tutorials ,and as a beginner this was the simplest and easiest to understand and it WORKED!! Saved me more hours of frustration!
This guy is so much sorted in terms of web development.......truly majestic
Got yourself a new subscriber. Great work!
thank you so much even chatgpt couldn't offer such clean code
Crystal clear! Loved it!
you are a legand man, you just made my day with this simple and efficient explanation, also thank you so so much for sharing the code, im no coder and trying to navigate my way building my website and you made me a massive help with this video and the code, thank you so much man, wish you and your family all the best 🙏🏻
Wow! This tutorial is so awesome! The concept is explained precisely and clearly. Thanks!
It's really cool. I have been searching this for several days.
Thank you so much for the video, I didnt find that well explained tutorial or video anywhere else.
That was exactly what I was looking for and you explained it so well. Thanks a lot!
thanks Buddy, for the easy explanation....much love From KENYA🌎
In this video I got eveything , what i looking for few days. ThankYou 😁😁😁😁😍😍😍😍
The second div overlay made my day. Slight skip on wide screens, but great improvement, thank you.
Damn, you're a great programmer lol. You made that look so easy. Great teacher too.
You made it look super simple. Thank you!
Amazing Robby! In one video you teach a lot of things
Great video! Thanks for this, just what I was looking for.
Thank you Robby. You are truly the man!
OMG what an amazing video I loved it thank you
thank you very much sir. didn't know it could've been this easy lol
Great work man, glad i got this on my recommended.
Really great and simple, works like a charm! Thanks so much!!
Thank you so much man! It took me two days, not animating but finding this tutorial 😅❤
AWESOME work, man!
This is the best so far🎉
what a clean and clear explanation
Nice brilliant! Very well explained as well thank you, especially with the basic concepts, as i'm not a full-time coder , so I do tend to forget the basic things at times.
I Love this. And thank you for the detailed explanation 👍
Precisely what I was looking for. Thank you!
THANKS!, really what i ve been looking for :D
absolutely amazing :) saved so much time for me. many thanks!! :)
Exactly what I'm looking for , tqsm robby 🎉
The easiest great tutorial for begginers like me, thanks! 😄
Thanks a lot man, exactly what i was looking for!! cheers!
my gosh what a code... this is an inspiring job... Super chingon!! Saludos desde Mx Mty
Thank you. the video help me to solve the problem
You're the best and my life saver!
thx so much for this video... its magnific, send a hug for devs on Brasil!😁
Thanks for the kind words!
Thank you so much ! This is exactly what i was exactly looking for. I helped me a ton =) Subscribed to show my token of appreciation
my last logo BuzzFeed collides with the 3m of the second div, why is that so ? I put in the code in elementor
amazing bruh keep up the good work
Thank you man simple and perfect
loved the video. thanks for such crisp info
Nice! Pretty straight forward CSS. Thank you. I’ll likely use that!
You made it super easy! Thanks man
thank u sir you helped me with my deadline today! great video!
Robby thank you very mach very very very very very very help me
This was very useful for my project. Thanks
Thanks man, really helpful!
That was amazing and super easy! Thank you!!!
You are great my friend, thank you very much!!! 🤯
You just earned my subscription.
Amazing ❤ I love it
This is really helpful! Thanks for your work :)
Great video bro!
Great content, thank you Robby!
Helpful. Thanks for this video.
Brilliant! Thank you!
this is great! im going to try these so i can use it for my GHL landing page projects, i hope it is responsive when it comes to mobile view.
Very awesome tutorial, Thanks !!
thank you so much for this great explanation!
Robby, thank you very much!. I am Sergio from Argentina 👍😊🇦🇷🇦🇷
Nice logo scrolling..........Great
Exactly what I needed!
Thank you very much, just what I needed.
Exactly what I needed!!! thanks
Thanks for this useful tutorial!
Thank you! Great video!
Thank you very much. This was very helpful.💯
This is great, thanks. To do another, underneath, to the right, just set to translateX(100%) and make .logos direction: rtl.
You helped me a lot, thanks!
Спасибо большое за помощь! ваше видео спасло мой дизайн:)
the issue with this (as seen at 06:00) is that if the logo-slide is longer than the screen/.logos width it will only translate the width of the parent ie .logos or html width. watch how the mr beast logo starts off screen but doesnt end offscreen. very annoying because i have about 20 logos, which have a combined width of lets say 2000px. so i can only see the first few logos.
I have the exact same issue.
bruh, how do you solve it ?
@@АлмазбекАлтынбекУулу I’m thinking off the top of my head now, but for a pure css solution i took all the logos i wanted, and put them in two divs (flex-row for even spacing and alignment. I put those two divs side by side in a container, which should have overflow-x-hidden. Then for the animation, translate each of the logo divs 100% to the left. This way, once the first logo div goes off the screen, the second one is right behind it, showing the first couple logos. Then the animation snaps back to the start, and the first logo divs logos should line up with where the second logos div’s logos were at the end of the animation. Making it seem infinite
@@JohnCanCode thanks! will try it
thanks man i copied the resources you had provided and everything came out clean on my page
You're a gem!
Thank you very much. Great Video
So is a good video tutorial, I like it so much. Thanks to you
A couple of issues to mention, my carousel dos not run as smoothly as yours, e.g., 1 - it jumps after it completes the loop, 2 - the fade in and out works when the position is relative but fade in from right disappears when I change position to fixed or absolute to re-position the carousel to the bottom of the page. Any feedback is appreciated.
If you delete the script and duplicate the "logo-slide" div you solve the problem
hey i know exactly the issue you are having, what you can do is this, you have duplicated the inner scroller, good, now mess around with the @keyframes slide from transform: translateX(%);
}, mess adjust the percentage so that it starts exactly from where your second innerscroll will be, i hope that makes sense , instead of 0%, you can adjust it to 20% or whatever until its seamless
@@firemasterleo I really don't understand what you mean by duplicating the inner scroller, what is it?
@@alvarbuenfil7557 It worked for me, thanks for the idea! 😊
@@herlocksholmes-uv5qw in your html, there is parent container and there is the child, the child is the one that translates right, so what i mean is duplicate the child, and mess with the( @keyframe from % ), until the first child is looping exactly from where the second child will be ,
thanks a lot, that was really helpful !
Nice job.🫂
If anyone is having a problem where you have a lot of logos to cycle through and the width of each of the "logos-slide" divs are much larger than the viewport and overlapping on each other, adding a "width: max-content;" on the "logos-slide" class solved the problem for me.
Thank you Robby 👍