You Can't Find a Better Infinite Marquee

11.22.2023

Web Bae

CSS

Marquee

DEMO/CLONE

TUTORIAL

CODE

See the Pen Splide Slider by learyjk (@learyjk) on CodePen.

Acknowledgements:

Here's a CSS-only infinite marquee you can drop in to any Webflow project. Scrolling marquees are a great way to draw attention to content, add a retro feel, bring some additional life to the page, or fit lots of similar content inside a small space. I commonly see these used with logos in a section for building social trust i.e. "clients we've worked with" or with big ALL CAPS text to bring emphasis to certain copy.

It's important to note that an infinite marquee can also be distracting, annoying, or even inaccessible to some users, especially those with motion sensitivity, visual impairments, or using assistive technologies. So it's important to use animation sparingly and ensure that it doesn't interfere with the usability or accessibility of the website.

Scrolling marquees used to be so popular that there was (and still is, though deprecated) an HTML <marquee> tag. I haven't seen this tag used in ages. Instead most scrolling marquees are implemented with Javascript (hint hint I made one with GSAP). What's great about this CSS only solution is that the code is quite simple, flexible, and the result is viewable right in Webflow designer!

Drop the below code into an embed on page (you could also add it to the <head> section, though the results wont be live). Then you'll need to add your marquee and marquee-content classes to the page, fill them with content, and finally apply the scroll combo class to get things moving!

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 1rem));
  }
}

.scroll {
  animation: scroll 10s linear infinite;
}

.reverse {
  animation-direction: reverse;
}

Let's breakdown the custom CSS used to create this scrolling marquee:

@keyframes is a CSS rule that defines an animation sequence. In this code, we're creating a keyframe animation called "scroll" which will move an element horizontally from left to right.
The from and to keywords are used to define the starting and ending points of the animation. In this case, we're using the transform property to move the element horizontally using the translateX() function. The starting point is translateX(0) which means the element is in its original position. The ending point is translateX(calc(-100% - 1rem)) which means the element will move leftwards by a distance of 100% (the full width of the element) plus 1rem (an additional unit of length) to create a scrolling effect.
The .scroll class is used to apply the animation to an element. The animation property is used to specify the name of the animation (in this case, "scroll"), the duration of the animation (10 seconds), the timing function (linear), and that the animation should repeat indefinitely (infinite).
The .reverse class is used to reverse the direction of the animation. The animation-direction property is set to reverse, which means that the animation will play backwards, effectively scrolling the element from right to left.

This tutorial has been really popular and folks have pointed out some helpful tips! Here are some additional notes for this build:

in calc(-100% - 1rem), the value of 1rem to subtracted is chosen based on the spacing of elements inside the marquee-content div. In my example on Webflow, this is set with the flexbox gap property. So make sure these match otherwise you won't get a smooth marquee.
Are you using images? Be sure to set the load property to eager in Webflow., and the width to 100%. If you don't, Webflow's lazy load code won't think the images are on screen and they won't be rendered.
Using flexbox in marquee? Be sure to set sizing of the child, marquee-content, to "Don't shrink or grow.
The CSS above also defines a class called reverse. Add this as a combo class to your element with the scroll combo class and it will animate in the opposite direction.