In this Webflow Tutorial we'll learn how to create Infinite Marquees directly within Webflow. Zero Code & no Extensions required!
Building Infinite Sliders (or Marquees as they are called) is not as difficult as it looks at first glance. All we have to do is set up some styled Div Blocks, our Marquee Content, as well as a very simple Interaction that Loops infinitely. Now let’s get started building this amazing infinite Marquee in just a few simple Steps!
Just so we are all on the same starting Point, I have simply created a new Webflow Project. It’s completely empty and has no Styles in its current state.
If you already have a Project with Basic Section & Container Classes set up, feel free to skip Step 1 and jump straight to Step 2
Before we start building our Marquee let’s take a look at how it’s constructed.
In the Image above we see that the Marquee itself consists of a Div Block called Marquee with 2 additional Divs called Marquee Slider Wrapper that hold our Content, in this case some Brand Logos.
Let’s start by building the Basic Section & Container Structure first:
Now let’s add the Container:
Next up, let’s build the actual Marquee:
Now that we have Marquee Class setup, we need to add another Div Block inside the Marquee that we’ve just created:
We also need to set the Width of the Marquee. In order to make it responsive for all Screen Sizes we will give it a set width. In my case I will set the Width to 1264px. The Value comes from the Size of the Container minus the Padding of the Container, which in this case is 24px on both sides. So we take the Container Size of 1312px and remove 48px which results in a Size of 1264px. Feel free to adjust these Numbers to your specific use case.
Alright, now that we have finished the Structure of our new Marquee, we need to add some Content. Now, this Content can be essentially anything we want it to be. For the sake of this Tutorial we will go with some simple Text.
Now that we finished creating the Content of our Marquee, all that’s left is to duplicate the Marquee Slider Wrapper.
Next we have to create a simple Loop Interaction so the Slider moves from right to left (or alternatively from left to right).
Now to test the Animation. Click on Preview and watch the Magic happen. As you can see the Marquee is working perfectly even across the different Breakpoints.
But what if we want to reverse the direction of the Infinite Marquee? To achieve that we simply have to tweak some numbers in the Interaction.
Go back to the Interactions Panel and select your Marquee Animation. To switch the sides select the first Move Action and change the X-Axis from 0% to -100%. Then select the second Move Action and set it to 0% instead of -100%.
And that’s it! You’ve successfully built an Infinite Marquee without Code directly in Webflow.