Marquee-content NPM

1.5kB 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);

➤ Usage

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

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.