➤ Install
``console
yarn add gsap
yarn add marquee-content
`



➤ Import
`javascript
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import MarqueeContent from 'marquee-content';

gsap.registerPlugin(ScrollTrigger);
`



➤ Usage
`javascript
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. |

➤ License

marquee-content is released under MIT license.