MarqueeKit

Troubleshooting & FAQ

Common issues, solutions, and best practices

Common Issues

Images not loading or displaying correctly

Check the following:

  • Verify image and file paths are correct and that they exist
  • Ensure id in HTML matches id in JS
  • Ensure images are fully downloaded before initialization
  • Check browser console for any 404 errors

Solutions:

1. Making sure these paths are correct


<link rel="stylesheet" href="/styles/marquee.css"> // check this path
<script src="/scripts/marquee.js"></script> // and this one

2. Making sure images exist and paths to them are correct



const images1 = [
  "images/image1.webp", // check each image path
  "images/image2.webp",
  "images/image3.webp",
  "images/image4.webp",
];

3. Ensuring the id's match up from the HTML to the JS



new MarqueeKit("#image-marquee", { // the id here
    images: images1,
    height: 300,   
    imageWidth: 250,     
    speed: 50,        
    gap: 20, 
    reverse: false,
    imageScale: 1,
    pauseOnHover: false,
    borderRadius: 8        
});

<div class="marquee-wrapper">
  <h1>MarqueeKit Examples</h1>  
  <section class="image-marquee">
    <h2>Basic Marquee</h2>
    <div id="image-marquee"></div> // matches the id here
  </section>
</div>

Marquee not animating

Common causes:

  • Container has zero width or height
  • Speed setting is too low
  • JavaScript errors preventing initialization

Solution:

// Ensure container has explicit dimensions
const container = document.querySelector("#my-marquee");
container.style.height = "300px";  // Set explicit height
container.style.width = "100%";    // Set explicit width

new MarqueeKit("#my-marquee", {
  speed: 50,  // Try increasing speed if animation is too slow
  // ... other options
});

Performance issues

If experiencing lag or stuttering:

  • Optimize image sizes
  • Reduce number of simultaneous marquees
  • Use appropriate image dimensions

Recommended image settings:

// Optimize for performance
new MarqueeKit("#my-marquee", {
  imageWidth: 250,    // Keep reasonable dimensions
  height: 300,       // Avoid excessive sizes
  gap: 20,          // Maintain reasonable gaps
  // Use optimized images (WebP if possible)
  images: [
    "/images/optimized1.webp",
    "/images/optimized2.webp"
  ]
});

Best Practices

Image Optimization

  • • Use WebP format when possible
  • • Optimize images for their display size
  • • Keep file sizes under 200KB per image
  • • Use consistent image dimensions

Performance Tips

  • • Lazy load images for marquees below the fold
  • • Use reasonable animation speeds (30-70)
  • • Limit the number of simultaneous marquees
  • • Clean up instances when no longer needed

Responsive Design

  • • Use percentage-based widths for containers
  • • Adjust image sizes for different viewports
  • • Consider mobile performance

Browser Compatibility

MarqueeKit is compatible with:

Supported Browsers

  • ✓ Chrome 60+
  • ✓ Firefox 54+
  • ✓ Safari 11+
  • ✓ Edge 79+

Required Features

  • • requestAnimationFrame
  • • CSS transforms
  • • Intersection Observer
  • • ES6 support

Frequently Asked Questions

How can I pause/resume the marquee programmatically?

Use the built-in pause and play methods:

const marquee = new MarqueeKit("#my-marquee", options);

// Pause the marquee
marquee.pause();

// Resume the marquee
marquee.play();

Can I change settings after initialization?

Yes, use the appropriate setter methods:

const marquee = new MarqueeKit("#my-marquee", options);

// Update settings
marquee.setSpeed(100);
marquee.setBorderRadius(16);