SSMarquee Documentation

Basic Usage

Add the ss-marquee attribute to create a marquee:

Your scrolling content here

Configuration Options [Add Attributes] [Optional]

Set Movement Speed in milliseconds

    ss-marquee-speed="50"

Set Movement Direction (left, right)

    ss-marquee-direction="left"

Set Number of Duplicates

    ss-marquee-duplicates="4"

Pause on Hover

    ss-marquee-pause-hover="true"

Pause When Not Visible

    ss-marquee-pause-visible="true"

Step-by-Step Implementation

1. Install the package:

   npm install @imshaiksaif/webflow-marquee

2. Add the required script to your HTML:

   <script defer src="https://cdn.jsdelivr.net/npm/@imshaiksaif/[email protected]/dist/marqueeHandler.js"></script>
   

3. Add the ss-marquee attribute to your HTML element:

   <div ss-marquee>
     <div class="marquee-content">
       Your scrolling content here
     </div>
   </div>

4. Customize the marquee using attributes:

   <div
     ss-marquee
     ss-marquee-speed="50"
     ss-marquee-direction="left"
     ss-marquee-duplicates="4"
     ss-marquee-pause-hover="true"
     ss-marquee-pause-visible="true"
   >
     <div class="marquee-content">
       <div class="marquee-item">Item 1</div>
       <div class="marquee-item">Item 2</div>
       <div class="marquee-item">Item 3</div>
     </div>
   </div>

5. Ensure the default marquee element is set to display: flex and justify-content: flex-start:

   .marquee-content {
     display: flex;
     justify-content: flex-start;
     gap: 20px; /* Adjust gap as needed */
   }

JavaScript API

Control marquees programmatically:

// Get marquee instance
const element = document.querySelector('\[ss-marquee\]'); const marquee = element.ssMarquee;
// Control methods
marquee.pause(); // Pause animation
marquee.resume(); // Resume animation
marquee.start(); // Start animation
marquee.stop(); // Stop and reset
marquee.destroy(); // Remove marquee functionality

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