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
➤ 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.