gsap-react-marquee 0.2.2 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -19
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +5 -3
- package/dist/index.esm.js +1 -1
- package/dist/types/components/gsap-reactmarquee.utils.d.ts +4 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# GSAP React Marquee
|
|
2
2
|
|
|
3
|
-
A high-performance React marquee component powered by GSAP animations.
|
|
3
|
+
A high-performance React marquee component powered by GSAP animations with intelligent container detection and seamless looping.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -26,23 +26,62 @@ function App() {
|
|
|
26
26
|
}
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
+
## Features
|
|
30
|
+
|
|
31
|
+
- **Intelligent Container Detection**: Automatically detects whether containers have fixed dimensions or adapt to content, preventing recursive expansion loops
|
|
32
|
+
- **Seamless Looping**: Advanced duplicate calculation ensures smooth infinite scrolling without gaps
|
|
33
|
+
- **High Performance**: Built with GSAP for optimal animation performance
|
|
34
|
+
- **Responsive Design**: Adapts to different screen sizes and container dimensions
|
|
35
|
+
- **Multiple Directions**: Support for horizontal (left/right) and vertical (up/down) scrolling
|
|
36
|
+
- **Interactive Controls**: Optional draggable interface and scroll synchronization
|
|
37
|
+
- **TypeScript Support**: Full type safety and IntelliSense support
|
|
38
|
+
|
|
29
39
|
## Props
|
|
30
40
|
|
|
31
|
-
| Prop | Type | Default
|
|
32
|
-
| -------------------- | ------------------------------------- |
|
|
33
|
-
| `children` | `ReactNode` | –
|
|
34
|
-
| `className` | `string` | –
|
|
35
|
-
| `dir` | `"right" \| "left" \| "up" \| "down"` | `"
|
|
36
|
-
| `loop` | `number` | `-1`
|
|
37
|
-
| `paused` | `boolean` | `false`
|
|
38
|
-
| `alignRotationWithY` | `boolean` | `false`
|
|
39
|
-
| `delay` | `number` | `0`
|
|
40
|
-
| `speed` | `number` | `100`
|
|
41
|
-
| `fill` | `boolean` | `false`
|
|
42
|
-
| `pauseOnHover` | `boolean` | `false`
|
|
43
|
-
| `gradient` | `boolean` | `false`
|
|
44
|
-
| `gradientColor` | `string` | –
|
|
45
|
-
| `spacing` | `number` | `16`
|
|
46
|
-
| `draggable` | `boolean` | `false`
|
|
47
|
-
| `followScrollDir` | `boolean` | `false`
|
|
48
|
-
| `scrollSpeed` | `number` | `2.5`
|
|
41
|
+
| Prop | Type | Default | Description |
|
|
42
|
+
| -------------------- | ------------------------------------- | -------- | --------------------------------------------------------------------------------------- |
|
|
43
|
+
| `children` | `ReactNode` | – | Content to render inside the marquee |
|
|
44
|
+
| `className` | `string` | – | Additional CSS classes for styling |
|
|
45
|
+
| `dir` | `"right" \| "left" \| "up" \| "down"` | `"left"` | Direction of the marquee movement |
|
|
46
|
+
| `loop` | `number` | `-1` | Number of loops (`-1` = infinite) |
|
|
47
|
+
| `paused` | `boolean` | `false` | Whether the marquee animation should be paused |
|
|
48
|
+
| `alignRotationWithY` | `boolean` | `false` | Correctly orients (rotates) the content along Y axis (⚠️ avoid with `"left"`/`"right"`) |
|
|
49
|
+
| `delay` | `number` | `0` | Delay before the animation starts |
|
|
50
|
+
| `speed` | `number` | `100` | Speed of the marquee animation in px/s |
|
|
51
|
+
| `fill` | `boolean` | `false` | Whether the marquee should continuously fill the space |
|
|
52
|
+
| `pauseOnHover` | `boolean` | `false` | Pause the marquee when hovering |
|
|
53
|
+
| `gradient` | `boolean` | `false` | Enable gradient overlay |
|
|
54
|
+
| `gradientColor` | `string` | – | Color of the gradient if enabled |
|
|
55
|
+
| `spacing` | `number` | `16` | Spacing between repeated elements in px |
|
|
56
|
+
| `draggable` | `boolean` | `false` | Enable dragging to scroll manually |
|
|
57
|
+
| `followScrollDir` | `boolean` | `false` | Sync marquee with page scroll direction |
|
|
58
|
+
| `scrollSpeed` | `number` | `2.5` | Speed factor when syncing with page scroll |
|
|
59
|
+
|
|
60
|
+
## Advanced Features
|
|
61
|
+
|
|
62
|
+
### Intelligent Container Detection
|
|
63
|
+
|
|
64
|
+
The component now automatically detects container dimensions to prevent recursive expansion:
|
|
65
|
+
|
|
66
|
+
- **Fixed Width Containers**: Uses container dimensions for optimal duplicate calculation
|
|
67
|
+
- **Auto-Width Containers**: Falls back to viewport dimensions to prevent layout loops
|
|
68
|
+
- **Safety Limits**: Maximum of 15 duplicates to prevent performance issues
|
|
69
|
+
- **Development Logging**: Debug information in development mode
|
|
70
|
+
|
|
71
|
+
### Seamless Looping Algorithm
|
|
72
|
+
|
|
73
|
+
Enhanced duplicate calculation ensures perfect infinite scrolling:
|
|
74
|
+
|
|
75
|
+
- **Smart Target Width**: Intelligently determines the space to fill
|
|
76
|
+
- **Gap Prevention**: Calculates exact duplicates needed to eliminate visual gaps
|
|
77
|
+
- **Performance Optimized**: Minimal DOM elements for maximum performance
|
|
78
|
+
|
|
79
|
+
## Changelog
|
|
80
|
+
|
|
81
|
+
### v0.2.4
|
|
82
|
+
|
|
83
|
+
- ✨ Added intelligent container detection to prevent recursive expansion
|
|
84
|
+
- 🚀 Enhanced duplicate calculation algorithm for better performance
|
|
85
|
+
- 🔧 Improved seamless looping with smarter target width calculation
|
|
86
|
+
- 📝 Added comprehensive debug logging for development
|
|
87
|
+
- 🛡️ Added safety limits to prevent extreme duplicate scenarios
|
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,r=require("react"),n=require("@gsap/react"),a=require("gsap"),o=require("gsap/all"),i=require("clsx"),s=require("tailwind-merge"),l={exports:{}},c={},u={};"production"===process.env.NODE_ENV?l.exports=function(){if(e)return c;e=1;var t=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(e,r,n){var a=null;if(void 0!==n&&(a=""+n),void 0!==r.key&&(a=""+r.key),"key"in r)for(var o in n={},r)"key"!==o&&(n[o]=r[o]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:a,ref:void 0!==r?r:null,props:n}}return c.Fragment=r,c.jsx=n,c.jsxs=n,c}():l.exports=(t||(t=1,"production"!==process.env.NODE_ENV&&function(){function e(t){if(null==t)return null;if("function"==typeof t)return t.$$typeof===O?null:t.displayName||t.name||null;if("string"==typeof t)return t;switch(t){case m:return"Fragment";case y:return"Profiler";case g:return"StrictMode";case x:return"Suspense";case S:return"SuspenseList";case _:return"Activity"}if("object"==typeof t)switch(t.tag,t.$$typeof){case d:return"Portal";case b:return(t.displayName||"Context")+".Provider";case v:return(t._context.displayName||"Context")+".Consumer";case h:var r=t.render;return(t=t.displayName)||(t=""!==(t=r.displayName||r.name||"")?"ForwardRef("+t+")":"ForwardRef"),t;case w:return null!==(r=t.displayName||null)?r:e(t.type)||"Memo";case k:r=t._payload,t=t._init;try{return e(t(r))}catch(e){}}return null}function t(e){return""+e}function n(e){try{t(e);var r=!1}catch(e){r=!0}if(r){var n=(r=console).error,a="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),t(e)}}function a(t){if(t===m)return"<>";if("object"==typeof t&&null!==t&&t.$$typeof===k)return"<...>";try{var r=e(t);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function o(){return Error("react-stack-top-frame")}function i(){var t=e(this.type);return T[t]||(T[t]=!0),void 0!==(t=this.props.ref)?t:null}function s(t,r,a,o,s,u,f,d){var m,g=r.children;if(void 0!==g)if(o){if(P(g)){for(o=0;o<g.length;o++)l(g[o]);Object.freeze&&Object.freeze(g)}}else l(g);if(N.call(r,"key")){g=e(t);var y=Object.keys(r).filter(function(e){return"key"!==e});o=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",R[g+o]||(y=0<y.length?"{"+y.join(": ..., ")+": ...}":"{}",R[g+o]=!0)}if(g=null,void 0!==a&&(n(a),g=""+a),function(e){if(N.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),g=""+r.key),"key"in r)for(var v in a={},r)"key"!==v&&(a[v]=r[v]);else a=r;return g&&function(e){function t(){c||(c=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(a,"function"==typeof t&&(t.displayName||t.name)),function(e,t,r,n,a,o,s,l){return r=o.ref,e={$$typeof:p,type:e,key:t,props:o,_owner:a},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(t,g,u,0,null===(m=j.A)?null:m.getOwner(),a,f,d)}function l(e){"object"==typeof e&&null!==e&&e.$$typeof===p&&e._store&&(e._store.validated=1)}var c,f=r,p=Symbol.for("react.transitional.element"),d=Symbol.for("react.portal"),m=Symbol.for("react.fragment"),g=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),v=Symbol.for("react.consumer"),b=Symbol.for("react.context"),h=Symbol.for("react.forward_ref"),x=Symbol.for("react.suspense"),S=Symbol.for("react.suspense_list"),w=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),_=Symbol.for("react.activity"),O=Symbol.for("react.client.reference"),j=f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,N=Object.prototype.hasOwnProperty,P=Array.isArray,q=console.createTask?console.createTask:function(){return null},T={},C=(f={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(f,o)(),E=q(a(o)),R={};u.Fragment=m,u.jsx=function(e,t,r,n,o){var i=1e4>j.recentlyCreatedOwnerStacks++;return s(e,t,r,!1,0,o,i?Error("react-stack-top-frame"):C,i?q(a(e)):E)},u.jsxs=function(e,t,r,n,o){var i=1e4>j.recentlyCreatedOwnerStacks++;return s(e,t,r,!0,0,o,i?Error("react-stack-top-frame"):C,i?q(a(e)):E)}}()),u);var f=l.exports;!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('.gsap-react-marquee-container{display:flex;overflow:hidden;white-space:preserve nowrap;width:100%}.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}');const p=(...e)=>s.twMerge(i.clsx(e)),d=e=>{let t=e;for(;t;){const e=window.getComputedStyle(t).backgroundColor;if(e&&"rgba(0, 0, 0, 0)"!==e&&"transparent"!==e)return e;t=t.parentElement}return"transparent"},m=(e,t,r,n,o)=>{const{spacing:i=16,alignRotationWithY:s=!1}=o;if(a.set(e,{gap:`${i}px`,rotate:n?90:"0"}),n){const t=e.parentNode;a.set(e,{width:t.offsetHeight}),a.set(r,{overflow:"visible"})}if(s&&t.length>0){const n=t[0].offsetHeight;a.set(e,{alignItems:"center"}),a.set(r,{rotate:-90,x:(e.offsetWidth-i)/2-i,display:"flex",flexWrap:"wrap",width:n,wordBreak:"break-all",whiteSpace:"break-spaces"}),a.set(t,{height:e.offsetWidth-i})}},g=(e,t,r,n)=>{if(!n.fill)return 1;const a=r?window.innerHeight:t;return e<a?Math.ceil(a/e):1},y=(e,t,r,n)=>{const{fill:a=!1,alignRotationWithY:o=!1}=n;return a?"auto":o&&e.length>0?`${e[0].offsetHeight}px`:t<r?"100%":`${t}px`},v=(e,t,r,n,i,s,l)=>{const{spacing:c=16,speed:u=100,delay:f=0,paused:p=!1,alignRotationWithY:d=!1}=l,m=[],g=[],y=e.length-1;a.set(e,{xPercent:(e,t)=>{const r=m[e]=parseFloat(String(a.getProperty(t,"width","px")));return g[e]=parseFloat(String(a.getProperty(t,"x","px")))/r*100+Number(a.getProperty(t,"xPercent")),g[e]}}),a.set(e,{x:0});const v=e[y].offsetLeft+g[y]/100*m[y]-t+e[y].offsetWidth+c;if(e.forEach((e,n)=>{const a=g[n]/100*m[n],o=e.offsetLeft+a-t,i=d?o+e.offsetHeight-c:o+m[n];r.to(e,{xPercent:(a-i)/m[n]*100,duration:i/u},0).fromTo(e,{xPercent:(a-i+v)/m[n]*100},{xPercent:g[n],duration:(a-i+v-a)/u,immediateRender:!1},i/u)}),r.delay(f),n){if(p)return void r.pause();r.progress(1).pause(),a.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}let b;if("function"==typeof o.Draggable&&l.draggable){b=document.createElement("div");const e=a.utils.wrap(0,1);let t,l;const c=()=>{const n=s?u.startY-u.y:u.startX-u.x;r.progress(e(l+n*t))};o.InertiaPlugin;const u=o.Draggable.create(b,{trigger:i,type:s?"y":"x",onPress(){a.killTweensOf(r),r.pause(),l=r.progress(),t=1/v,a.set(b,{x:l/-t})},onDrag:c,onThrowUpdate:c,overshootTolerance:0,inertia:!0,onThrowComplete:()=>{if(n){if(p)return void r.pause();r.progress(r.progress()).pause(),a.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}else r.play()}})[0]}};a.registerPlugin(n.useGSAP,o.Observer,o.InertiaPlugin,o.Draggable);const b=r.forwardRef((e,t)=>{const{children:i,className:s,dir:l="left",loop:c=-1,paused:u=!1,fill:b=!1,followScrollDir:h=!1,scrollSpeed:x=2.5,gradient:S=!1,gradientColor:w=null,pauseOnHover:k=!1}=e,_=r.useRef(null),O=t||_,j=r.useRef(null),[N,P]=r.useState(1),[q,T]=r.useState(null);r.useLayoutEffect(()=>{if(!S||!(null==O?void 0:O.current))return;const e=d(O.current);T(e)},[S]);const C="up"===l||"down"===l,E="down"===l||"right"===l;n.useGSAP((t,r)=>{if(!(null==j?void 0:j.current)||!O.current||!r)return;const n=null==O?void 0:O.current,i=a.utils.toArray(n.querySelectorAll(".gsap-react-marquee")),s=a.utils.toArray(n.querySelectorAll(".gsap-react-marquee .gsap-react-marquee-content")),l=j.current;if(!l||!s)return;const f=a.timeline({paused:u,repeat:c,defaults:{ease:"none"},onReverseComplete(){f.totalTime(f.rawTime()+100*f.duration())}});m(n,i,s,C,e);const p=n.offsetWidth,d=s[0].offsetWidth,S=s[0].offsetLeft;let w=null;const _=Math.min(4,Math.max(1.1,x));P(g(d,p,C,e));const N=a.utils.toArray(l.children).map(e=>e.offsetWidth).reduce((e,t)=>e+t,0);a.set(i,{minWidth:y(s,N,p,e),flex:b?"0 0 auto":"1"}),v(b?s:i,S,f,E,i,C,e),h&&(w=o.Observer.create({onChangeY(e){let t=_*(E?-1:1);e.deltaY<0&&(t*=-1),a.timeline({defaults:{ease:"none"}}).to(f,{timeScale:t*_,duration:.2,overwrite:!0}).to(f,{timeScale:t/_,duration:1},"+=0.3")}}));const q=r(()=>{f.timeScale(0)}),T=r(()=>{f.timeScale(1)});return k&&(n.addEventListener("mouseenter",q),n.addEventListener("mouseleave",T)),()=>{n.removeEventListener("mouseenter",q),n.removeEventListener("mouseleave",T),f.kill(),null==w||w.kill()}},{dependencies:[N,l,c,u,b,h,x,S,w,k]});const R=r.useMemo(()=>!Number.isFinite(N)||N<=0?null:Array.from({length:N},(e,t)=>f.jsx("div",{className:p("gsap-react-marquee"),children:f.jsx("div",{className:p("gsap-react-marquee-content",s),children:i})},t)),[N,s,i]);return f.jsxs("div",{ref:O,style:{"--gradient-color":w||(S&&q?q:"transparent")},className:p("gsap-react-marquee-container"),children:[f.jsx("div",{ref:j,className:p("gsap-react-marquee"),children:f.jsx("div",{className:p("gsap-react-marquee-content",s),children:i})}),R]})});b.displayName="GSAPReactMarquee",exports.calculateDuplicates=g,exports.cn=p,exports.coreAnimation=v,exports.default=b,exports.getEffectiveBackgroundColor=d,exports.getMinWidth=y,exports.setupContainerStyles=m;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,r=require("react"),n=require("@gsap/react"),a=require("gsap"),o=require("gsap/all"),i=require("clsx"),s=require("tailwind-merge"),l={exports:{}},c={},u={};"production"===process.env.NODE_ENV?l.exports=function(){if(e)return c;e=1;var t=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(e,r,n){var a=null;if(void 0!==n&&(a=""+n),void 0!==r.key&&(a=""+r.key),"key"in r)for(var o in n={},r)"key"!==o&&(n[o]=r[o]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:a,ref:void 0!==r?r:null,props:n}}return c.Fragment=r,c.jsx=n,c.jsxs=n,c}():l.exports=(t||(t=1,"production"!==process.env.NODE_ENV&&function(){function e(t){if(null==t)return null;if("function"==typeof t)return t.$$typeof===O?null:t.displayName||t.name||null;if("string"==typeof t)return t;switch(t){case m:return"Fragment";case y:return"Profiler";case g:return"StrictMode";case w:return"Suspense";case x:return"SuspenseList";case _:return"Activity"}if("object"==typeof t)switch(t.tag,t.$$typeof){case p:return"Portal";case v:return(t.displayName||"Context")+".Provider";case h:return(t._context.displayName||"Context")+".Consumer";case b:var r=t.render;return(t=t.displayName)||(t=""!==(t=r.displayName||r.name||"")?"ForwardRef("+t+")":"ForwardRef"),t;case S:return null!==(r=t.displayName||null)?r:e(t.type)||"Memo";case k:r=t._payload,t=t._init;try{return e(t(r))}catch(e){}}return null}function t(e){return""+e}function n(e){try{t(e);var r=!1}catch(e){r=!0}if(r){var n=(r=console).error,a="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),t(e)}}function a(t){if(t===m)return"<>";if("object"==typeof t&&null!==t&&t.$$typeof===k)return"<...>";try{var r=e(t);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function o(){return Error("react-stack-top-frame")}function i(){var t=e(this.type);return T[t]||(T[t]=!0),void 0!==(t=this.props.ref)?t:null}function s(t,r,a,o,s,u,f,p){var m,g=r.children;if(void 0!==g)if(o){if(P(g)){for(o=0;o<g.length;o++)l(g[o]);Object.freeze&&Object.freeze(g)}}else l(g);if(N.call(r,"key")){g=e(t);var y=Object.keys(r).filter(function(e){return"key"!==e});o=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",R[g+o]||(y=0<y.length?"{"+y.join(": ..., ")+": ...}":"{}",R[g+o]=!0)}if(g=null,void 0!==a&&(n(a),g=""+a),function(e){if(N.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),g=""+r.key),"key"in r)for(var h in a={},r)"key"!==h&&(a[h]=r[h]);else a=r;return g&&function(e){function t(){c||(c=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(a,"function"==typeof t&&(t.displayName||t.name)),function(e,t,r,n,a,o,s,l){return r=o.ref,e={$$typeof:d,type:e,key:t,props:o,_owner:a},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(t,g,u,0,null===(m=j.A)?null:m.getOwner(),a,f,p)}function l(e){"object"==typeof e&&null!==e&&e.$$typeof===d&&e._store&&(e._store.validated=1)}var c,f=r,d=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),m=Symbol.for("react.fragment"),g=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),h=Symbol.for("react.consumer"),v=Symbol.for("react.context"),b=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),S=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),_=Symbol.for("react.activity"),O=Symbol.for("react.client.reference"),j=f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,N=Object.prototype.hasOwnProperty,P=Array.isArray,C=console.createTask?console.createTask:function(){return null},T={},q=(f={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(f,o)(),E=C(a(o)),R={};u.Fragment=m,u.jsx=function(e,t,r,n,o){var i=1e4>j.recentlyCreatedOwnerStacks++;return s(e,t,r,!1,0,o,i?Error("react-stack-top-frame"):q,i?C(a(e)):E)},u.jsxs=function(e,t,r,n,o){var i=1e4>j.recentlyCreatedOwnerStacks++;return s(e,t,r,!0,0,o,i?Error("react-stack-top-frame"):q,i?C(a(e)):E)}}()),u);var f=l.exports;!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('.gsap-react-marquee-container{display:flex;overflow:hidden;white-space:preserve nowrap;width:100%}.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}');const d=(...e)=>s.twMerge(i.clsx(e)),p=e=>{let t=e;for(;t;){const e=window.getComputedStyle(t).backgroundColor;if(e&&"rgba(0, 0, 0, 0)"!==e&&"transparent"!==e)return e;t=t.parentElement}return"transparent"},m=(e,t,r,n,o)=>{const{spacing:i=16,alignRotationWithY:s=!1}=o;if(a.set(e,{gap:`${i}px`,rotate:n?90:"0"}),n){const t=e.parentNode;a.set(e,{width:t.offsetHeight}),a.set(r,{overflow:"visible"})}if(s&&t.length>0){const n=t[0].offsetHeight;a.set(e,{alignItems:"center"}),a.set(r,{rotate:-90,x:(e.offsetWidth-i)/2-i,display:"flex",flexWrap:"wrap",width:n,wordBreak:"break-all",whiteSpace:"break-spaces"}),a.set(t,{height:e.offsetWidth-i})}},g=e=>{if(e.style.width&&"auto"!==e.style.width)return!0;const t=window.getComputedStyle(e).width;if("auto"===t||!t)return!1;const r=e.parentElement;if(r){const e=window.getComputedStyle(r);if("100%"===t&&"auto"===e.width)return!1}return!0},y=(e,t)=>g(e)?t?e.offsetHeight:e.offsetWidth:t?window.innerHeight:window.innerWidth,h=(e,t,r,n,a)=>{if(!n.fill)return 1;let o;o=a?y(a,r):t>0?r?window.innerHeight:t:r?window.innerHeight:window.innerWidth;const i=e<o?Math.ceil(o/e):1;return Math.min(i,15)},v=(e,t,r,n,a)=>{const{fill:o=!1,alignRotationWithY:i=!1}=a;return o&&n&&i?`${e[0].offsetHeight}px`:o?"auto":i&&e.length>0?`${e[0].offsetHeight}px`:t<r?"100%":`${t}px`},b=(e,t,r,n,i,s,l)=>{const{spacing:c=16,speed:u=100,delay:f=0,paused:d=!1,alignRotationWithY:p=!1}=l,m=[],g=[],y=e.length-1;a.set(e,{xPercent:(e,t)=>{const r=m[e]=parseFloat(String(a.getProperty(t,"width","px")));return g[e]=parseFloat(String(a.getProperty(t,"x","px")))/r*100+Number(a.getProperty(t,"xPercent")),g[e]}}),a.set(e,{x:0});const h=e[y].offsetLeft+g[y]/100*m[y]-t+e[y].offsetWidth+c;if(e.forEach((e,n)=>{const a=g[n]/100*m[n],o=e.offsetLeft+a-t,i=p?o+e.offsetHeight-c:o+m[n];r.to(e,{xPercent:(a-i)/m[n]*100,duration:i/u},0).fromTo(e,{xPercent:(a-i+h)/m[n]*100},{xPercent:g[n],duration:(a-i+h-a)/u,immediateRender:!1},i/u)}),r.delay(f),n){if(d)return void r.pause();r.progress(1).pause(),a.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}let v;if("function"==typeof o.Draggable&&l.draggable){v=document.createElement("div");const e=a.utils.wrap(0,1);let t,l;const c=()=>{const n=s?u.startY-u.y:u.startX-u.x;r.progress(e(l+n*t))};o.InertiaPlugin;const u=o.Draggable.create(v,{trigger:i,type:s?"y":"x",onPress(){a.killTweensOf(r),r.pause(),l=r.progress(),t=1/h,a.set(v,{x:l/-t})},onDrag:c,onThrowUpdate:c,overshootTolerance:0,inertia:!0,onThrowComplete:()=>{if(n){if(d)return void r.pause();r.progress(r.progress()).pause(),a.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}else r.play()}})[0]}};a.registerPlugin(n.useGSAP,o.Observer,o.InertiaPlugin,o.Draggable);const w=r.forwardRef((e,t)=>{const{children:i,className:s,dir:l="left",loop:c=-1,paused:u=!1,fill:g=!1,followScrollDir:y=!1,scrollSpeed:w=2.5,gradient:x=!1,gradientColor:S=null,pauseOnHover:k=!1,alignRotationWithY:_=!1,spacing:O=16,speed:j=100}=e,N=r.useRef(null),P=t||N,C=r.useRef(null),[T,q]=r.useState(1),[E,R]=r.useState(null);r.useLayoutEffect(()=>{if(!x||!(null==P?void 0:P.current))return;const e=p(P.current);R(e)},[x]);const W="up"===l||"down"===l,A="down"===l||"right"===l;n.useGSAP((t,r)=>{if(!(null==C?void 0:C.current)||!P.current||!r)return;const n=null==P?void 0:P.current,i=a.utils.toArray(n.querySelectorAll(".gsap-react-marquee")),s=a.utils.toArray(n.querySelectorAll(".gsap-react-marquee .gsap-react-marquee-content"));if(!C.current||!s)return;const l=a.timeline({paused:u,repeat:c,defaults:{ease:"none"},onReverseComplete(){l.totalTime(l.rawTime()+100*l.duration())}});m(n,i,s,W,e);const f=n.offsetWidth,d=s[0].offsetWidth,p=s[0].offsetLeft;let x=null;const S=Math.min(4,Math.max(1.1,w));q(h(d,f,W,e,n));const _=a.utils.toArray(i).map(e=>e.offsetWidth).reduce((e,t)=>e+t,0);a.set(i,{minWidth:v(s,_,f,W,e),flex:g?"0 0 auto":"1"}),b(g?s:i,p,l,A,i,W,e),y&&(x=o.Observer.create({onChangeY(e){let t=S*(A?-1:1);e.deltaY<0&&(t*=-1),a.timeline({defaults:{ease:"none"}}).to(l,{timeScale:t*S,duration:.2,overwrite:!0}).to(l,{timeScale:t/S,duration:1},"+=0.3")}}));const O=r(()=>{l.timeScale(0)}),j=r(()=>{l.timeScale(A?-1:1)});return k&&(n.addEventListener("mouseenter",O),n.addEventListener("mouseleave",j)),()=>{n.removeEventListener("mouseenter",O),n.removeEventListener("mouseleave",j),l.kill(),null==x||x.kill()}},{dependencies:[T,l,c,u,g,y,w,x,S,k,_,O,j],revertOnUpdate:!0});const $=r.useMemo(()=>!Number.isFinite(T)||T<=0?null:Array.from({length:T},(e,t)=>f.jsx("div",{className:d("gsap-react-marquee"),children:f.jsx("div",{className:d("gsap-react-marquee-content",s),children:i})},t)),[T,s,i]);return f.jsxs("div",{ref:P,style:{"--gradient-color":S||(x&&E?E:"transparent")},className:d("gsap-react-marquee-container"),children:[f.jsx("div",{ref:C,className:d("gsap-react-marquee"),children:f.jsx("div",{className:d("gsap-react-marquee-content",s),children:i})}),$]})});w.displayName="GSAPReactMarquee",exports.calculateDuplicates=h,exports.cn=d,exports.coreAnimation=b,exports.default=w,exports.getEffectiveBackgroundColor=p,exports.getMinWidth=v,exports.getTargetWidth=y,exports.hasDefinedWidth=g,exports.setupContainerStyles=m;
|
package/dist/index.d.ts
CHANGED
|
@@ -26,9 +26,11 @@ declare const GSAPReactMarquee: react.ForwardRefExoticComponent<GSAPReactMarquee
|
|
|
26
26
|
declare const cn: (...inputs: ClassValue[]) => string;
|
|
27
27
|
declare const getEffectiveBackgroundColor: (el: HTMLElement) => string;
|
|
28
28
|
declare const setupContainerStyles: (containerMarquee: HTMLElement, marquees: HTMLElement[], marqueesChildren: HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;
|
|
29
|
-
declare const
|
|
30
|
-
declare const
|
|
29
|
+
declare const hasDefinedWidth: (element: HTMLElement) => boolean;
|
|
30
|
+
declare const getTargetWidth: (containerElement: HTMLElement, isVertical: boolean) => number;
|
|
31
|
+
declare const calculateDuplicates: (marqueeChildrenWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps, containerElement?: HTMLElement) => number;
|
|
32
|
+
declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps) => string | number;
|
|
31
33
|
declare const coreAnimation: (elementsToAnimate: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, draggableTrigger: HTMLElement | HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;
|
|
32
34
|
|
|
33
|
-
export { calculateDuplicates, cn, coreAnimation, GSAPReactMarquee as default, getEffectiveBackgroundColor, getMinWidth, setupContainerStyles };
|
|
35
|
+
export { calculateDuplicates, cn, coreAnimation, GSAPReactMarquee as default, getEffectiveBackgroundColor, getMinWidth, getTargetWidth, hasDefinedWidth, setupContainerStyles };
|
|
34
36
|
export type { GSAPReactMarqueeProps };
|
package/dist/index.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{forwardRef as t,useRef as r,useState as n,useLayoutEffect as a,useMemo as o}from"react";import{useGSAP as i}from"@gsap/react";import l from"gsap";import{Draggable as s,InertiaPlugin as c,Observer as u}from"gsap/all";import{clsx as f}from"clsx";import{twMerge as p}from"tailwind-merge";var d,m,y={exports:{}},g={},h={};"production"===process.env.NODE_ENV?y.exports=function(){if(d)return g;d=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(t,r,n){var a=null;if(void 0!==n&&(a=""+n),void 0!==r.key&&(a=""+r.key),"key"in r)for(var o in n={},r)"key"!==o&&(n[o]=r[o]);else n=r;return r=n.ref,{$$typeof:e,type:t,key:a,ref:void 0!==r?r:null,props:n}}return g.Fragment=t,g.jsx=r,g.jsxs=r,g}():y.exports=(m||(m=1,"production"!==process.env.NODE_ENV&&function(){function t(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===j?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case d:return"Fragment";case y:return"Profiler";case m:return"StrictMode";case w:return"Suspense";case x:return"SuspenseList";case _:return"Activity"}if("object"==typeof e)switch(e.tag,e.$$typeof){case p:return"Portal";case v:return(e.displayName||"Context")+".Provider";case g:return(e._context.displayName||"Context")+".Consumer";case b:var r=e.render;return(e=e.displayName)||(e=""!==(e=r.displayName||r.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case S:return null!==(r=e.displayName||null)?r:t(e.type)||"Memo";case k:r=e._payload,e=e._init;try{return t(e(r))}catch(e){}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch(e){t=!0}if(t){var n=(t=console).error,a="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),r(e)}}function a(e){if(e===d)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===k)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function o(){return Error("react-stack-top-frame")}function i(){var e=t(this.type);return C[e]||(C[e]=!0),void 0!==(e=this.props.ref)?e:null}function l(e,r,a,o,l,u,p,d){var m,y=r.children;if(void 0!==y)if(o){if(T(y)){for(o=0;o<y.length;o++)s(y[o]);Object.freeze&&Object.freeze(y)}}else s(y);if(O.call(r,"key")){y=t(e);var g=Object.keys(r).filter(function(e){return"key"!==e});o=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",R[y+o]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",R[y+o]=!0)}if(y=null,void 0!==a&&(n(a),y=""+a),function(e){if(O.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),y=""+r.key),"key"in r)for(var h in a={},r)"key"!==h&&(a[h]=r[h]);else a=r;return y&&function(e){function t(){c||(c=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(a,"function"==typeof e&&(e.displayName||e.name)),function(e,t,r,n,a,o,l,s){return r=o.ref,e={$$typeof:f,type:e,key:t,props:o,_owner:a},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,y,u,0,null===(m=N.A)?null:m.getOwner(),a,p,d)}function s(e){"object"==typeof e&&null!==e&&e.$$typeof===f&&e._store&&(e._store.validated=1)}var c,u=e,f=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),v=Symbol.for("react.context"),b=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),S=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),_=Symbol.for("react.activity"),j=Symbol.for("react.client.reference"),N=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,T=Array.isArray,P=console.createTask?console.createTask:function(){return null},C={},E=(u={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(u,o)(),q=P(a(o)),R={};h.Fragment=d,h.jsx=function(e,t,r,n,o){var i=1e4>N.recentlyCreatedOwnerStacks++;return l(e,t,r,!1,0,o,i?Error("react-stack-top-frame"):E,i?P(a(e)):q)},h.jsxs=function(e,t,r,n,o){var i=1e4>N.recentlyCreatedOwnerStacks++;return l(e,t,r,!0,0,o,i?Error("react-stack-top-frame"):E,i?P(a(e)):q)}}()),h);var v=y.exports;!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('.gsap-react-marquee-container{display:flex;overflow:hidden;white-space:preserve nowrap;width:100%}.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}');const b=(...e)=>p(f(e)),w=e=>{let t=e;for(;t;){const e=window.getComputedStyle(t).backgroundColor;if(e&&"rgba(0, 0, 0, 0)"!==e&&"transparent"!==e)return e;t=t.parentElement}return"transparent"},x=(e,t,r,n,a)=>{const{spacing:o=16,alignRotationWithY:i=!1}=a;if(l.set(e,{gap:`${o}px`,rotate:n?90:"0"}),n){const t=e.parentNode;l.set(e,{width:t.offsetHeight}),l.set(r,{overflow:"visible"})}if(i&&t.length>0){const n=t[0].offsetHeight;l.set(e,{alignItems:"center"}),l.set(r,{rotate:-90,x:(e.offsetWidth-o)/2-o,display:"flex",flexWrap:"wrap",width:n,wordBreak:"break-all",whiteSpace:"break-spaces"}),l.set(t,{height:e.offsetWidth-o})}},S=(e,t,r,n)=>{if(!n.fill)return 1;const a=r?window.innerHeight:t;return e<a?Math.ceil(a/e):1},k=(e,t,r,n)=>{const{fill:a=!1,alignRotationWithY:o=!1}=n;return a?"auto":o&&e.length>0?`${e[0].offsetHeight}px`:t<r?"100%":`${t}px`},_=(e,t,r,n,a,o,i)=>{const{spacing:c=16,speed:u=100,delay:f=0,paused:p=!1,alignRotationWithY:d=!1}=i,m=[],y=[],g=e.length-1;l.set(e,{xPercent:(e,t)=>{const r=m[e]=parseFloat(String(l.getProperty(t,"width","px")));return y[e]=parseFloat(String(l.getProperty(t,"x","px")))/r*100+Number(l.getProperty(t,"xPercent")),y[e]}}),l.set(e,{x:0});const h=e[g].offsetLeft+y[g]/100*m[g]-t+e[g].offsetWidth+c;if(e.forEach((e,n)=>{const a=y[n]/100*m[n],o=e.offsetLeft+a-t,i=d?o+e.offsetHeight-c:o+m[n];r.to(e,{xPercent:(a-i)/m[n]*100,duration:i/u},0).fromTo(e,{xPercent:(a-i+h)/m[n]*100},{xPercent:y[n],duration:(a-i+h-a)/u,immediateRender:!1},i/u)}),r.delay(f),n){if(p)return void r.pause();r.progress(1).pause(),l.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}let v;if("function"==typeof s&&i.draggable){v=document.createElement("div");const e=l.utils.wrap(0,1);let t,i;const c=()=>{const n=o?u.startY-u.y:u.startX-u.x;r.progress(e(i+n*t))},u=s.create(v,{trigger:a,type:o?"y":"x",onPress(){l.killTweensOf(r),r.pause(),i=r.progress(),t=1/h,l.set(v,{x:i/-t})},onDrag:c,onThrowUpdate:c,overshootTolerance:0,inertia:!0,onThrowComplete:()=>{if(n){if(p)return void r.pause();r.progress(r.progress()).pause(),l.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}else r.play()}})[0]}};l.registerPlugin(i,u,c,s);const j=t((e,t)=>{const{children:s,className:c,dir:f="left",loop:p=-1,paused:d=!1,fill:m=!1,followScrollDir:y=!1,scrollSpeed:g=2.5,gradient:h=!1,gradientColor:j=null,pauseOnHover:N=!1}=e,O=r(null),T=t||O,P=r(null),[C,E]=n(1),[q,R]=n(null);a(()=>{if(!h||!(null==T?void 0:T.current))return;const e=w(T.current);R(e)},[h]);const A="up"===f||"down"===f,$="down"===f||"right"===f;i((t,r)=>{if(!(null==P?void 0:P.current)||!T.current||!r)return;const n=null==T?void 0:T.current,a=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee")),o=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee .gsap-react-marquee-content")),i=P.current;if(!i||!o)return;const s=l.timeline({paused:d,repeat:p,defaults:{ease:"none"},onReverseComplete(){s.totalTime(s.rawTime()+100*s.duration())}});x(n,a,o,A,e);const c=n.offsetWidth,f=o[0].offsetWidth,h=o[0].offsetLeft;let v=null;const b=Math.min(4,Math.max(1.1,g));E(S(f,c,A,e));const w=l.utils.toArray(i.children).map(e=>e.offsetWidth).reduce((e,t)=>e+t,0);l.set(a,{minWidth:k(o,w,c,e),flex:m?"0 0 auto":"1"}),_(m?o:a,h,s,$,a,A,e),y&&(v=u.create({onChangeY(e){let t=b*($?-1:1);e.deltaY<0&&(t*=-1),l.timeline({defaults:{ease:"none"}}).to(s,{timeScale:t*b,duration:.2,overwrite:!0}).to(s,{timeScale:t/b,duration:1},"+=0.3")}}));const j=r(()=>{s.timeScale(0)}),O=r(()=>{s.timeScale(1)});return N&&(n.addEventListener("mouseenter",j),n.addEventListener("mouseleave",O)),()=>{n.removeEventListener("mouseenter",j),n.removeEventListener("mouseleave",O),s.kill(),null==v||v.kill()}},{dependencies:[C,f,p,d,m,y,g,h,j,N]});const W=o(()=>!Number.isFinite(C)||C<=0?null:Array.from({length:C},(e,t)=>v.jsx("div",{className:b("gsap-react-marquee"),children:v.jsx("div",{className:b("gsap-react-marquee-content",c),children:s})},t)),[C,c,s]);return v.jsxs("div",{ref:T,style:{"--gradient-color":j||(h&&q?q:"transparent")},className:b("gsap-react-marquee-container"),children:[v.jsx("div",{ref:P,className:b("gsap-react-marquee"),children:v.jsx("div",{className:b("gsap-react-marquee-content",c),children:s})}),W]})});j.displayName="GSAPReactMarquee";export{S as calculateDuplicates,b as cn,_ as coreAnimation,j as default,w as getEffectiveBackgroundColor,k as getMinWidth,x as setupContainerStyles};
|
|
1
|
+
import e,{forwardRef as t,useRef as r,useState as n,useLayoutEffect as o,useMemo as a}from"react";import{useGSAP as i}from"@gsap/react";import l from"gsap";import{Draggable as s,InertiaPlugin as c,Observer as u}from"gsap/all";import{clsx as f}from"clsx";import{twMerge as d}from"tailwind-merge";var p,m,y={exports:{}},g={},h={};"production"===process.env.NODE_ENV?y.exports=function(){if(p)return g;p=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(t,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var a in n={},r)"key"!==a&&(n[a]=r[a]);else n=r;return r=n.ref,{$$typeof:e,type:t,key:o,ref:void 0!==r?r:null,props:n}}return g.Fragment=t,g.jsx=r,g.jsxs=r,g}():y.exports=(m||(m=1,"production"!==process.env.NODE_ENV&&function(){function t(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===j?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case p:return"Fragment";case y:return"Profiler";case m:return"StrictMode";case w:return"Suspense";case x:return"SuspenseList";case _:return"Activity"}if("object"==typeof e)switch(e.tag,e.$$typeof){case d:return"Portal";case v:return(e.displayName||"Context")+".Provider";case g:return(e._context.displayName||"Context")+".Consumer";case b:var r=e.render;return(e=e.displayName)||(e=""!==(e=r.displayName||r.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case S:return null!==(r=e.displayName||null)?r:t(e.type)||"Memo";case k:r=e._payload,e=e._init;try{return t(e(r))}catch(e){}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch(e){t=!0}if(t){var n=(t=console).error,o="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),r(e)}}function o(e){if(e===p)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===k)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function i(){var e=t(this.type);return P[e]||(P[e]=!0),void 0!==(e=this.props.ref)?e:null}function l(e,r,o,a,l,u,d,p){var m,y=r.children;if(void 0!==y)if(a){if(T(y)){for(a=0;a<y.length;a++)s(y[a]);Object.freeze&&Object.freeze(y)}}else s(y);if(O.call(r,"key")){y=t(e);var g=Object.keys(r).filter(function(e){return"key"!==e});a=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",R[y+a]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",R[y+a]=!0)}if(y=null,void 0!==o&&(n(o),y=""+o),function(e){if(O.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),y=""+r.key),"key"in r)for(var h in o={},r)"key"!==h&&(o[h]=r[h]);else o=r;return y&&function(e){function t(){c||(c=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(o,"function"==typeof e&&(e.displayName||e.name)),function(e,t,r,n,o,a,l,s){return r=a.ref,e={$$typeof:f,type:e,key:t,props:a,_owner:o},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,y,u,0,null===(m=N.A)?null:m.getOwner(),o,d,p)}function s(e){"object"==typeof e&&null!==e&&e.$$typeof===f&&e._store&&(e._store.validated=1)}var c,u=e,f=Symbol.for("react.transitional.element"),d=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),v=Symbol.for("react.context"),b=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),S=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),_=Symbol.for("react.activity"),j=Symbol.for("react.client.reference"),N=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,T=Array.isArray,C=console.createTask?console.createTask:function(){return null},P={},E=(u={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(u,a)(),q=C(o(a)),R={};h.Fragment=p,h.jsx=function(e,t,r,n,a){var i=1e4>N.recentlyCreatedOwnerStacks++;return l(e,t,r,!1,0,a,i?Error("react-stack-top-frame"):E,i?C(o(e)):q)},h.jsxs=function(e,t,r,n,a){var i=1e4>N.recentlyCreatedOwnerStacks++;return l(e,t,r,!0,0,a,i?Error("react-stack-top-frame"):E,i?C(o(e)):q)}}()),h);var v=y.exports;!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('.gsap-react-marquee-container{display:flex;overflow:hidden;white-space:preserve nowrap;width:100%}.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}');const b=(...e)=>d(f(e)),w=e=>{let t=e;for(;t;){const e=window.getComputedStyle(t).backgroundColor;if(e&&"rgba(0, 0, 0, 0)"!==e&&"transparent"!==e)return e;t=t.parentElement}return"transparent"},x=(e,t,r,n,o)=>{const{spacing:a=16,alignRotationWithY:i=!1}=o;if(l.set(e,{gap:`${a}px`,rotate:n?90:"0"}),n){const t=e.parentNode;l.set(e,{width:t.offsetHeight}),l.set(r,{overflow:"visible"})}if(i&&t.length>0){const n=t[0].offsetHeight;l.set(e,{alignItems:"center"}),l.set(r,{rotate:-90,x:(e.offsetWidth-a)/2-a,display:"flex",flexWrap:"wrap",width:n,wordBreak:"break-all",whiteSpace:"break-spaces"}),l.set(t,{height:e.offsetWidth-a})}},S=e=>{if(e.style.width&&"auto"!==e.style.width)return!0;const t=window.getComputedStyle(e).width;if("auto"===t||!t)return!1;const r=e.parentElement;if(r){const e=window.getComputedStyle(r);if("100%"===t&&"auto"===e.width)return!1}return!0},k=(e,t)=>S(e)?t?e.offsetHeight:e.offsetWidth:t?window.innerHeight:window.innerWidth,_=(e,t,r,n,o)=>{if(!n.fill)return 1;let a;a=o?k(o,r):t>0?r?window.innerHeight:t:r?window.innerHeight:window.innerWidth;const i=e<a?Math.ceil(a/e):1;return Math.min(i,15)},j=(e,t,r,n,o)=>{const{fill:a=!1,alignRotationWithY:i=!1}=o;return a&&n&&i?`${e[0].offsetHeight}px`:a?"auto":i&&e.length>0?`${e[0].offsetHeight}px`:t<r?"100%":`${t}px`},N=(e,t,r,n,o,a,i)=>{const{spacing:c=16,speed:u=100,delay:f=0,paused:d=!1,alignRotationWithY:p=!1}=i,m=[],y=[],g=e.length-1;l.set(e,{xPercent:(e,t)=>{const r=m[e]=parseFloat(String(l.getProperty(t,"width","px")));return y[e]=parseFloat(String(l.getProperty(t,"x","px")))/r*100+Number(l.getProperty(t,"xPercent")),y[e]}}),l.set(e,{x:0});const h=e[g].offsetLeft+y[g]/100*m[g]-t+e[g].offsetWidth+c;if(e.forEach((e,n)=>{const o=y[n]/100*m[n],a=e.offsetLeft+o-t,i=p?a+e.offsetHeight-c:a+m[n];r.to(e,{xPercent:(o-i)/m[n]*100,duration:i/u},0).fromTo(e,{xPercent:(o-i+h)/m[n]*100},{xPercent:y[n],duration:(o-i+h-o)/u,immediateRender:!1},i/u)}),r.delay(f),n){if(d)return void r.pause();r.progress(1).pause(),l.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}let v;if("function"==typeof s&&i.draggable){v=document.createElement("div");const e=l.utils.wrap(0,1);let t,i;const c=()=>{const n=a?u.startY-u.y:u.startX-u.x;r.progress(e(i+n*t))},u=s.create(v,{trigger:o,type:a?"y":"x",onPress(){l.killTweensOf(r),r.pause(),i=r.progress(),t=1/h,l.set(v,{x:i/-t})},onDrag:c,onThrowUpdate:c,overshootTolerance:0,inertia:!0,onThrowComplete:()=>{if(n){if(d)return void r.pause();r.progress(r.progress()).pause(),l.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}else r.play()}})[0]}};l.registerPlugin(i,u,c,s);const O=t((e,t)=>{const{children:s,className:c,dir:f="left",loop:d=-1,paused:p=!1,fill:m=!1,followScrollDir:y=!1,scrollSpeed:g=2.5,gradient:h=!1,gradientColor:S=null,pauseOnHover:k=!1,alignRotationWithY:O=!1,spacing:T=16,speed:C=100}=e,P=r(null),E=t||P,q=r(null),[R,W]=n(1),[A,$]=n(null);o(()=>{if(!h||!(null==E?void 0:E.current))return;const e=w(E.current);$(e)},[h]);const H="up"===f||"down"===f,L="down"===f||"right"===f;i((t,r)=>{if(!(null==q?void 0:q.current)||!E.current||!r)return;const n=null==E?void 0:E.current,o=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee")),a=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee .gsap-react-marquee-content"));if(!q.current||!a)return;const i=l.timeline({paused:p,repeat:d,defaults:{ease:"none"},onReverseComplete(){i.totalTime(i.rawTime()+100*i.duration())}});x(n,o,a,H,e);const s=n.offsetWidth,c=a[0].offsetWidth,f=a[0].offsetLeft;let h=null;const v=Math.min(4,Math.max(1.1,g));W(_(c,s,H,e,n));const b=l.utils.toArray(o).map(e=>e.offsetWidth).reduce((e,t)=>e+t,0);l.set(o,{minWidth:j(a,b,s,H,e),flex:m?"0 0 auto":"1"}),N(m?a:o,f,i,L,o,H,e),y&&(h=u.create({onChangeY(e){let t=v*(L?-1:1);e.deltaY<0&&(t*=-1),l.timeline({defaults:{ease:"none"}}).to(i,{timeScale:t*v,duration:.2,overwrite:!0}).to(i,{timeScale:t/v,duration:1},"+=0.3")}}));const w=r(()=>{i.timeScale(0)}),S=r(()=>{i.timeScale(L?-1:1)});return k&&(n.addEventListener("mouseenter",w),n.addEventListener("mouseleave",S)),()=>{n.removeEventListener("mouseenter",w),n.removeEventListener("mouseleave",S),i.kill(),null==h||h.kill()}},{dependencies:[R,f,d,p,m,y,g,h,S,k,O,T,C],revertOnUpdate:!0});const F=a(()=>!Number.isFinite(R)||R<=0?null:Array.from({length:R},(e,t)=>v.jsx("div",{className:b("gsap-react-marquee"),children:v.jsx("div",{className:b("gsap-react-marquee-content",c),children:s})},t)),[R,c,s]);return v.jsxs("div",{ref:E,style:{"--gradient-color":S||(h&&A?A:"transparent")},className:b("gsap-react-marquee-container"),children:[v.jsx("div",{ref:q,className:b("gsap-react-marquee"),children:v.jsx("div",{className:b("gsap-react-marquee-content",c),children:s})}),F]})});O.displayName="GSAPReactMarquee";export{_ as calculateDuplicates,b as cn,N as coreAnimation,O as default,w as getEffectiveBackgroundColor,j as getMinWidth,k as getTargetWidth,S as hasDefinedWidth,x as setupContainerStyles};
|
|
@@ -3,6 +3,8 @@ import type { GSAPReactMarqueeProps } from "./gsap-react-marquee.type";
|
|
|
3
3
|
export declare const cn: (...inputs: ClassValue[]) => string;
|
|
4
4
|
export declare const getEffectiveBackgroundColor: (el: HTMLElement) => string;
|
|
5
5
|
export declare const setupContainerStyles: (containerMarquee: HTMLElement, marquees: HTMLElement[], marqueesChildren: HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const
|
|
6
|
+
export declare const hasDefinedWidth: (element: HTMLElement) => boolean;
|
|
7
|
+
export declare const getTargetWidth: (containerElement: HTMLElement, isVertical: boolean) => number;
|
|
8
|
+
export declare const calculateDuplicates: (marqueeChildrenWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps, containerElement?: HTMLElement) => number;
|
|
9
|
+
export declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps) => string | number;
|
|
8
10
|
export declare const coreAnimation: (elementsToAnimate: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, draggableTrigger: HTMLElement | HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;
|
package/package.json
CHANGED