gsap-react-marquee 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 David Domenico Piscopo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,48 @@
+# GSAP React Marquee
+
+A high-performance, customizable React marquee component powered by GSAP animations.
+
+## Installation
+
+```bash
+npm install gsap-react-marquee
+# or
+yarn add gsap-react-marquee
+# or
+pnpm add gsap-react-marquee
+```
+
+## Usage
+
+```tsx
+import Marquee from "gsap-react-marquee";
+
+function App() {
+  return (
+    <Marquee dir="right" speed={100} fill={true} spacing={16}>
+      <div>Hello world</div>
+    </Marquee>
+  );
+}
+```
+
+## Props
+
+| Prop                 | Type                                  | Default   | Description                                                                             |
+| -------------------- | ------------------------------------- | --------- | --------------------------------------------------------------------------------------- |
+| `children`           | `ReactNode`                           | –         | Content to render inside the marquee                                                    |
+| `className`          | `string`                              | –         | Additional CSS classes for styling                                                      |
+| `dir`                | `"right" \| "left" \| "up" \| "down"` | `"right"` | Direction of the marquee movement                                                       |
+| `loop`               | `number`                              | `-1`      | Number of loops (`-1` = infinite)                                                       |
+| `paused`             | `boolean`                             | `false`   | Whether the marquee animation should be paused                                          |
+| `alignRotationWithY` | `boolean`                             | `false`   | Correctly orients (rotates) the content along Y axis (⚠️ avoid with `"left"`/`"right"`) |
+| `delay`              | `number`                              | `0`       | Delay before the animation starts                                                       |
+| `speed`              | `number`                              | `100`     | Speed of the marquee animation in px/s                                                  |
+| `fill`               | `boolean`                             | `false`   | Whether the marquee should continuously fill the space                                  |
+| `pauseOnHover`       | `boolean`                             | `false`   | Pause the marquee when hovering                                                         |
+| `gradient`           | `boolean`                             | `false`   | Enable gradient overlay                                                                 |
+| `gradientColor`      | `string`                              | –         | Color of the gradient if enabled                                                        |
+| `spacing`            | `number`                              | `16`      | Spacing between repeated elements in px                                                 |
+| `draggable`          | `boolean`                             | `false`   | Enable dragging to scroll manually                                                      |
+| `followScrollDir`    | `boolean`                             | `false`   | Sync marquee with page scroll direction                                                 |
+| `scrollSpeed`        | `number`                              | –         | Speed factor when syncing with page scroll                                              |

package/dist/components/gsap-react-marquee.d.ts

@@ -0,0 +1,4 @@
+import "./gsap-react-marquee.style.css";
+import type { GSAPReactMarqueeProps } from "./gsap-react-marquee.type";
+declare const GSAPReactMarquee: import("react").ForwardRefExoticComponent<GSAPReactMarqueeProps & import("react").RefAttributes<HTMLDivElement>>;
+export default GSAPReactMarquee;

package/dist/components/gsap-react-marquee.type.d.ts

@@ -0,0 +1,91 @@
+import type { ReactNode } from "react";
+export type GSAPReactMarqueeProps = {
+    /** Content to render inside the marquee */
+    children: ReactNode;
+    /** Additional CSS classes for styling */
+    className?: string;
+    /**
+     * @description Direction of the marquee movement
+     * @type {"right" | "left" | "up" | "down"}
+     * @default "right"
+     */
+    dir?: "right" | "left" | "up" | "down";
+    /**
+     * @description The number of times the marquee should loop, -1 is equivalent to infinite
+     * @type {number}
+     * @default -1
+     */
+    loop?: number;
+    /**
+     * @description Whether the marquee animation should be paused
+     * @type {boolean}
+     * @default false
+     */
+    paused?: boolean;
+    /**
+     * @description Correctly orients (rotates) the content with respect to the Y axis.
+     * Useful for vertical movement ("up" | "down") to keep items upright via rotation fix.
+     * @issue ⚠️ Not recommended to use together with "left" or "right" direction, as it may cause layout issues.
+     * @type {boolean}
+     * @default false
+     */
+    alignRotationWithY?: boolean;
+    /**
+     * @description Delay before the animation starts
+     * @type {number}
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * @description Speed of the marquee animation in px/s
+     * @type {number}
+     * @default 100
+     */
+    speed?: number;
+    /**
+     * @description Whether the marquee should continuously fill the space
+     * @type {boolean}
+     * @default false
+     */
+    fill?: boolean;
+    /**
+     * @description Pause the marquee when hovering
+     * @type {boolean}
+     * @default false
+     */
+    pauseOnHover?: boolean;
+    /**
+     * @description Enable gradient overlay
+     * @type {boolean}
+     * @default false
+     */
+    gradient?: boolean;
+    /**
+     * @description Color of the gradient if enabled
+     * @type {string}
+     */
+    gradientColor?: string;
+    /**
+     * @description Spacing between repeated elements in px
+     * @type {number}
+     * @default 16
+     */
+    spacing?: number;
+    /**
+     * @description Enable dragging to scroll manually
+     * @type {boolean}
+     * @default false
+     */
+    draggable?: boolean;
+    /**
+     * @description Whether to sync with page scroll direction
+     * @type {boolean}
+     * @default false
+     */
+    followScrollDir?: boolean;
+    /**
+     * @description Speed factor when syncing with page scroll
+     * @type {number}
+     */
+    scrollSpeed?: number;
+};

package/dist/components/gsap-reactmarquee.utils.d.ts

@@ -0,0 +1,26 @@
+import { type ClassValue } from "clsx";
+import type { GSAPReactMarqueeProps } from "./gsap-react-marquee.type";
+/**
+ * Utility function to merge Tailwind classes with clsx
+ */
+export declare const cn: (...inputs: ClassValue[]) => string;
+/**
+ * Sets up container styles and rotation handling
+ */
+export declare const setupContainerStyles: (containerMarquee: HTMLElement, marquees: HTMLElement[], marqueesChildren: HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;
+/**
+ * Calculates the number of duplicates needed to fill the container
+ */
+export declare const calculateDuplicates: (marqueeChildrenWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps) => number;
+/**
+ * Determines the minimum width for marquee elements
+ */
+export declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth: number, containerMarqueeWidth: number, props: GSAPReactMarqueeProps) => string | number;
+/**
+ * Creates a simple infinite marquee animation
+ */
+export declare const simpleAnimation: (marquees: HTMLElement[], marqueeChildrenDimension: number, isReverse: boolean, props: GSAPReactMarqueeProps) => void;
+/**
+ * Creates a complex fill-based marquee animation with seamless looping
+ */
+export declare const fillAnimation: (marqueesChildren: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, props: GSAPReactMarqueeProps) => void;

package/dist/index.cjs.css

@@ -0,0 +1 @@
+.gsap-react-marquee{flex:1;height:max-content;width:auto}.gsap-react-marquee,.gsap-react-marquee-content{display:flex;line-height:100%;white-space:preserve nowrap}.gsap-react-marquee-content{overflow:hidden;width:max-content}