Open Source Library

Webflow Custom Marquee.
GSAP Limitless Scrolling.

The library is designed to easily create smooth, responsive marquees in Webflow. Follow these steps to implement high-performance GSAP scrolling into your projects in minutes.

1

Install the Script

Navigate to your Webflow project settings (or individual page settings). Paste the core library script into the Before </body> tag section.

<body> Custom Code
<!-- [ShaikSaif PowerUps] Webflow Marquee -->
<script defer src="https://cdn.jsdelivr.net/npm/@imshaiksaif/webflow-marquee@latest/dist/marqueeHandler.js"></script>
2

HTML Structure

Create a container block in Webflow. Add the custom attribute ss-marquee="" to initialize it. Ensure your inner wrapper is set to Flexbox.

Webflow Structure Overview

Element Tree

<div ss-marquee>   <!-- Container -->
<div style="display: flex">    <!-- Wrapper -->
<div>Item 1</div>            <!-- Content -->
<div>Item 2</div>
</div>
</div>
3

Configuration Attributes

Fine-tune your marquee behavior by applying these optional attributes to the exact same element where you placed ss-marquee. Click an attribute below to copy it.

1. Custom Speed

Defines the scrolling duration in milliseconds. Lower numbers mean faster speeds. If omitted, the default is 50.

Fast Speed Preview
SPEED=10
SPEED=10
SPEED=10
SPEED=10
SPEED=10
SPEED=10
Speed Attribute in Webflow

2. Scroll Direction

Changes the flow. Accepted values are left, right, up, or down. Default is left.

Direction: Right Preview
→ GOING RIGHT
→ GOING RIGHT
→ GOING RIGHT
→ GOING RIGHT
→ GOING RIGHT
→ GOING RIGHT
Direction Attribute in Webflow

3. Pause on Hover

Setting this to true halts the animation automatically when a user's cursor enters the marquee container. Highly recommended for accessibility.

Hover Me Preview
HOVER TO PAUSE
HOVER TO PAUSE
HOVER TO PAUSE
HOVER TO PAUSE
HOVER TO PAUSE
HOVER TO PAUSE
Pause on Hover Attribute in Webflow

4. Play Only When Visible

Performance optimization. Setting this to true uses Intersection Oberservers to only calculate and run animations when the marquee is actually visible on the screen.

Pause Visible Attribute in Webflow

JavaScript API

For developers building advanced integrations, SSMarquee exposes a stable API to control instances dynamically.

// 1. Get the marquee element instance
const element = document.querySelector('[ss-marquee]');
const marquee = element.ssMarquee;

// 2. Control methods
marquee.pause();   // Pause animation
marquee.resume();  // Resume animation
marquee.start();   // Start animation from scratch
marquee.stop();    // Stop and reset
marquee.destroy(); // Remove all event listeners and functionality

// 3. Update configuration dynamically
marquee.update({
animation: {
speed: 100,
direction: 'right',
gap: 30,
duplicates: 4
},
behavior: {
pauseOnHover: true,
pauseWhenNotVisible: true
}
});

FAQ's

Is SSMarquee free to use?

Yes, SSMarquee is completely free and open-source. You can use it in both personal and commercial projects.

Can I use it on other platforms?

Yes, it is a pure JS solution. If you can embed the script and apply HTML attributes, it works.

Does it work with CMS collections?

Absolutely! Make sure your dynamic collection list wrapper has `display: flex` and sits inside the container.

Is it responsive?

Yes, GSAP calculates the dimensions automatically. It adapts to all screen sizes without breaking.