Is there a way in Webflow to continuously loop a banner at the top of a page, so that the first person in the image follows straight after the last person?

Published on
September 22, 2023

Yes, in Webflow, there is the option to create a continuously looping banner at the top of a page. Here's how you can achieve this:

  1. Create your banner section: Start by adding a section element to your page and give it a class name (e.g., "banner-section").

  2. Design your banner: Within the section, add a div block (e.g., "banner-wrapper") and set its position to relative. You can then add another div block inside the wrapper (e.g., "banner-container") and set its position to absolute. This will allow the container to be positioned relative to the wrapper div.

  3. Add images: Inside the container, add individual div blocks for each image you want to include in the banner. Place your images as background images for these div blocks and make sure they have the same width as the wrapper. You can adjust the height and other styling properties to suit your design.

  4. Create the looping effect: To create a continuous loop, duplicate the images within the container div and arrange them side by side. This way, the first person in the image will follow directly after the last person when the banner loops.

  5. Apply interactions: Assign a class name (e.g., "banner-animation") to the container div. Then, using the interactions panel, create an interaction for the banner-animation class. Set the initial appearance of the container div to show only the first set of images. Add a scroll animation that moves the container div horizontally by the width of each image. Set the animation duration to cover the time it takes for one image to appear and shift out of view.

  6. Enable loop: In the interactions panel, check the "Loop" option for the scroll animation. This will ensure that the banner continuously loops without any interruption.

  7. Apply to page: Finally, apply the "banner-section" class to the section element at the top of your page. With all the settings in place, the banner will now loop seamlessly, showcasing the images in a continuous loop.

By following these steps, you can create a continuously looping banner at the top of your Webflow page, ensuring that the first person in the image always follows straight after the last person.

Additional Questions:

  1. How do I create a continuously looping banner in Webflow?
  2. Can I make a banner continuously loop in Webflow?
  3. What steps should I follow to make a looping banner in Webflow?