Methods

Control and customize your marquee programmatically

Playback Control

play()

Starts or resumes the marquee animation with smooth acceleration.

• Smoothly accelerates to target speed
• Maintains hardware acceleration
• Preserves current position

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

// Start or resume animation
marquee.play();

// Example: Play/Pause toggle
let isPlaying = true;
toggleButton.addEventListener('click', () => {
  if (isPlaying) {
    marquee.pause();
    toggleButton.textContent = "Play";
  } else {
    marquee.play();
    toggleButton.textContent = "Pause";
  }
  isPlaying = !isPlaying;
});

pause()

Gradually slows the marquee to a smooth stop.

• Uses smooth deceleration
• Maintains current position
• Can be resumed with play()

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

// Example: Pause on video play
const video = document.querySelector("#promo-video");

video.addEventListener("play", () => {
  marquee.pause();  // Smoothly pause marquee
});

video.addEventListener("pause", () => {
  marquee.play();   // Resume marquee
});

Speed Control

setSpeed(speed: number)

Updates the marquee scroll speed with smooth transition.

• Smoothly transitions to new speed
• Maintains scroll position
• Hardware accelerated

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

// Example: Speed control with range input
const speedControl = document.querySelector("#speed-slider");
speedControl.addEventListener("input", (e) => {
  const newSpeed = parseInt(e.target.value);
  marquee.setSpeed(newSpeed);
});

// Example: Speed presets
const speeds = {
  slow: 30,
  normal: 50,
  fast: 80
};

function setSpeedPreset(preset) {
  marquee.setSpeed(speeds[preset]);
  
  // Update UI
  document.querySelector(".active-speed")?.classList.remove("active-speed");
  document.querySelector(`[data-speed="${preset}"]`).classList.add("active-speed");
}

Visual Adjustments

setBorderRadius(radius: number)

Updates the border radius of all images with smooth transition.

• Affects all images instantly
• Smooth transition animation
• Can be used for dynamic effects

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

// Example: Shape toggle button
let isCircular = false;
const toggleShape = () => {
  isCircular = !isCircular;
  marquee.setBorderRadius(isCircular ? 9999 : 8);
  
  shapeButton.textContent = isCircular ? 
    "Make Square" : "Make Circular";
};

// Example: Border radius slider
radiusSlider.addEventListener("input", (e) => {
  marquee.setBorderRadius(parseInt(e.target.value));
});

Advanced Usage

Combining Methods

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

// Create an interactive control panel
class MarqueeController {
  constructor(marquee) {
    this.marquee = marquee;
    this.isPlaying = true;
    this.isCircular = false;
    this.currentSpeed = 50;
    this.setupControls();
  }

  setupControls() {
    // Speed control
    this.speedSlider = document.querySelector("#speed");
    this.speedSlider.addEventListener("input", (e) => {
      this.currentSpeed = parseInt(e.target.value);
      this.marquee.setSpeed(this.currentSpeed);
      this.updateSpeedDisplay();
    });

    // Play/Pause toggle
    this.playButton = document.querySelector("#playPause");
    this.playButton.addEventListener("click", () => {
      this.isPlaying ? this.marquee.pause() : this.marquee.play();
      this.isPlaying = !this.isPlaying;
      this.updatePlayButton();
    });

    // Shape toggle
    this.shapeButton = document.querySelector("#shapeToggle");
    this.shapeButton.addEventListener("click", () => {
      this.isCircular = !this.isCircular;
      this.marquee.setBorderRadius(this.isCircular ? 9999 : 8);
      this.updateShapeButton();
    });
  }

  updateSpeedDisplay() {
    document.querySelector("#speedValue").textContent = this.currentSpeed;
  }

  updatePlayButton() {
    this.playButton.textContent = this.isPlaying ? "Pause" : "Play";
  }

  updateShapeButton() {
    this.shapeButton.textContent = this.isCircular ? 
      "Make Square" : "Make Circular";
  }
}

// Initialize controller
new MarqueeController(marquee);

Responsive Behavior

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

// Adjust marquee based on viewport size
function updateMarqueeForViewport() {
  const viewportWidth = window.innerWidth;
  
  if (viewportWidth < 768) {
    marquee.setSpeed(30);  // Slower on mobile
    marquee.setBorderRadius(4);  // Smaller radius
  } else {
    marquee.setSpeed(50);  // Normal speed on desktop
    marquee.setBorderRadius(8);  // Normal radius
  }
}

// Listen for resize events
window.addEventListener('resize', 
  debounce(updateMarqueeForViewport, 250)
);

// Initial setup
updateMarqueeForViewport();

Cleanup

destroy()

Cleans up the marquee instance and removes all event listeners.

• Stops all animations
• Removes event listeners
• Cleans up DOM elements
• Prevents memory leaks

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

// Example: Cleanup when component unmounts
function cleanup() {
  marquee.destroy();  // Clean up instance
}

// Example: Dynamic content updates
function updateContent(newImages) {
  marquee.destroy();  // Clean up old instance
  
  // Create new instance with new images
  return new MarqueeKit("#dynamic-marquee", {
    ...options,
    images: newImages
  });
}