marquee-content

A simple, lightweight library for creating the effect of running horizontal blocks of content, also known as a marquee or ticker. Uses GSAP and Resize Observer for better performance.

^{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 option element defines the DOM element to which the animation will be applied. This option offers two ways to specify the target element: 1. As a string with a CSS selector. If element is given as a string, it is used to find the element in the DOM through the document.querySelector method. This allows for easy identification of elements by their id, class, or other selector. 2. As an HTMLElement object. If element is already an HTMLElement object, it is used directly, without the need for additional searching in the DOM.

➤ Settings

Option	Default	Description
data-mc-duration	20	Sets the duration of content scrolling in seconds. It is acceptable to use decimals.
data-mc-direction	rtl	rtl — default value, no need to specify. ltr — changes the scroll direction from left to right. auto — auto changes the direction of the animation as the page is scrolled.
data-mc-skew	null	Transforms the component by tilting it along the Y axis (a positive or negative value is acceptable).
data-mc-min	null	Sets the minimum width at which the animation will play (when the breakpoint intersects, the cloned elements are removed and the component styles are cleared).
data-mc-max	null	Sets the maximum width.

➤ License

marquee-content is released under MIT license.