GSAP Marquee creates responsive, smooth, horizontal, endless-looping marquee-style carousels using the GSAP animation library. The plugin leverages GSAP's ticker for stable 60fps scrolling and calculates spacing accurately with getBoundingClientRect to preserve margins and gaps. Multiple instances can run concurrently with configurable direction, pause modes (hover, click, or programmatic), and options for continuous looping or single-pass playback. The marquee rebuilds automatically on window resize and supports reduced motion preferences and keyboard navigation for accessibility. Integration requires including GSAP (and optional jQuery) and initializing a wrapper element containing the marquee items.
GSAP Marquee is a lightweight JavaScript/jQuery plugin that creates responsive, smooth, horizontal, endless-looping, marquee-style carousels using the GSAP animation library. It's built to generate a fluid and marquee-like animation that feels much smoother than traditional CSS approaches. Useful for displaying content like logos, news feeds, stock price, or image galleries in a compact, continuous loop. Features: Ticker-driven animation: Uses GSAP's ticker system for smooth 60fps scrolling performance.
Accurate spacing calculations: Handles margins and gaps correctly using getBoundingClientRect measurements. Multiple instance support: Run several marquees on the same page without conflicts. Flexible direction control: Switch between left-to-right and right-to-left scrolling. Interactive pause modes: Pause on hover, click, or programmatically control playback. Responsive design: Automatically rebuilds on window resize events. Accessibility features: Support for reduced motion preferences and keyboard navigation. Loop or single-run modes: Choose continuous looping or single-pass animation.
Collection
[
|
...
]