Infinite Carousel Loop in Webflow (No Code Needed!)

I'm going to teach you how to create this infinite looping Carousel in webflow with absolutely no code so let's hop into webflow I have my hero section designed out and my Carousel is going to go just down here so I'm going to add a div block and I'm going to call it my Carousel container inside of my Carousel container I'm going to add another div block and I'm going to call it my logo container and my logo container I'm going to add some padding we'll say 30 on the top 30 on the bottom and then a black background now inside my logo container I'm going to add five images I'll just start with one image and give it a class and then duplicate that after I've set up the class so I'll call it my logo image and give it a height of 50 pixels and then what I'm going to do is I'm just going to duplicate it four more times so there's a total of five logos you can add as many as you want or whatever if you're doing text content you can style that however you want I'm going to switch these over so they're unique logos okay so now what I'm going to do is I'm going to take my logo container and space out these logo images so flex and then this far right one is space around so it's an equal spacing in between this is necessary if you don't do this there's going to be some jerkiness in your Carousel that you do not want so now that we have this set up I need to add a second logo container on the right side kind of off screen green so what I'm going to do is I'm going to copy my logo container hit my Carousel container and then paste so now we have two logo containers in the carousel container now to get them side by side all I have to do is hit Flex display Flex on the carousel container so that works however the sizing is not right here it kind of crunched them together so the way that we fix that is we have to give them a set width now if I add 100 width it's not going to work I need to say a minimum width of a hundred percent and that's going to make sure that it spans the entire width of its parent which is the carousel container now it does go off screen so what you need to do is you need to click your Carousel container and then hit overflow hidden and now I can't scroll over to the right this second logo container is hidden until it comes into view now to make sure it's working correctly you can click your logo container hit position relative and then move it over to the left and you should see this second logo container come in this screen now if it's not working then it probably means you missed a step or something isn't set up correctly and you'll have to fix that before moving on if it is working let's move on to the next step which is actually setting up the animation so you can do this a couple of different ways you can do element trigger and then scroll into view which is oftentimes what I do in this case I'm just going to do a page trigger either way would work so I'm going to do page load action start an animation and then I'm going to add a new one and we'll call this one my infinite Loop and I'm going to spell it correctly here okay now what I can do is I can click my logo container and I'm going to hit move it's a really simple animation there's not going to be a lot of interactions here so all I'm going to do is I'm going to type in negative 100 percent and what that does is it moves it over a hundred percent of its parents container width which is exactly what I wanted now the reason why it kind of disappeared is because this Lo this second logo container isn't being targeted so all I have to do is change it to affect the class and now it's affecting both of these and not just one of them so what we're seeing here is actually this second one which was over here on the right side it moved over a hundred percent so it's in place of this first one and then we can give it a duration you can pick how fast you want it to go you can play it here and see how quick it's going now the one thing we need to do if we save it and then hit Loop it will Loop but the issue is the loop is going to get stuck here at the end because it it doesn't know to go back to the beginning so we have to actually give it a beginning so we'll duplicate it go to this first one and bring it back to its beginning position which was zero percent now if we save it and then preview it it will Loop and it will go back to the beginning sometimes what I do if there's a little bit of a Herky jerkiness at the end what I'll do is I'll change this to something like negative 99.9 or something like that it depends on what exactly you're doing and how you're styling it but just something to keep in mind you may have to to do something like that to get it to to fix the jerkiness and then that's really it so if we go here and we watch it we'll give it 10 seconds and the loop should stop right about here or it should reset right about here because this is the first one and it does it's working perfectly and then the final styling that I did for this Carousel again you can style it however you want was I gave it a Max width now the reason why we set it up to go negative 100 so we'll go back here the reason why we set it to negative 100 percent and not 100 viewport width is because of what I'm about to do which is I'm going to change the container width of my Carousel container and when I change the container width I want these logo containers to animate based on this width and not the viewport width so hopefully you're following me but this is this is a client website that I did and this is exactly what I'm talking about this Carousel needed to to fit this box with and not the entire viewport width and that's very common so I like to set it up with a hundred percent animation but you know you obviously can can fix it to whatever it is you're doing so we'll say 1200 pixel and then we'll move it to the center maybe we'll do 1400 pixel and then give it a radius of a hundred and then we hit play here and it'll Loop exactly how we want it to because the animation's already set up and this will also work on mobile you can change the width say for example you go on mobile device and you can change the logo container to like 300 percent and then you will need to change the height to like 25 percent of the logos it will still work and it will still Loop correctly even if you change the percent of the logo container so just keep that in mind it's designed to work for mobile responsiveness as well hope you enjoyed this video and we will see you in the next one bye

Channel: Red Panther

Views: 52,968

Keywords: webflow carousel, webflow marquee, webflow infinite content

Id: EgsgZi07KwE

Length: 6min 49sec (409 seconds)

Published: Thu Aug 31 2023