How to create Marquee Endless Loop Animation in Webflow (without Animation, JS or CSS)

Community resources Show & Tell
1

Namaste Everyone

I have created a custom webflow solution for webflow
It enables you to use marquee tag inside webflow designer

Youtube Video: Create Infinite Marquee Animation (without Animation, CSS or JS) - YouTube
Marquee copy-paste: Webflow Marquee Tag Element (Copy & Paste)

Simply copy and paste <marquee> tag inside webflow and add your elements (anything you want and style)

You can also add normal marquee-supported attributes: <marquee>: The Marquee element - HTML: HyperText Markup Language | MDN

Thanks :slight_smile:
Let me know how I can be more helpful

2

The <marquee> tag has been depreciated for quite some time.

Glad to share my marquee (or carousel ) solutions!

By JavaScript

For the JavaScript method, all you need to do is to place this in the footer code.

<!-- marquee3k -->
<script src="https://cdn.jsdelivr.net/npm/marquee3000@1.1.1/marquee3k.min.js"></script>
<script>Marquee3k.init();</script>

If you want to repeat elements to make it long enough for looping, you can add the below script in the footer code as well, and then you can add a data-repeat="x6" attribute to the element.

<!-- Repeat Elements -->
<!-- Example: [data-repeat="x6"] -->
<script>
document.querySelectorAll("[data-repeat]").forEach(function (element) {
  const repeatCount = parseInt(element.getAttribute("data-repeat")?.substring(1));
  if (isNaN(repeatCount) || repeatCount < 1) return; // skip if repeat count is invalid
  for (let i = 1; i < repeatCount; i++) {
    const clone = element.cloneNode(true);
    element.parentNode.insertBefore(clone, element.nextSibling);
  }
});
</script>

By Pure CSS

If you want to create a marquee by using pure CSS, you can try this:

<style>
/* marquee */
/* define the marquee animation */
@keyframes marquee { from { transform: translateX(0%); } to { transform: translateX(-100%); } }
@keyframes marquee200p { from { transform: translateX(0%); } to { transform: translateX(-200%); } }
/* optional: make them attributes */
[animation="marquee"] { animation: marquee 20s linear infinite; }
[animation="marquee200p"] { animation: marquee200p 20s linear infinite; }
</style>

For the Webflow (the HTML) part, please see the Demo:
https://s2-framework.webflow.io/s2/components#marquee

In the demo of the CSS version, you can see that animation-play-state: paused is added to the hover state. Hover to pause is then possible!

Feel free to clone and try :star_struck: