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