Webflow Marquee
A lightweight, customizable GSAP-powered marquee library. Add smooth, responsive scrolling text or any element with simple attribute-based setup—perfect for news, stock tickers, and more. Enhance your site with dynamic animations in minutes!
Step #1
<script> and paste into the <body> of your page<!-- [ShaikSaif PowerUps] Webflow Marquee -->
<script defer src="https://cdn.jsdelivr.net/npm/@imshaiksaif/webflow-marquee@3/dist/marqueeHandler.js"></script>Step #2
Below is a list of required attributes:
Ensure this is the element containing all the children you want to loop and duplicate infinitely.
[Optional]Below is a list of Attributes that can help you customize your Marquee.
Ensure this is the element containing all the children you want to loop and duplicate infinitely.
Default Value: 50
You can change the direction of the marquee.
Default Value: left
Accepted Values: left | right | up | down
To pause the marquee when the user hovers over it:
Default Value: false
Play the marquee only when the component is visible on the screen.
Default Value: false
Working examples
API
1// Get marquee instance
2const element = document.querySelector('[ss-marquee]');
3
4const marquee = element.ssMarquee;
5
6// Control methods
7marquee.pause(); // Pause animation
8marquee.resume(); // Resume animation
9marquee.start(); // Start animation
10marquee.stop(); // Stop and reset
11marquee.destroy(); // Remove marquee functionality
12
13// Update configuration
14marquee.update({ animation:
15 { speed: 100, direction: 'right', gap: 30, duplicates: 4 },
16 behavior: { pauseOnHover: true, pauseWhenNotVisible: true }
17 });FAQ's
Yes, SSMarquee is completely free to use! It’s an open-source library, and you can use it in both personal and commercial projects without any cost. However, we welcome donations or contributions to help maintain and improve the library.
Yes, you can! SSMarquee is a pure JavaScript solution, which means it can be integrated into most modern CMS platforms that allow custom HTML, CSS, or JavaScript. For WordPress, Wix, or Squarespace, you can embed the required script in the header/footer section and use the HTML attributes in your content.
Absolutely! SSMarquee provides multiple configuration options like ss-marquee-speed, ss-marquee-direction, ss-marquee-duplicates, and others that allow you to fully customize the behavior of the marquee. You can adjust the speed, direction (left/right), pause behavior, and even set the number of duplicate items that scroll in the loop.
Yes, SSMarquee includes a ss-marquee-pause-hover attribute that pauses the marquee animation when the user hovers over the marquee content. You can easily enable this feature by setting the attribute to true.
Yes, SSMarquee exposes a simple JavaScript API to control the marquee behavior. You can pause, resume, start, stop, or even reset the animation. The API also allows you to dynamically update the configuration, such as changing the speed or direction of the marquee.
Yes, SSMarquee is designed to work seamlessly on all modern browsers, including Chrome, Firefox, Safari, and Edge. It’s also fully responsive and works well on mobile devices, ensuring smooth scrolling on both desktop and mobile interfaces.
Yes, you can! SSMarquee can be used on CMS collections or dynamic content. You just need to make sure the dynamic content is rendered inside the ss-marquee container, and SSMarquee will handle the scrolling animation automatically.
Yes, here's the required structure:
- Marquee Container: Add the
ss-marqueeattribute to the container. - Content Wrapper: Inside the container, place a wrapper (e.g., a
div) for the scrolling items. - Individual Items: Place the items (e.g., text, images) inside the wrapper.
- CSS: Set the content wrapper to
display: flexand adjust item gaps.
Let's Take Care of your Webflow Site.
We're a tight-knit team of webflow experts that eat, sleep, breathe Webflow. You bring your ideas or designs and we will make it happen, no matter the complexity.
.svg)