Creating a Marquee Looping Animation with CSS

[titian.steiger]

I couldn’t find an up-to-date guide on how to build an infinitely horizontally scrolling marquee section so I wanted to share my approach with all of you.

It is fully responsive and works with just a bit of custom CSS.

1. First, install the Classify plugin. It gives you the power to assign CSS classes to your elements.
2. Create your marquee section by combining the following standard elements:

• G:Marquee wraps the horizontally moving content.
  Configuration:
  Container layout → Align to parent
Fit height to content →
• Inside the main container, we stack two identical G:MarqueeContent groups behind each other.
  Configuration:
  Container layout → Row
Container alignment → Space around
Min width → 100%
Fit width to content →
• Lastly, we place all the IMG:PartnerLogo images within the content groups.
  Configuration:
  Width → 120px
Keep element aspect ratio fixed →
  
  

3. Add CSS classes to your groups by adding the following expressions to their ID Attribute fields:

• G:Marquee → {addClass: “marquee”}
• G:MarqueeContent → {addClass: “marquee_content”}
  
  

4. Add a HTML element to the page to define the custom CSS styling that will create the infinite scrolling effect.
   
   

Here is the full CSS code for easier copy-and-pasting:

<style>
.marquee {
  --gap: 1rem;
  display: flex !important;
  overflow: hidden !important;
  user-select: none;
  gap: var(--gap);
}

.marquee_content {
  flex-shrink: 0;
  gap: var(--gap);
  animation: scroll 20s linear infinite;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
</style>

And here how it will look at the end (red & blue backgrounds are just for demo purposes to show when the loop is reset):

Bubble | Marquee Animation - Watch Video

Hope this is useful for anyone trying to build a similar functionality!