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.