gsap-react-marquee 0.1.5 → 0.1.8

package/README.md

@@ -45,4 +45,4 @@ function App() {
 | `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                                              |
+| `scrollSpeed`        | `number`                              | `2.5`     | Speed factor when syncing with page scroll                                              |

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

@@ -91,7 +91,7 @@ export declare const calculateDuplicates: (marqueeChildrenWidth: number, contain
  */
 export declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth: number, containerMarqueeWidth: number, props: GSAPReactMarqueeProps) => string | number;
 /**
- * Creates a complex fill-based marquee animation with seamless looping
+ * Creates a complex marquee animation with seamless looping and draggable support
  *
  * This is the core animation engine that creates smooth, continuous scrolling.
  * It handles the complex math required for seamless looping by calculating
@@ -102,16 +102,20 @@ export declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth:
  * 2. **Seamless Looping**: Calculate track length and loop points to prevent gaps
  * 3. **Staggered Animation**: Each element starts at different times for smooth flow
  * 4. **Direction Handling**: Support forward and reverse directions with proper timing
+ * 5. **Integrated Draggable**: Optional support for drag interaction with manual control
  *
  * Technical Details:
  * - Uses xPercent for percentage-based positioning (responsive to element width changes)
  * - Creates two-part animation: main movement + seamless loop reset
  * - Calculates precise durations based on distance and speed for consistent motion
+ * - Implements draggable with intelligent pause/resume animation handling
  *
  * @param elementsToAnimate - Array of DOM elements to animate (content or containers)
  * @param startX - Starting X position reference point
  * @param tl - GSAP timeline to add animations to
  * @param isReverse - Whether animation should play in reverse direction
+ * @param draggableTrigger - Element(s) that will trigger the draggable functionality
+ * @param isVertical - Whether the marquee scrolls vertically
  * @param props - Configuration object with spacing, speed, delay, and other settings
  */
-export declare const coreAnimation: (elementsToAnimate: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, props: GSAPReactMarqueeProps) => void;
+export declare const coreAnimation: (elementsToAnimate: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, draggableTrigger: HTMLElement | HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;

package/dist/index.cjs.css

@@ -1 +1 @@
-.gsap-react-marquee-container:after{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);content:"";height:100%;left:0;position:absolute;top:0;width:15%;z-index:10}.gsap-react-marquee-container:before{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);content:"";height:100%;position:absolute;right:0;top:0;width:15%;z-index:10}.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}
+.gsap-react-marquee-container:after{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);left:0}.gsap-react-marquee-container:after,.gsap-react-marquee-container:before{content:"";height:100%;pointer-events:none;position:absolute;top:0;width:15%;z-index:10}.gsap-react-marquee-container:before{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);right:0}.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}