Infinite Carousel Loop in Webflow (No Code Needed!)

Learn how to create this marquee looping carousel in Webflow without writing any code.
Clone it: infinite-loopi...
Subscribe: tinyurl.com/yc...
My Web Design & SEO company: www.redpanther.io
Webflow showcase: webflow.com/re...
Social links:
/ redpanther.io
/ 51331787
/ redpanther.io
/ redpantherio

[@christopherdickinson9092]

Hands down the clearest and easiest to follow tutorial for looping carousels!

[@eskideamos]

best webflow carousel tutorial i've seen bar none, kudos sir

[@itstheWampus]

stumbling upon your channel for the first time and holy piss you did a great job explaining this. Thank you sir

[@RedPantherio]

Thanks, appreciate it!

[@CentaurusRelax314]

This is gold. *_GOLD!_* Thank you. I'm really surprised that this type of feature isn't 'stock' in Webflow. It's easy to do in Wix' simple editor. I am new to Webflow and thought Webflow was going to give me *more* options, and a more efficient way toward design 'freedom,' but i'm not finding that to be true. Yet.

[@Staff936]

This was great, just started the Web dev journey and its nice to already have a little trick in the tool box.

[@SergeantNeo97]

Man I love your dedication to this channel its been over 2 years and your still going, I hope your channel grows even more😊

[@RedPantherio]

Appreciate it!

[@jordankieff5561]

This was incredibly helpful. Concise, easy to follow, exactly what I was looking for. Thank you!

[@Chinaza.C]

Love the way you broke it down, thank you so much!!!

[@abirahmed1292]

Thank you very much, marquee animation is used to be achieved by coding but now thanks to you I will be able to build it on Webflow :)

[@elizahepner9659]

Omg I've been hunting for this for weeks. Life saver!

[@RedPantherio]

Nice!

[@Liliya-q4j]

Thank you! You gave me very clear explanations of how to do it. Before that, I had a lot of problems with scrolling...

[@aljosamakevic]

Great tutorial! I rarely comment on videos but felt the need to show my appreciation. Awesome work

[@RedPantherio]

I appreciate it 🙂

[@RahulYadav-yg6zh]

Subscribed! You are a GOAT! Please keep uploading more videos with no code needed

[@shruthiv1823]

This video is gold. Keep it going Karr 🔥 Would love to see many more such short tutorials on Webflow and other no-code platforms.

[@midnightstudio3579]

amazing, keep up the good work.

[@avaliemedia3143]

Awesome video! Thanks for sharing - I've used this on the site I'm building on webflow for my client :)

[@VoyagesJapan]

Amazing! Exactly what I've been looking for. Thank you!

[@andy-moggo]

thanks for sharing, it was exactly what I needed it

[@Michael.........]

Thanks man, this is exactly what I needed!

[@stuart2151]

This is great! Well explained and easy to follow :) Thanks

[@aryarajasaa]

Cool one dude! You just get a new subscribers here. Thanks!

[@akkashnavaneethan3194]

Very useful, thank you !

[@TadijaKasagic]

thank you,i was thinking that i will need code

[@oleksandrboiko554]

works like a charm. thank you!

[@ericschenkenberger6118]

Great tutorial! Our team has been using coded solutions for this, and I'm excited to see how the interaction version compares. Just a little constructive criticism - you may want to invest in a mic arm. It sounds like your mic is resting on the desk, causing those low booming noises when you type.

[@NickZoran]

Thank you, Sir! You got a sub for that one

[@ColeNevinsUT]

This was so helpful. Thank you!

[@RedPantherio]

You're welcome

[@lanochedelaspatatas]

Love it, thank you man!

[@RedPantherio]

I just launched a new Discord community for Webflow designers. It includes Webflow assistance, portfolio critiques, business discussion, and more! Be an early member (free): discord.gg/NQqJCxjkjD

[@mauritzbadenhorst3091]

Thank you - this was a great help :)

[@stusmith1201]

clear and concise

[@AmoraCast]

THIS VIDEO IS GOLD!

[@godabstract]

Have an odd one, I have followed the tutorial (incorrectly I think...), when the carousel has completely moved 100%, it bounced back. So if say I want it to move left infinitely, it actually moves left for 100%, then bounces right 100%. Woudl you know why that might be?

[@godabstract]

Ahhh I've figured it out, made it harder for myself as I was practicing as I was listening and watching. If anyone else has this issue, you set the first loop to 0s duration, when I duplicated both were set to 10s. So remember to do that guys! :)

[@ezron1999]

Thank you! I had that issue

[@erdelyibalazs03]

@@godabstract I hade the same issue thank you. And also huge thanks to the creator!

[@grahamtaylornyc]

This is amazing! Thanks so much.

[@11vag]

Thank you

[@kristiankirilov1926]

Great stuff. A lifesaver...

[@jo69123]

thanks for this dataset g

[@sufyanijaz2065]

Wow, Incredible! 😍

[@davemorgang]

This is great! 🔥

[@Cabzah]

Thanks for the tutorial. Also what if i want to make the same kind of content carousel but with only one logo showing at a time, how can i achieve that?

[@davidfitcher2953]

crystal clear 🌟

[@AmitSharma-bj7os]

Thanks for the tutorial, very helpful but can you create a video which shows how it should be in different breakpoints?

[@RedPantherio]

The end of the video shows how to adjust for mobile. Tablet and landscape are the same process.

[@throwaway99019]

So glad I found you! Thanks for providing this! Question, what's the best way to add text under each of the images (ie. employee headshots with their names underneath)?

[@RedPantherio]

You can add a div block instead of the images into the .logo-container element. Make the div flex vertical, and then add the image and text block elements inside it. Then you can copy/paste that div element.

[@throwaway99019]

@@RedPantherio thank you🙌

[@wn352]

Worked perfectly!!! Any chance you can tell me how to make it pause on hover?

[@bone8919]

Do you find a solution?

[@wn352]

@@bone8919 man in Framer is so much easier. I completely ditched Webflow

[@fawwazfirdaus5959]

Awesome. Auto subscribe for you!

[@tryoskar]

Thank you!

[@Zmoorgekaffii158]

omg thx :D helped me a lot

[@ElouanCch]

Tu gère de malade !

[@developedbyluis]

Hey, thanks I am using this right now for a project. But for some reason, it works perfectly on Chrome and not on Safari. In Safari it has a delay after showing the first container.

[@md.shofikulislam7976]

you are awesome bro.

[@developermsmahadi]

Thanks Thanks a lot for giving us a proper guideline without code☺☺ Noe please make a responsive card slider without any code. only use interaction Thanks again

[@RedPantherio]

No problem. Can you give some more info on what a responsive card slider is?

[@IndraNeijs]

I tried to make the same, but a white colored one on a dark background. My loop had some jerkiness at the end, bc I changed the bg color (as said in the video) on the logo container and that didn't work out for me. To fix it I changed the color of the carousel container too. Hope this helps if needed!

[@meow-lily]

Thank you so much :)

[@lawrencelandeloos3761]

You just saved my laptop

[@JonathanCoutino]

The best!

[@patrickperkins1189]

This tut is perfect, but I'm getting a weird overlap from my second line of logos between breakpoints :-/ it's driving me crazy!

[@RedPantherio]

Glad it's helpful 😀. In regards to the breakpoint issue, I'd need to see a read-only share link to be able to tell what's happening.

[@patrickperkins1189]

@@RedPantherio If you're genuinely down, I'd be happy to share it with you

[@patrickperkins1189]

@@RedPantherio I just send your IG a message with the link!

[@ramiroortaalbero9973]

"It doesn't work. If I set a single action, it moves correctly for 10 seconds and then stops. When I add the second action, it stops at 50% during the preview."

[@RedPantherio]

The second action should be at a different time in the timeline than the first action and should be set to 0%. Feel free to clone the project and use the elements I created in your project.

[@ss-to7ii]

I think you might do the opposite in the video at 4:20. I might be mis understanding though. @@RedPantherio Edit: mine is working by following the video exactly but i had to do it multiple times.

[@EstebanContreras-xs2kq]

love it

[@lohanerianele7837]

woooow! You saved me! Thank you for the content! If it's not too much to ask because I'm racking my brain to do it... how can I do it the same way but going to the right ? Thank you again

[@RedPantherio]

You can just reverse the actions to go from left to right. So 1st action will be 0 seconds at -100%, and then the 2nd action will be 10 seconds at 0%.

[@suyashshinde2971]

Helpful!

[@xmasterg101]

THANK YOUUU!!!!!

[@BisonTongueDesign]

It works on mobile, but it's not showing all of the items on mobile. It only shows about three?

[@RedPantherio]

Generally the issue I see on mobile is that the min-width is too small for the .logo-container class. If that doesn't fix it, send over your read-only link in my Discord.

[@kristijanmasevski7083]

how to fix the white line at the end of the single logo container

[@RedPantherio]

Feel free to share your read-only link in the Discord channel, and I'll try to help 🙂 (it's a bit tough to tell without seeing your actual project.)

[@wearejohan4360]

Hi, this is a great tutorial! But what do I do when I don't have like 5 logos but about 25 (or a long piece of text). What should I do different? Because that wouldn't be achievable unless I make the logos really small. I'm kinda stuck on that one... Thanks in advance for your help!

[@RedPantherio]

You can set the minimum width of the ".logo-container" to a custom pixel width or percentage - the carousel will still loop.

[@wearejohan4360]

Perfect! Works like a charm! :)@@RedPantherio

[@iantrantham3972]

This is super helpful, but the justify option isn't there in webflow anymore. How do you do this with Webflow's new UI?

[@RedPantherio]

Should be flex --> horizontal --> space around

[@iantrantham3972]

@@RedPantherio Found it, thanks man!

[@vladimirstoyanov750]

This is not working for me - not looping, not responsive for the mobile screens. Needs some more adjustments to work.

[@RedPantherio]

Feel free to use the cloneable, which is ready for you to use on your website. You can just copy/paste it into your site. Link in the description.

[@hiroyukinumaguchi1984]

Great!!

[@1134baba]

What a great video! I also encountered an issue where I put the logo container in flex and the logos didn't stretch all the way--causing a noticeable gap between the two looping logo containers. Any advice would be amazing!

[@RedPantherio]

Generally setting the minimum width of the ".logo-container" to 100% fixes that. If that doesn't fix it, feel free to share your Webflow read-only link in my Discord.

[@max-zb1io]

it used to always work but when i do it now my overflow is hidden and when the animation starts every thing that has not been in view stays hiden where did i mess up

[@RedPantherio]

I can take a look if you share the read- only link in my Discord.

[@SheharyarNaveed]

Does anyone know how to make it go in the opposite direction? I'm trying but it's not working properly.

[@RedPantherio]

You can follow the tutorial as I made it, but start the animation at 0% and then move it to -100%.

[@kareemyoussef2304]

Cool!! added to one of my sites.. does having this negatively affect performance ? I assume it depends on the image sizes that are used... the animation runs smooth when i tested it on diff devices but im not sure how it will perform on all devices

[@RedPantherio]

It could potentiality affect page load performance since you're adding images and code is being written behind the scenes, but it's pretty lightweight.

[@MJK]

how can you do this but in the opposite direction? since the second logo container always goes to the right when choosing flex

[@RedPantherio]

You can switch the interaction order I gave. So the one I showed to be first at 0 seconds will be the second one. And the second one should be switched to happen first.

[@useruseruseruseruseruseruser13]

I've made the carousel work but when it reaches almost the end of the first carousel, it jumps up a little bit. I've checked everything but still cannot seem to understand why. Would you happen to know?

[@RedPantherio]

Tough to say exactly without seeing the project. Could be that the elements inside the carousel are wider than the logo-container element. Could also be the percentages of the animation are off. Feel free to use the cloneable, which has everything all set up already.

[@andidemartini]

Amazing tutorial man! I just cant seem to get it right for the mobile view :/

[@RedPantherio]

Feel free to share your read-only share link in the Discord, and I can help: discord.com/invite/NQqJCxjkjD

[@qiaoya66]

用的太他妈熟练了，羡慕。

[@linahage9397]

Hi there, when I follow your video with 10 logos, the logos start overlapping near the end of the loop as the screen size shrinks. Otherwise it’s working perfectly. Do you know how to get around this?

[@RedPantherio]

You can increase the min-width of the logo container to fit more logos in.

[@linahage9397]

@@RedPantheriothank you, but what if the min width is a percentage already set to 100% as advised in the video?

[@RedPantherio]

@@linahage9397 You can set it higher than 100% or give it a px or rem width.

[@shakeme14]

LOVE THAT VIDEO BUT IF I HAVE MORE IMAGES HOW CAN I DO IT? BEACUSE I TRIED BUT IT SEEM LIKE I AM DOING IT WRONG PLEASE HELP

[@RedPantherio]

If the images don't fit, you can increase the min-width to be something higher than 100% or even set a "px" amount instead of "%" on the .logo-container class.

[@EdgarFayad]

Thank you for the tutorial is a great video, I just have a small question or detail. There's a size limit to the asset being fut within the container correct? If the Logo or word you decide to use si to big they start tacking up. Is there a solution to this or am I not doing something right?

[@RedPantherio]

The .logo-container can be bigger than its parent. So if it gets tight, you can just give the .logo-container a larger minimum width.

[@jayreambonanza1991]

I already set it to loop but it won't go back to it's initial state and will stop at the last logo of the second div

[@RedPantherio]

Can you send me the read-only link on LinkedIn?

[@reesgargi]

But if you like have 15 logos?

[@RedPantherio]

You can set the logo container to be wider than the carousel container if you have more logos.

[@i_m_balar]

What happens if logo is more? I have more than 10 logos with 100px spacing between them. Is it possible to implement this?

[@RedPantherio]

Yes you can have the .logo-container go longer than .carousel-container by setting a higher minimum width. You'll need to remove the 100px spacing between the logos to get them to seamlessly loop, or else you'll need to do some other sizing adjustments to get that to work.

[@i_m_balar]

@@RedPantherio Yep. Worked. I used display grid instead of flex. Thanks.

[@Timothee-cl5ei]

Do you know how to make it stop while i hover over it

[@RedPantherio]

I'll try to find some time to work on that feature.

[@JonathanCoutino]

Thanks for the video. I used your file and adding many logos no longer works because they overlap. What I can do?

[@RedPantherio]

Can you try increasing the size of the .logo-container?

[@JonathanCoutino]

@@RedPantherio thanks for reply :) If I enlarge the container, it doesn't apply to all screen sizes and sometimes it looks overlapping. Is there a formula? I tried the project you shared and added more logos, and I get the same problem.

[@JonathanCoutino]

@@RedPantherio Thank you, the problem I found was that I was adding padding to my images, I removed it and everything works, thank you very much

[@RedPantherio]

@@JonathanCoutino Awesome 😎

[@JonathanCoutino]

@@RedPantherio update: For it work with any number of logos you must set the width of the image instead of the height :)

[@hellojunej1]

Thank yo ufor the video! Does it still work the same way when you have 10+ logos? If I just put all the logos in the logo-container, they don't all sit within 100vw just because of how many there are.

[@RedPantherio]

Yes, it should still work even if the logo-container min-width is more than 100%.

[@haydenwatson3988]

Im trying to do this vertically but once it reaches the start again it bounces and changes direction. Any tips??

[@RedPantherio]

Tough to tell without seeing it. Any loop will need to start at zero and end at 100% if horizontal. Not sure what those numbers will be vertically, but the idea is the same.

[@Anonymous-rm2wu]

Great work, thanks! I'm having some issues if I add like 8 logos. I want them larger, but when I enlarge, they overlap each other. Any suggestions?

[@RedPantherio]

You can add a minimum width of something larger than 100%. If that doesn't work, feel free to share your read-only link in my Discord.

[@Anonymous-rm2wu]

Worked thank you!@@RedPantherio

[@ERICKP-h5h]

is it possible to make infinite flow card carousel from cms content? like when user input something and webflow use it as a cms data and make it card shpae and flow it infinitely

[@RedPantherio]

Yes that's possible. Would this use case be with logos or something else? Perhaps another tutorial is in hand 🤔

[@frankiereece3]

Hey there, awesome video. Im having an issue where I put the container in flex and the logos over lap eachother. Ive tried padding,margin, max/min width and i cant get it to move properly to able able to loop the right way. any advice?

[@RedPantherio]

I'd be happy to take a peek. If you can share the read-only Webflow link in the Discord channel (pinned comment above) I'll take a look. KZbin doesn't like those links sometimes.

[@frankiereece3]

@@RedPantherio awesome. just messaged you with the link on discord

[@PixelPerfect00]

Bro did you get the solution

[@javison_4]

Brother, i need your assistance please if you can find the time. When the loop comes back around, it's not in a smooth loop, it changes the images, so it looks awful. let me know - thanks.

[@RedPantherio]

Does the animation start at 0% and end at 100%?

[@javison_4]

sorry this was my bad. i had different logos in my duplicate 🫨 now it works fine.@@RedPantherio

[@PJW-fe8ms]

how can i make this in mobile..? it fully work in pc but, it's quite different to make it in MO

[@RedPantherio]

Check out @06:20 in the vid. I go over the mobile version 😀

[@ERICKP-h5h]

like if my contents are 5 and in mobile , and my animation makes my content rotate not yet, like start content 1 and end at content 2 (not content 5) how can i fix my animation?? it should be end at content 5 and go back to -99%. but mine was end at content 2 and go back to x:0%.. Thanks for your this best content.

[@RedPantherio]

This could be a number of things (container parents, sizing of elements, interaction issues, etc.). I would need to see the read-only link to be able to tell what the issue is. Can you share that?

[@ForSure-quiz]

does it also work if the two logo containers are different ? i think not or?

[@RedPantherio]

The loop only works if the .logo-containers are the exact same. If you want the logos to fill more than 100%, you can set the minimum width to higher than 100%, and it should still work.

[@ForSure-quiz]

@@RedPantherio cheers will try it out

[@ForSure-quiz]

works, appreciate the quick reply

[@di_moha2278]

it is still working ? it doesnt for me

[@RedPantherio]

Yes it's still working!

[@jacobb315]

how do u make it mobile responsive

[@RedPantherio]

The end of the video explains mobile responsiveness 🙂

[@eceeyisoy3907]

I did this in two rows, movin the opposite direction. I can see the animation is working in previews but when I preview the page or publish, the animation is not being triggered. Why might that be? 🤔😣

[@RedPantherio]

Can you share a read only share link?

[@alejandrobarrera7797]

im goofy

[@user-ft2md2gd4s]

this video is almost impossible to watch on a tablet. menus too small

[@inshine9826]

Video quality very worst

[@tryoskar]

Thank you!

[@staticmotion1628]

Thank you