Creating a Marquee Looping Animation with CSS

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.
    Container layoutAlign to parent
    Fit height to content:ballot_box_with_check:
  • Inside the main container, we stack two identical G:MarqueeContent groups behind each other.
    Container layoutRow
    Container alignmentSpace around
    Min width100%
    Fit width to content:ballot_box_with_check:
  • Lastly, we place all the IMG:PartnerLogo images within the content groups.
    Keep element aspect ratio fixed:ballot_box_with_check:
  1. Add CSS classes to your groups by adding the following expressions to their ID Attribute fields:
  1. 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:

.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)));

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!