marquee-content

^{MarqueeContent provides a set of tools for creating dynamic and adaptive ticker animations on web pages using GSAP and ScrollTrigger. It offers seamless integration with media queries, automatic element cloning for continuous scrolling effects, and efficient handling of resize events. Additionally, it supports customizable animation directions and skew effects, ensuring smooth and visually appealing ticker animations across different screen sizes and orientations.}

^{1kB gzipped}

Demo

➤ Install

yarn add gsap
yarn add marquee-content

➤ Import

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import MarqueeContent from 'marquee-content';

gsap.registerPlugin(ScrollTrigger);
MarqueeContent.registerGSAP(gsap, ScrollTrigger);

➤ Usage

const marquee = new MarqueeContent({
  element: '.marquee',
});

marquee.init();

_or

document.querySelectorAll('.marquee').forEach((element) => {
  const marquee = new MarqueeContent({
    element,
  });

  marquee.init();
});

➤ Options

Option	Type	Default	Description
element	string | HTMLElement	.marquee	The DOM element for the animation. Can be a CSS selector (string) or an HTMLElement object.

➤ Settings

data-*	Default	Description
data-mc-speed	20	Sets the speed of the marquee animation. Lower values make the animation faster, while higher values make it slower.
data-mc-direction	rtl	Scroll direction. Options: rtl (default), ltr (left to right), auto (changes direction based on scrolling).
data-mc-skew	null	Tilts the component along the Y axis. Accepts positive or negative values.
data-mc-min	null	Minimum width for the animation to play.
data-mc-max	null	Maximum width for the animation to play.

➤ License

marquee-content is released under MIT license.