@rtstic.dev/pulse 0.0.18 → 0.0.20
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/dist/global/faqs.js +1 -0
- package/dist/global/faqs.js.map +7 -0
- package/dist/global/styles.css +1 -1
- package/dist/hero-animation/loader.js +8250 -0
- package/dist/hero-animation/loader.js.map +7 -0
- package/dist/hero-animation/styles.css +1 -1
- package/dist/hero-animation/styles.css.map +2 -2
- package/dist/home/hero-animation/scroll.js +1 -1
- package/dist/home/hero-animation/scroll.js.map +2 -2
- package/dist/horizontal-scroll.css +1 -0
- package/dist/horizontal-scroll.css.map +7 -0
- package/dist/horizontal-scroll.js +43 -0
- package/dist/{scroll.js.map → horizontal-scroll.js.map} +3 -3
- package/dist/slider/testimonial.js +1 -1
- package/dist/slider/testimonial.js.map +2 -2
- package/dist/tabs.js.map +1 -1
- package/package.json +1 -1
- package/dist/scroll.js +0 -43
- package/dist/styles.css +0 -1
- package/dist/styles.css.map +0 -7
- package/dist/torch.js +0 -1
- package/dist/torch.js.map +0 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
[pulse-animation-element=player-inner-elements]{z-index:105;pointer-events:auto}[pulse-animation-element=hero-wrapper]{z-index:100}[pulse-animation-element=hero-blur-overlay]{z-index:95}[pulse-animation-element=hero-blur]{z-index:90}[pulse-animation-element=radial-gradient-wrapper]{z-index:70;opacity:0}[pulse-animation-element=canvas-wrapper]{z-index:85}[pulse-animation-element=player-wrapper]{z-index:80}#spline-container canvas{width:100vw!important}.spline-disc canvas{width:1920px!important;height:1080px!important}#canvas3d{width:100vw!important;height:100%;display:flex;justify-content:center;align-items:center}.block-canvas{display:flex;justify-content:center;align-items:flex-end;height:100vh;width:100vw;overflow:hidden;top:48px}.block_spline-3d{display:flex;position:sticky;top:0;height:100vh;pointer-events:none}.block_hero-text{position:absolute;inset:0%;overflow:hidden;height:100vh;pointer-events:auto}.block_music-player{position:absolute;bottom:0;left:0;width:100vw;height:100vh}.canvas-helper{display:none}.scroll-section{position:relative;height:350vh;pointer-events:none}.box{width:360px;height:449px;background:#0b0b0b;position:relative}.box svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none}[pulse-animation-element=player-elements]{position:absolute;inset:0}[pulse-animation-element=line-art]{background:transparent}[pulse-animation-element=player-handle]{transform-origin:left center;transform:rotate(0);left:70px}[pulse-animation-element=player-handle-tail]{transform-origin:right center;transform:rotate(0)}.blur-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#000c,#0000);height:100%}.gradient-blur{position:absolute;inset:0;backdrop-filter:blur(
|
|
1
|
+
[pulse-animation-element=player-inner-elements]{z-index:105;pointer-events:auto}[pulse-animation-element=hero-wrapper]{z-index:100}[pulse-animation-element=hero-blur-overlay]{z-index:95}[pulse-animation-element=hero-blur]{z-index:90}[pulse-animation-element=radial-gradient-wrapper]{z-index:70;opacity:0}[pulse-animation-element=canvas-wrapper]{z-index:85}[pulse-animation-element=player-wrapper],[pulse-animation-element=player-wrapper-mobile]{z-index:80}#spline-container canvas{width:100vw!important}.spline-disc canvas{width:1920px!important;height:1080px!important}#canvas3d{width:100vw!important;height:100%;display:flex;justify-content:center;align-items:center}.block-canvas{display:flex;justify-content:center;align-items:flex-end;height:100vh;width:100vw;overflow:hidden;top:48px}.block_spline-3d{display:flex;position:sticky;top:0;height:100vh;pointer-events:none}.block_hero-text{position:absolute;inset:0%;overflow:hidden;height:100vh;pointer-events:auto}.block_music-player{position:absolute;bottom:0;left:0;width:100vw;height:100vh}.canvas-helper{display:none}.scroll-section{position:relative;height:350vh;pointer-events:none}.box{width:360px;height:449px;background:#0b0b0b;position:relative}.box svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none}[pulse-animation-element=player-elements]{position:absolute;inset:0}[pulse-animation-element=line-art]{background:transparent}[pulse-animation-element=player-handle]{transform-origin:left center;transform:rotate(0);left:70px}[pulse-animation-element=player-handle-tail]{transform-origin:right center;transform:rotate(0)}.blur-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#000c,#0000);height:100%}.gradient-blur{position:absolute;inset:0;backdrop-filter:blur(8px) brightness(1);-webkit-backdrop-filter:blur(25px) brightness(1);mask-image:linear-gradient(to top,#0000,#000 60%);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 0%,rgb(0 0 0) 60%);height:80%}[pulse-animation-element=disc-spacer]{height:80px}.vignette{background:radial-gradient(circle,transparent 60%,rgba(0,0,0,.8) 100%);position:absolute;inset:0;pointer-events:none;width:100%;height:100%;z-index:89}.vignite-bg{position:absolute;z-index:90;width:100%;height:100px}@media (max-width: 479px){.vignite-bg{height:380px}}#gallery:before{content:"";position:absolute;inset:0;background:#00000006;z-index:2}.torch{position:absolute;inset:0;pointer-events:none;z-index:4;background:rgba(0,0,0,var(--darkness));opacity:0;transition:opacity .16s ease-out;-webkit-mask:radial-gradient(var(--torch-size) var(--torch-size) at var(--x) var(--y),transparent 0 var(--clear),white var(--torch-size));mask:radial-gradient(var(--torch-size) var(--torch-size) at var(--x) var(--y),transparent 0 var(--clear),white var(--torch-size))}#gallery:hover .torch{opacity:1}@media (pointer: coarse){.torch{opacity:1}}@media (prefers-reduced-motion: reduce){.torch{transition:none}}@media (max-width: 500px){.spline-disc canvas{height:800px!important}#canvas3d{width:100vw!important}.box,.col-2-row-2-item-1{width:250px;height:320px}.block-canvas{top:30px}.column_absolute{justify-content:center;align-items:center}.player-progress{padding:12px 12px 18px}}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/home/hero-animation/styles.css"],
|
|
4
|
-
"sourcesContent": ["/* Z-index hirearchy: */\n[pulse-animation-element=\"player-inner-elements\"]{\n z-index: 105;\n pointer-events: auto;\n}\n[pulse-animation-element=\"hero-wrapper\"]{\n z-index: 100;\n}\n[pulse-animation-element=\"hero-blur-overlay\"]{\n z-index: 95;\n}\n[pulse-animation-element=\"hero-blur\"]{\n z-index: 90;\n}\n[pulse-animation-element=\"radial-gradient-wrapper\"]{\n z-index: 70;\n opacity: 0;\n \n}\n[pulse-animation-element=\"canvas-wrapper\"]{\n z-index: 85;\n\n}\n[pulse-animation-element=\"player-wrapper\"]{\n z-index: 80;
|
|
5
|
-
"mappings": ";AACA,CAAC;AACG,WAAS;AACT,kBAAgB;AACpB;AACA,CAAC;AACG,WAAS;AACb;AACA,CAAC;AACG,WAAS;AACb;AACA,CAAC;AACG,WAAS;AACb;AACA,CAAC;AACG,WAAS;AACT,WAAS;AAEb;AACA,CAAC;AACG,WAAS;AAEb;AACA,CAAC;AACG,WAAS;AACb;
|
|
4
|
+
"sourcesContent": ["/* Z-index hirearchy: */\n[pulse-animation-element=\"player-inner-elements\"]{\n z-index: 105;\n pointer-events: auto;\n}\n[pulse-animation-element=\"hero-wrapper\"]{\n z-index: 100;\n}\n[pulse-animation-element=\"hero-blur-overlay\"]{\n z-index: 95;\n}\n[pulse-animation-element=\"hero-blur\"]{\n z-index: 90;\n}\n[pulse-animation-element=\"radial-gradient-wrapper\"]{\n z-index: 70;\n opacity: 0;\n \n}\n[pulse-animation-element=\"canvas-wrapper\"]{\n z-index: 85;\n\n}\n\n[pulse-animation-element=\"player-wrapper\"]{\n z-index: 80; \n}\n[pulse-animation-element=\"player-wrapper-mobile\"]{\n z-index: 80; \n}\n\n\n#spline-container canvas{\n width: 100vw !important;\n}\n\n.spline-disc canvas{\n width: 1920px !important;\n height: 1080px !important;\n}\n\n\n#canvas3d{\n width: 100vw !important;\n /* height: 100vh !important; */\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.block-canvas{\n display: flex;\n justify-content: center;\n align-items: flex-end;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n top: 48px;\n}\n\n.block_spline-3d {\n display: flex;\n position: sticky;\n top: 0px;\n height: 100vh;\n pointer-events: none;\n}\n\n.block_hero-text {\n position: absolute;\n inset: 0%;\n overflow: hidden;\n height: 100vh;\n pointer-events: auto;\n}\n\n.block_music-player{\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n /* overflow: visible; */\n}\n\n.canvas-helper{\n display : none;\n}\n\n/* scroll animation start */\n.scroll-section{\n position: relative;\n height: 350vh;\n pointer-events: none;\n /* background-color: rgba(255, 0, 0, 0.333); */\n}\n\n.box {\n width: 360px;\n height: 449px;\n background: rgba(11, 11, 11, 1);\n position: relative;\n}\n\n/* The SVG acts as the border */\n.box svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n display: block;\n overflow: visible;\n pointer-events: none;\n}\n\n[pulse-animation-element=\"player-elements\"]{\n position: absolute;\n inset: 0;\n}\n\n[pulse-animation-element=\"line-art\"]{\n background: transparent;\n}\n\n[pulse-animation-element=\"player-handle\"]{\n transform-origin: left center;\n transform: rotate(0deg);\n left: 70px;\n}\n\n[pulse-animation-element=\"player-handle-tail\"]{\n transform-origin: right center;\n transform: rotate(0deg);\n}\n\n/* [pulse-animation-element=\"radial-gradient\"]{\n background: radial-gradient(circle, #141414 0%, rgba(20, 20, 20, 0.9) 70%, rgba(20, 20, 20, 0.6) 80%, transparent 100%);\n opacity: 0.8;\n} */\n\n/* blue css */\n.blur-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0.8) 0%,\n rgba(0, 0, 0, 0) 100%\n );\n height: 100%;\n}\n\n/* .gradient-blur {\n position: absolute;\n inset: 0;\n backdrop-filter: blur(25px) brightness(1.2);\n -webkit-backdrop-filter: blur(25px) brightness(1.2);\n mask-image: linear-gradient(to top, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 70%);\n -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 70%);\n height: 100%;\n} */\n\n.gradient-blur {\n position: absolute;\n inset: 0;\n backdrop-filter: blur(8px) brightness(1);\n -webkit-backdrop-filter: blur(25px) brightness(1);\n mask-image: linear-gradient(to top, #0000 0%, #000 60%);\n -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgb(0 0 0) 60%);\n height: 80%;\n}\n\n\n[pulse-animation-element='disc-spacer']{\n height: 80px;\n}\n\n\n\n.vignette{\n background: radial-gradient(circle, transparent 60%, rgba(0, 0, 0, 0.8) 100%);\n position: absolute;\n inset: 0;\n pointer-events: none; \n width: 100%;\n height: 100%;\n z-index: 89;\n}\n.vignite-bg{\nposition: absolute;\nz-index: 90;\nwidth: 100%;\nheight:100px;\n}\n\n@media (max-width: 479px) {\n .vignite-bg{\n height:380px;\n }\n}\n\n/* \n.torch {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 91;\n background: rgba(0,0,0,var(--darkness, .75));\n opacity: 0;\n transition: opacity 160ms ease-out;\n\n -webkit-mask: radial-gradient(\n var(--torch-size, 480px) var(--torch-size, 480px)\n at var(--x, 50%) var(--y, 50%),\n transparent 0 var(--clear, 280px),\n white var(--torch-size, 480px)\n );\n mask: radial-gradient(\n var(--torch-size, 480px) var(--torch-size, 480px)\n at var(--x, 50%) var(--y, 50%),\n transparent 0 var(--clear, 280px),\n white var(--torch-size, 480px)\n );\n }\n\n #home-scroll:hover .torch { opacity: 1; } */\n\n #gallery {\n /* position: relative;\n overflow: hidden;\n box-shadow: 0 14px 44px rgba(0,0,0,.5);\n isolation: isolate; keep blending local */\n }\n /* Subtle global dim so the torch pops */\n #gallery::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, .024);\n z-index: 2;\n }\n\n /* Torch overlay that masks a circular window where darkness is removed */\n .torch {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 4;\n background: rgba(0,0,0,var(--darkness));\n opacity: 0;\n transition: opacity 160ms ease-out;\n -webkit-mask: radial-gradient(\n var(--torch-size) var(--torch-size) at var(--x) var(--y),\n transparent 0 var(--clear),\n white var(--torch-size)\n );\n mask: radial-gradient(\n var(--torch-size) var(--torch-size) at var(--x) var(--y),\n transparent 0 var(--clear),\n white var(--torch-size)\n );\n }\n\n #gallery:hover .torch { opacity: 1; }\n\n @media (pointer: coarse) {\n .torch { opacity: 1; }\n }\n @media (prefers-reduced-motion: reduce) {\n .torch { transition: none; }\n }\n\n\n @media (max-width: 500px) {\n .spline-disc canvas{\n height: 800px !important;\n }\n #canvas3d{\n width: 100vw !important;\n}\n\n\n.box {\n width: 250px;\n height: 320px;\n}\n.col-2-row-2-item-1 {\n width: 250px;\n height: 320px;\n}\n.block-canvas {\n top: 30px;\n}\n.column_absolute {\n justify-content: center;\n align-items: center;\n}\n.player-progress {\n padding: 12px;\n padding-bottom: 18px;\n}\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(()=>{var
|
|
1
|
+
"use strict";(()=>{var L=e=>!!e;function H(){if(typeof window>"u")return null;let e=window.gsap;if(!e)return console.warn("window.gsap not found. Make sure GSAP is loaded globally before this code runs."),null;let o=window.ScrollTrigger||e.ScrollTrigger;return o?(e.registerPlugin(o),e):(console.warn("ScrollTrigger not found on window (or gsap). Make sure the ScrollTrigger plugin script is loaded globally."),null)}function D(){let e=H();if(!e)return;let o=document.getElementById("home-scroll");if(!o)return;let T=o.querySelector("[pulse-animation-element='hero-title']"),S=o.querySelector("[pulse-animation-element='hero-description']"),R=o.querySelector("[pulse-animation-element='hero-button']"),a=Array.from(o.querySelectorAll("[pulse-animation-element='hero-blur']")),m=o.querySelector("[pulse-animation-element='hero-blur-overlay']"),s=o.querySelector("#canvas3d"),h=document.querySelector('[pulse-animation-element="col-1-row-1-item-1"]'),M=document.querySelector('[pulse-animation-element="col-1-row-1-item-2"]'),q=document.querySelector('[pulse-animation-element="col-1-row-2-item-1"]'),C=document.querySelector('[pulse-animation-element="col-1-row-2-item-2"]'),I=document.querySelector('[pulse-animation-element="col-1-row-3-item-1"]'),b=document.querySelector('[pulse-animation-element="col-2-row-1-item-1"]'),v=document.querySelector('[pulse-animation-element="col-2-row-1-item-2"]'),V=document.querySelector('[pulse-animation-element="col-2-row-2-item-1"]'),A=document.querySelector('[pulse-animation-element="col-2-row-3-item-1"]'),G=document.querySelector('[pulse-animation-element="col-3-row-1-item-1"]'),P=document.querySelector('[pulse-animation-element="col-3-row-2-col-1-item-1"]'),W=document.querySelector('[pulse-animation-element="col-3-row-2-col-1-item-2"]'),B=document.querySelector('[pulse-animation-element="col-3-row-2-col-2-item-1"]'),O=document.querySelector('[pulse-animation-element="col-3-row-2-col-2-item-2"]'),k=document.querySelector('[pulse-animation-element="col-3-row-3-item-1"]'),j=document.querySelector('[pulse-animation-element="canvas"]'),c=document.querySelector('[pulse-animation-element="radial-gradient-wrapper"]'),n=[h,M,q,C,I,b,v,A,G,P,W,B,O,k].filter(L),r=document.querySelector('[pulse-animation-element="player-inner-elements"]'),u=document.querySelector('[pulse-animation-element="player-radius-rect"]'),i=document.querySelector('[pulse-animation-element="line-art"]');if(!u){console.warn("Player radius rect not found");return}let z=u.getTotalLength(),l=document.querySelector('[pulse-animation-element="player-handle"]'),d=document.querySelector('[pulse-animation-element="player-handle-tail"]'),p=document.querySelector('[pulse-animation-element="handle-wrapper"]'),y=Array.from(document.querySelectorAll('[pulse-animation-element="vignette"]')),x=document.querySelector('[pulse-animation-element="torch-wrapper"]'),f=document.querySelector('[pulse-animation-element="torch"]'),g=document.querySelector('[pulse-animation-element="launch-button"]'),w=document.querySelector('[pulse-animation-element="launch-title"]');console.log("playerHandle:",l);let t=e.timeline({defaults:{ease:"power2.out",duration:1},scrollTrigger:{trigger:o,start:"top bottom",end:"bottom top",scrub:!0,invalidateOnRefresh:!0}});a.length&&e.set(a,{yPercent:32,opacity:1}),m&&e.set(m,{y:0,opacity:1}),c&&e.set(c,{opacity:0}),t.addLabel("start",0),T&&t.fromTo(T,{y:1100},{y:-400,ease:"power2.out",duration:1.2,immediateRender:!1},"start+=0.1"),S&&t.fromTo(S,{y:680},{y:-400,ease:"power2.out",duration:1.2,immediateRender:!1},"start+=0.2"),R&&t.fromTo(R,{y:440},{y:-480,ease:"power2.out",duration:1.2,immediateRender:!1},"start+=0.3"),a.length&&t.to(a,{yPercent:-100,opacity:0,ease:"power2.out",duration:1.2,delay:.2,immediateRender:!1},"start+=0.2"),m&&t.to(m,{y:-1200,ease:"power2.out",duration:1,delay:.2,immediateRender:!1},"start+=0.2");let E=[T,S,R].filter(L);E.length&&(t.to(E,{scale:.95,duration:.8,ease:"power2.out",immediateRender:!1},"start+=0.4"),t.to(E,{opacity:0,duration:.2,delay:.2,ease:"power2.out",immediateRender:!1},"start+=0.35")),n.length&&e.set(n,{opacity:0,scale:()=>e.utils.random(.5,.95),y:()=>e.utils.random(40,60)}),r&&e.set(r,{scale:.8}),e.set(u,{opacity:0}),i&&e.set(i,{opacity:0,scale:.5}),s&&e.set(s,{height:"auto"}),l&&e.set(l,{rotation:-10}),d&&e.set(d,{rotation:-10}),p&&e.set(p,{scale:.8,opacity:0}),w&&e.set(w,{y:50,opacity:0,scale:.95}),g&&e.set(g,{y:0,opacity:0,scale:.95}),y.length&&e.set(y,{opacity:0}),f&&e.set(f,{opacity:0}),t.addLabel("grid-in","start+=0.5"),n.length&&(t.to(n,{scale:1,y:0,ease:"power2.out",duration:()=>e.utils.random(.4,.8),stagger:{amount:.1,from:"random"},immediateRender:!1},"grid-in"),t.to(n,{opacity:1,ease:"power2.out",duration:()=>e.utils.random(.2,.4),stagger:{amount:.1,from:"random"},immediateRender:!1},"grid-in")),s&&t.to(s,{height:"100%",ease:"power2.out",duration:.5,immediateRender:!1},"grid-in"),r&&(t.to(r,{scale:1,ease:"power2.out",duration:.3,immediateRender:!1},"grid-in"),t.to(r,{opacity:1,ease:"power2.out",duration:.1,immediateRender:!1},"grid-in+=0.1")),i&&(t.fromTo(i,{opacity:0},{opacity:1,ease:"power2.out",duration:.2,immediateRender:!1},"grid-in+=0.1"),t.fromTo(i,{scale:.5},{scale:1,ease:"power2.out",duration:.5,immediateRender:!1},"grid-in+=0.2")),t.to(u,{opacity:1,ease:"power2.out",duration:.3,immediateRender:!1},"grid-in+=0.3"),l&&d&&p&&(t.to(p,{opacity:1,scale:1,duration:.1,ease:"power2.out",immediateRender:!1},"grid-in+=0.4"),t.to(l,{rotation:30,duration:.5,ease:"power2.out",immediateRender:!1},"grid-in+=0.4"),t.to(d,{rotation:30,duration:.5,ease:"power2.out",immediateRender:!1},"grid-in+=0.4")),w&&t.to(w,{y:0,opacity:1,scale:1,duration:.2,ease:"power2.out",immediateRender:!1},"grid-in+=0.35"),g&&t.to(g,{y:0,opacity:1,scale:1,duration:.2,ease:"power2.out",immediateRender:!1},"grid-in+=0.45"),c&&t.to(c,{opacity:1,duration:.1,ease:"power2.out",immediateRender:!1},"grid-in+=0.4"),y.length&&t.to(y,{opacity:1,duration:.2,ease:"power2.out",immediateRender:!1},"grid-in+=0.4"),f&&t.to(f,{opacity:1,duration:.2,ease:"power2.out",immediateRender:!1},"grid-in+=0.4"),n.length&&t.to(n,{opacity:.8,ease:"power2.out",duration:.2,stagger:{amount:.1,from:"random"},immediateRender:!1},"grid-in+=0.30")}typeof window<"u"&&(window.addEventListener("DOMContentLoaded",()=>{D()}),window.addEventListener("load",()=>{let e=H();if(!e)return;let o=window.ScrollTrigger||e.ScrollTrigger;o&&o.refresh&&o.refresh()}));})();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/home/hero-animation/scroll.ts"],
|
|
4
|
-
"sourcesContent": ["// animations/homeScroll.ts\n\n/**\n * Uses GSAP + ScrollTrigger from window (global scripts).\n * No imports. Ensures ScrollTrigger is registered on the SAME gsap instance.\n */\n\ndeclare global {\n interface Window {\n gsap?: any;\n ScrollTrigger?: any;\n }\n}\n\n/**\n * Helper: filter out null/undefined so GSAP never receives them.\n */\nconst isEl = <T extends Element>(v: T | null | undefined): v is T => Boolean(v);\n\n/**\n * Ensure global gsap + ScrollTrigger exist and are registered.\n * Returns the gsap instance or null.\n */\nfunction getGlobalGsap(): any | null {\n if (typeof window === \"undefined\") return null;\n\n const gsap = window.gsap;\n if (!gsap) {\n console.warn(\"window.gsap not found. Make sure GSAP is loaded globally before this code runs.\");\n return null;\n }\n\n const ScrollTrigger = window.ScrollTrigger || gsap.ScrollTrigger;\n if (!ScrollTrigger) {\n console.warn(\n \"ScrollTrigger not found on window (or gsap). Make sure the ScrollTrigger plugin script is loaded globally.\"\n );\n return null;\n }\n\n // Register once (safe to call multiple times)\n gsap.registerPlugin(ScrollTrigger);\n return gsap;\n}\n\n/* ============================================================================\n * initHomeScrollAnimation\n * ==========================================================================*/\nexport function initHomeScrollAnimation(): void {\n const gsap = getGlobalGsap();\n if (!gsap) return;\n\n /* --------------------------------- Guards -------------------------------- */\n const section = document.getElementById(\"home-scroll\");\n if (!section) return;\n\n /* ------------------------------ Hero Elements ---------------------------- */\n const title = section.querySelector<HTMLElement>(\n \"[pulse-animation-element='hero-title']\"\n );\n const description = section.querySelector<HTMLElement>(\n \"[pulse-animation-element='hero-description']\"\n );\n const button = section.querySelector<HTMLElement>(\n \"[pulse-animation-element='hero-button']\"\n );\n const blurs = Array.from(\n section.querySelectorAll<HTMLElement>(\"[pulse-animation-element='hero-blur']\")\n );\n\n const blurOverlay = section.querySelector<HTMLElement>(\n \"[pulse-animation-element='hero-blur-overlay']\"\n );\n const canvas3d = section.querySelector<HTMLElement>(\"#canvas3d\");\n\n /* ------------------------------ Grid Elements ---------------------------- */\n const Col1Row1Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-1-row-1-item-1\"]'\n );\n const Col1Row1Item2 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-1-row-1-item-2\"]'\n );\n const Col1Row2Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-1-row-2-item-1\"]'\n );\n const Col1Row2Item2 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-1-row-2-item-2\"]'\n );\n const Col1Row3Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-1-row-3-item-1\"]'\n );\n const Col2Row1Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-2-row-1-item-1\"]'\n );\n const Col2Row1Item2 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-2-row-1-item-2\"]'\n );\n const Col2Row2Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-2-row-2-item-1\"]'\n );\n const col2Row3Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-2-row-3-item-1\"]'\n );\n const Col3Row1Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-3-row-1-item-1\"]'\n );\n const Col3Row2Col1Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-3-row-2-col-1-item-1\"]'\n );\n const Col3Row2Col1Item2 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-3-row-2-col-1-item-2\"]'\n );\n const Col3Row2Col2Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-3-row-2-col-2-item-1\"]'\n );\n const Col3Row2Col2Item2 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-3-row-2-col-2-item-2\"]'\n );\n const Col3Row3Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-3-row-3-item-1\"]'\n );\n\n const canvasElement = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"canvas\"]'\n );\n const radialGradientWrapper = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"radial-gradient-wrapper\"]'\n );\n\n // collect grid items (filter out nulls)\n const gridItems = [\n Col1Row1Item1,\n Col1Row1Item2,\n Col1Row2Item1,\n Col1Row2Item2,\n Col1Row3Item1,\n Col2Row1Item1,\n Col2Row1Item2,\n // Col2Row2Item1, // intentionally not part of gridItems in your original code\n col2Row3Item1,\n Col3Row1Item1,\n Col3Row2Col1Item1,\n Col3Row2Col1Item2,\n Col3Row2Col2Item1,\n Col3Row2Col2Item2,\n Col3Row3Item1,\n ].filter(isEl);\n\n /* ----------------------------- Player Elements --------------------------- */\n const playerPositionElement = Col2Row2Item1;\n\n const playerInnerElements = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"player-inner-elements\"]'\n );\n const playerRadiusRect = document.querySelector<SVGRectElement>(\n '[pulse-animation-element=\"player-radius-rect\"]'\n );\n const lineArt = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"line-art\"]'\n );\n\n if (!playerRadiusRect) {\n console.warn(\"Player radius rect not found\");\n return;\n }\n const length = playerRadiusRect.getTotalLength();\n\n const playerHandle = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"player-handle\"]'\n );\n const playerHandlerTail = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"player-handle-tail\"]'\n );\n const playerHandleWrapper = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"handle-wrapper\"]'\n );\n\n const vignette = Array.from(\n document.querySelectorAll<HTMLElement>('[pulse-animation-element=\"vignette\"]')\n );\n\n const torchWrapper = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"torch-wrapper\"]'\n );\n const torch = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"torch\"]'\n );\n\n const launchButton = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"launch-button\"]'\n );\n const launchTitle = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"launch-title\"]'\n );\n\n console.log(\"playerHandle:\", playerHandle);\n console.log(\"Player position element:\", playerPositionElement);\n\n /* ------------------------------ Timeline Setup --------------------------- */\n const tl = gsap.timeline({\n defaults: { ease: \"power2.out\", duration: 1 },\n scrollTrigger: {\n trigger: section,\n start: \"top bottom\",\n end: \"bottom top\",\n scrub: true,\n invalidateOnRefresh: true,\n // markers: true,\n },\n });\n\n /* ------------------------------- Initial Sets ---------------------------- */\n if (blurs.length) gsap.set(blurs, { yPercent: 32, opacity: 1 });\n if (blurOverlay) gsap.set(blurOverlay, { y: 0, opacity: 1 });\n if (radialGradientWrapper) gsap.set(radialGradientWrapper, { opacity: 0 });\n\n /* --------------------------- Start: Hero Out & Blur ---------------------- */\n tl.addLabel(\"start\", 0);\n\n if (title) {\n tl.fromTo(\n title,\n { y: 1100 },\n { y: -400, ease: \"power2.out\", duration: 1.2, immediateRender: false },\n \"start+=0.1\"\n );\n }\n\n if (description) {\n tl.fromTo(\n description,\n { y: 680 },\n { y: -400, ease: \"power2.out\", duration: 1.2, immediateRender: false },\n \"start+=0.2\"\n );\n }\n\n if (button) {\n tl.fromTo(\n button,\n { y: 440 },\n { y: -480, ease: \"power2.out\", duration: 1.2, immediateRender: false },\n \"start+=0.3\"\n );\n }\n\n if (blurs.length) {\n tl.to(\n blurs,\n {\n yPercent: -100,\n opacity: 0,\n ease: \"power2.out\",\n duration: 1.2,\n delay: 0.2,\n immediateRender: false,\n },\n \"start+=0.2\"\n );\n }\n\n if (blurOverlay) {\n tl.to(\n blurOverlay,\n {\n y: -1200,\n ease: \"power2.out\",\n duration: 1,\n delay: 0.2,\n immediateRender: false,\n },\n \"start+=0.2\"\n );\n }\n\n const heroTargets = [title, description, button].filter(isEl);\n if (heroTargets.length) {\n tl.to(\n heroTargets,\n {\n scale: 0.95,\n duration: 0.8,\n ease: \"power2.out\",\n immediateRender: false,\n },\n \"start+=0.4\"\n );\n\n tl.to(\n heroTargets,\n {\n opacity: 0,\n duration: 0.2,\n delay: 0.2,\n ease: \"power2.out\",\n immediateRender: false,\n },\n \"start+=0.35\"\n );\n }\n\n /* ----------------------------- Grid: Initial ----------------------------- */\n if (gridItems.length) {\n gsap.set(gridItems, {\n opacity: 0,\n scale: () => gsap.utils.random(0.5, 0.95),\n y: () => gsap.utils.random(40, 60),\n });\n }\n\n if (playerPositionElement) gsap.set(playerPositionElement, { opacity: 1, scale: 0.5 });\n if (playerInnerElements) gsap.set(playerInnerElements, { scale: 0.8 });\n gsap.set(playerRadiusRect, { opacity: 0 });\n if (lineArt) gsap.set(lineArt, { opacity: 0, scale: 0.5 });\n if (canvas3d) gsap.set(canvas3d, { height: \"auto\" });\n if (playerHandle) gsap.set(playerHandle, { rotation: -10 });\n if (playerHandlerTail) gsap.set(playerHandlerTail, { rotation: -10 });\n if (playerHandleWrapper) gsap.set(playerHandleWrapper, { scale: 0.8, opacity: 0 });\n if (launchTitle) gsap.set(launchTitle, { y: 50, opacity: 0, scale: 0.95 });\n if (launchButton) gsap.set(launchButton, { y: 0, opacity: 0, scale: 0.95 });\n if (vignette.length) gsap.set(vignette, { opacity: 0 });\n if (torch) gsap.set(torch, { opacity: 0 });\n\n /* ------------------------------- Grid: In -------------------------------- */\n tl.addLabel(\"grid-in\", \"start+=0.5\");\n\n if (gridItems.length) {\n tl.to(\n gridItems,\n {\n scale: 1,\n y: 0,\n ease: \"power2.out\",\n duration: () => gsap.utils.random(0.4, 0.8),\n stagger: { amount: 0.1, from: \"random\" },\n immediateRender: false,\n },\n \"grid-in\"\n );\n\n tl.to(\n gridItems,\n {\n opacity: 1,\n ease: \"power2.out\",\n duration: () => gsap.utils.random(0.2, 0.4),\n stagger: { amount: 0.1, from: \"random\" },\n immediateRender: false,\n },\n \"grid-in\"\n );\n }\n\n if (canvas3d) {\n tl.to(\n canvas3d,\n { height: \"100%\", ease: \"power2.out\", duration: 0.5, immediateRender: false },\n \"grid-in\"\n );\n }\n\n if (playerPositionElement) {\n tl.to(\n playerPositionElement,\n { opacity: 1, scale: 1, ease: \"power2.out\", duration: 0.3, immediateRender: false },\n \"grid-in\"\n );\n }\n\n if (playerInnerElements) {\n tl.to(\n playerInnerElements,\n { scale: 1, ease: \"power2.out\", duration: 0.3, immediateRender: false },\n \"grid-in\"\n );\n tl.to(\n playerInnerElements,\n { opacity: 1, ease: \"power2.out\", duration: 0.1, immediateRender: false },\n \"grid-in+=0.1\"\n );\n }\n\n if (lineArt) {\n tl.fromTo(\n lineArt,\n { opacity: 0 },\n { opacity: 1, ease: \"power2.out\", duration: 0.2, immediateRender: false },\n \"grid-in+=0.1\"\n );\n\n tl.fromTo(\n lineArt,\n { scale: 0.5 },\n { scale: 1, ease: \"power2.out\", duration: 0.5, immediateRender: false },\n \"grid-in+=0.2\"\n );\n }\n\n tl.to(\n playerRadiusRect,\n { opacity: 1, ease: \"power2.out\", duration: 0.3, immediateRender: false },\n \"grid-in+=0.3\"\n );\n\n if (playerHandle && playerHandlerTail && playerHandleWrapper) {\n tl.to(\n playerHandleWrapper,\n { opacity: 1, scale: 1, duration: 0.1, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.4\"\n );\n tl.to(\n playerHandle,\n { rotation: 30, duration: 0.5, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.4\"\n );\n tl.to(\n playerHandlerTail,\n { rotation: 30, duration: 0.5, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.4\"\n );\n }\n\n if (launchTitle) {\n tl.to(\n launchTitle,\n { y: 0, opacity: 1, scale: 1, duration: 0.2, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.35\"\n );\n }\n\n if (launchButton) {\n tl.to(\n launchButton,\n { y: 0, opacity: 1, scale: 1, duration: 0.2, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.45\"\n );\n }\n\n if (radialGradientWrapper) {\n tl.to(\n radialGradientWrapper,\n { opacity: 1, duration: 0.1, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.4\"\n );\n }\n\n if (vignette.length) {\n tl.to(\n vignette,\n { opacity: 1, duration: 0.2, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.4\"\n );\n }\n\n if (torchWrapper) {\n // kept commented out as in your original\n // tl.to(torchWrapper, { opacity: 1, duration: 0.2, ease: \"power2.out\", immediateRender: false }, \"grid-in+=0.4\");\n }\n\n if (torch) {\n tl.to(\n torch,\n { opacity: 1, duration: 0.2, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.4\"\n );\n }\n\n if (gridItems.length) {\n tl.to(\n gridItems,\n {\n opacity: 0.8,\n ease: \"power2.out\",\n duration: 0.2,\n stagger: { amount: 0.1, from: \"random\" },\n immediateRender: false,\n },\n \"grid-in+=0.30\"\n );\n }\n}\n\n/* --------------------------------- Auto-Init ------------------------------- */\nif (typeof window !== \"undefined\") {\n window.addEventListener(\"DOMContentLoaded\", () => {\n initHomeScrollAnimation();\n });\n\n window.addEventListener(\"load\", () => {\n const gsap = getGlobalGsap();\n if (!gsap) return;\n\n const ScrollTrigger = window.ScrollTrigger || gsap.ScrollTrigger;\n if (ScrollTrigger && ScrollTrigger.refresh) ScrollTrigger.refresh();\n });\n}"],
|
|
5
|
-
"mappings": ";;;AAiBA,MAAM,OAAO,CAAoB,MAAoC,QAAQ,CAAC;AAM9E,WAAS,gBAA4B;AACnC,QAAI,OAAO,WAAW,YAAa,QAAO;AAE1C,UAAM,OAAO,OAAO;AACpB,QAAI,CAAC,MAAM;AACT,cAAQ,KAAK,iFAAiF;AAC9F,aAAO;AAAA,IACT;AAEA,UAAM,gBAAgB,OAAO,iBAAiB,KAAK;AACnD,QAAI,CAAC,eAAe;AAClB,cAAQ;AAAA,QACN;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAGA,SAAK,eAAe,aAAa;AACjC,WAAO;AAAA,EACT;AAKO,WAAS,0BAAgC;AAC9C,UAAM,OAAO,cAAc;AAC3B,QAAI,CAAC,KAAM;AAGX,UAAM,UAAU,SAAS,eAAe,aAAa;AACrD,QAAI,CAAC,QAAS;AAGd,UAAM,QAAQ,QAAQ;AAAA,MACpB;AAAA,IACF;AACA,UAAM,cAAc,QAAQ;AAAA,MAC1B;AAAA,IACF;AACA,UAAM,SAAS,QAAQ;AAAA,MACrB;AAAA,IACF;AACA,UAAM,QAAQ,MAAM;AAAA,MAClB,QAAQ,iBAA8B,uCAAuC;AAAA,IAC/E;AAEA,UAAM,cAAc,QAAQ;AAAA,MAC1B;AAAA,IACF;AACA,UAAM,WAAW,QAAQ,cAA2B,WAAW;AAG/D,UAAM,gBAAgB,SAAS;AAAA,MAC7B;AAAA,IACF;AACA,UAAM,gBAAgB,SAAS;AAAA,MAC7B;AAAA,IACF;AACA,UAAM,gBAAgB,SAAS;AAAA,MAC7B;AAAA,IACF;AACA,UAAM,gBAAgB,SAAS;AAAA,MAC7B;AAAA,IACF;AACA,UAAM,gBAAgB,SAAS;AAAA,MAC7B;AAAA,IACF;AACA,UAAM,gBAAgB,SAAS;AAAA,MAC7B;AAAA,IACF;AACA,UAAM,gBAAgB,SAAS;AAAA,MAC7B;AAAA,IACF;AACA,UAAM,gBAAgB,SAAS;AAAA,MAC7B;AAAA,IACF;AACA,UAAM,gBAAgB,SAAS;AAAA,MAC7B;AAAA,IACF;AACA,UAAM,gBAAgB,SAAS;AAAA,MAC7B;AAAA,IACF;AACA,UAAM,oBAAoB,SAAS;AAAA,MACjC;AAAA,IACF;AACA,UAAM,oBAAoB,SAAS;AAAA,MACjC;AAAA,IACF;AACA,UAAM,oBAAoB,SAAS;AAAA,MACjC;AAAA,IACF;AACA,UAAM,oBAAoB,SAAS;AAAA,MACjC;AAAA,IACF;AACA,UAAM,gBAAgB,SAAS;AAAA,MAC7B;AAAA,IACF;AAEA,UAAM,gBAAgB,SAAS;AAAA,MAC7B;AAAA,IACF;AACA,UAAM,wBAAwB,SAAS;AAAA,MACrC;AAAA,IACF;AAGA,UAAM,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,EAAE,OAAO,IAAI;
|
|
4
|
+
"sourcesContent": ["// animations/homeScroll.ts\n\n/**\n * Uses GSAP + ScrollTrigger from window (global scripts).\n * No imports. Ensures ScrollTrigger is registered on the SAME gsap instance.\n */\n\ndeclare global {\n interface Window {\n gsap?: any;\n ScrollTrigger?: any;\n }\n}\n\n/**\n * Helper: filter out null/undefined so GSAP never receives them.\n */\nconst isEl = <T extends Element>(v: T | null | undefined): v is T => Boolean(v);\n\n/**\n * Ensure global gsap + ScrollTrigger exist and are registered.\n * Returns the gsap instance or null.\n */\nfunction getGlobalGsap(): any | null {\n if (typeof window === \"undefined\") return null;\n\n const gsap = window.gsap;\n if (!gsap) {\n console.warn(\"window.gsap not found. Make sure GSAP is loaded globally before this code runs.\");\n return null;\n }\n\n const ScrollTrigger = window.ScrollTrigger || gsap.ScrollTrigger;\n if (!ScrollTrigger) {\n console.warn(\n \"ScrollTrigger not found on window (or gsap). Make sure the ScrollTrigger plugin script is loaded globally.\"\n );\n return null;\n }\n\n // Register once (safe to call multiple times)\n gsap.registerPlugin(ScrollTrigger);\n return gsap;\n}\n\n/* ============================================================================\n * initHomeScrollAnimation\n * ==========================================================================*/\nexport function initHomeScrollAnimation(): void {\n const gsap = getGlobalGsap();\n if (!gsap) return;\n\n /* --------------------------------- Guards -------------------------------- */\n const section = document.getElementById(\"home-scroll\");\n if (!section) return;\n\n /* ------------------------------ Hero Elements ---------------------------- */\n const title = section.querySelector<HTMLElement>(\n \"[pulse-animation-element='hero-title']\"\n );\n const description = section.querySelector<HTMLElement>(\n \"[pulse-animation-element='hero-description']\"\n );\n const button = section.querySelector<HTMLElement>(\n \"[pulse-animation-element='hero-button']\"\n );\n const blurs = Array.from(\n section.querySelectorAll<HTMLElement>(\"[pulse-animation-element='hero-blur']\")\n );\n\n const blurOverlay = section.querySelector<HTMLElement>(\n \"[pulse-animation-element='hero-blur-overlay']\"\n );\n const canvas3d = section.querySelector<HTMLElement>(\"#canvas3d\");\n\n /* ------------------------------ Grid Elements ---------------------------- */\n const Col1Row1Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-1-row-1-item-1\"]'\n );\n const Col1Row1Item2 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-1-row-1-item-2\"]'\n );\n const Col1Row2Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-1-row-2-item-1\"]'\n );\n const Col1Row2Item2 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-1-row-2-item-2\"]'\n );\n const Col1Row3Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-1-row-3-item-1\"]'\n );\n const Col2Row1Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-2-row-1-item-1\"]'\n );\n const Col2Row1Item2 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-2-row-1-item-2\"]'\n );\n const Col2Row2Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-2-row-2-item-1\"]'\n );\n const col2Row3Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-2-row-3-item-1\"]'\n );\n const Col3Row1Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-3-row-1-item-1\"]'\n );\n const Col3Row2Col1Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-3-row-2-col-1-item-1\"]'\n );\n const Col3Row2Col1Item2 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-3-row-2-col-1-item-2\"]'\n );\n const Col3Row2Col2Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-3-row-2-col-2-item-1\"]'\n );\n const Col3Row2Col2Item2 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-3-row-2-col-2-item-2\"]'\n );\n const Col3Row3Item1 = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"col-3-row-3-item-1\"]'\n );\n\n const canvasElement = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"canvas\"]'\n );\n const radialGradientWrapper = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"radial-gradient-wrapper\"]'\n );\n\n // collect grid items (filter out nulls)\n const gridItems = [\n Col1Row1Item1,\n Col1Row1Item2,\n Col1Row2Item1,\n Col1Row2Item2,\n Col1Row3Item1,\n Col2Row1Item1,\n Col2Row1Item2,\n // Col2Row2Item1, // intentionally not part of gridItems in your original code\n col2Row3Item1,\n Col3Row1Item1,\n Col3Row2Col1Item1,\n Col3Row2Col1Item2,\n Col3Row2Col2Item1,\n Col3Row2Col2Item2,\n Col3Row3Item1,\n ].filter(isEl);\n\n /* ----------------------------- Player Elements --------------------------- */\n // const playerPositionElement = Col2Row2Item1;\n\n const playerInnerElements = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"player-inner-elements\"]'\n );\n const playerRadiusRect = document.querySelector<SVGRectElement>(\n '[pulse-animation-element=\"player-radius-rect\"]'\n );\n const lineArt = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"line-art\"]'\n );\n\n if (!playerRadiusRect) {\n console.warn(\"Player radius rect not found\");\n return;\n }\n const length = playerRadiusRect.getTotalLength();\n\n const playerHandle = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"player-handle\"]'\n );\n const playerHandlerTail = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"player-handle-tail\"]'\n );\n const playerHandleWrapper = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"handle-wrapper\"]'\n );\n\n const vignette = Array.from(\n document.querySelectorAll<HTMLElement>('[pulse-animation-element=\"vignette\"]')\n );\n\n const torchWrapper = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"torch-wrapper\"]'\n );\n const torch = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"torch\"]'\n );\n\n const launchButton = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"launch-button\"]'\n );\n const launchTitle = document.querySelector<HTMLElement>(\n '[pulse-animation-element=\"launch-title\"]'\n );\n\n console.log(\"playerHandle:\", playerHandle);\n // console.log(\"Player position element:\", playerPositionElement);\n\n /* ------------------------------ Timeline Setup --------------------------- */\n const tl = gsap.timeline({\n defaults: { ease: \"power2.out\", duration: 1 },\n scrollTrigger: {\n trigger: section,\n start: \"top bottom\",\n end: \"bottom top\",\n scrub: true,\n invalidateOnRefresh: true,\n // markers: true,\n },\n });\n\n /* ------------------------------- Initial Sets ---------------------------- */\n if (blurs.length) gsap.set(blurs, { yPercent: 32, opacity: 1 });\n if (blurOverlay) gsap.set(blurOverlay, { y: 0, opacity: 1 });\n if (radialGradientWrapper) gsap.set(radialGradientWrapper, { opacity: 0 });\n\n /* --------------------------- Start: Hero Out & Blur ---------------------- */\n tl.addLabel(\"start\", 0);\n\n if (title) {\n tl.fromTo(\n title,\n { y: 1100 },\n { y: -400, ease: \"power2.out\", duration: 1.2, immediateRender: false },\n \"start+=0.1\"\n );\n }\n\n if (description) {\n tl.fromTo(\n description,\n { y: 680 },\n { y: -400, ease: \"power2.out\", duration: 1.2, immediateRender: false },\n \"start+=0.2\"\n );\n }\n\n if (button) {\n tl.fromTo(\n button,\n { y: 440 },\n { y: -480, ease: \"power2.out\", duration: 1.2, immediateRender: false },\n \"start+=0.3\"\n );\n }\n\n if (blurs.length) {\n tl.to(\n blurs,\n {\n yPercent: -100,\n opacity: 0,\n ease: \"power2.out\",\n duration: 1.2,\n delay: 0.2,\n immediateRender: false,\n },\n \"start+=0.2\"\n );\n }\n\n if (blurOverlay) {\n tl.to(\n blurOverlay,\n {\n y: -1200,\n ease: \"power2.out\",\n duration: 1,\n delay: 0.2,\n immediateRender: false,\n },\n \"start+=0.2\"\n );\n }\n\n const heroTargets = [title, description, button].filter(isEl);\n if (heroTargets.length) {\n tl.to(\n heroTargets,\n {\n scale: 0.95,\n duration: 0.8,\n ease: \"power2.out\",\n immediateRender: false,\n },\n \"start+=0.4\"\n );\n\n tl.to(\n heroTargets,\n {\n opacity: 0,\n duration: 0.2,\n delay: 0.2,\n ease: \"power2.out\",\n immediateRender: false,\n },\n \"start+=0.35\"\n );\n }\n\n /* ----------------------------- Grid: Initial ----------------------------- */\n if (gridItems.length) {\n gsap.set(gridItems, {\n opacity: 0,\n scale: () => gsap.utils.random(0.5, 0.95),\n y: () => gsap.utils.random(40, 60),\n });\n }\n\n // if (playerPositionElement) gsap.set(playerPositionElement, { opacity: 1, scale: 0.5 });\n if (playerInnerElements) gsap.set(playerInnerElements, { scale: 0.8 });\n gsap.set(playerRadiusRect, { opacity: 0 });\n if (lineArt) gsap.set(lineArt, { opacity: 0, scale: 0.5 });\n if (canvas3d) gsap.set(canvas3d, { height: \"auto\" });\n if (playerHandle) gsap.set(playerHandle, { rotation: -10 });\n if (playerHandlerTail) gsap.set(playerHandlerTail, { rotation: -10 });\n if (playerHandleWrapper) gsap.set(playerHandleWrapper, { scale: 0.8, opacity: 0 });\n if (launchTitle) gsap.set(launchTitle, { y: 50, opacity: 0, scale: 0.95 });\n if (launchButton) gsap.set(launchButton, { y: 0, opacity: 0, scale: 0.95 });\n if (vignette.length) gsap.set(vignette, { opacity: 0 });\n if (torch) gsap.set(torch, { opacity: 0 });\n\n /* ------------------------------- Grid: In -------------------------------- */\n tl.addLabel(\"grid-in\", \"start+=0.5\");\n\n if (gridItems.length) {\n tl.to(\n gridItems,\n {\n scale: 1,\n y: 0,\n ease: \"power2.out\",\n duration: () => gsap.utils.random(0.4, 0.8),\n stagger: { amount: 0.1, from: \"random\" },\n immediateRender: false,\n },\n \"grid-in\"\n );\n\n tl.to(\n gridItems,\n {\n opacity: 1,\n ease: \"power2.out\",\n duration: () => gsap.utils.random(0.2, 0.4),\n stagger: { amount: 0.1, from: \"random\" },\n immediateRender: false,\n },\n \"grid-in\"\n );\n }\n\n if (canvas3d) {\n tl.to(\n canvas3d,\n { height: \"100%\", ease: \"power2.out\", duration: 0.5, immediateRender: false },\n \"grid-in\"\n );\n }\n\n // if (playerPositionElement) {\n // tl.to(\n // playerPositionElement,\n // { opacity: 1, scale: 1, ease: \"power2.out\", duration: 0.3, immediateRender: false },\n // \"grid-in\"\n // );\n // }\n\n if (playerInnerElements) {\n tl.to(\n playerInnerElements,\n { scale: 1, ease: \"power2.out\", duration: 0.3, immediateRender: false },\n \"grid-in\"\n );\n tl.to(\n playerInnerElements,\n { opacity: 1, ease: \"power2.out\", duration: 0.1, immediateRender: false },\n \"grid-in+=0.1\"\n );\n }\n\n if (lineArt) {\n tl.fromTo(\n lineArt,\n { opacity: 0 },\n { opacity: 1, ease: \"power2.out\", duration: 0.2, immediateRender: false },\n \"grid-in+=0.1\"\n );\n\n tl.fromTo(\n lineArt,\n { scale: 0.5 },\n { scale: 1, ease: \"power2.out\", duration: 0.5, immediateRender: false },\n \"grid-in+=0.2\"\n );\n }\n\n tl.to(\n playerRadiusRect,\n { opacity: 1, ease: \"power2.out\", duration: 0.3, immediateRender: false },\n \"grid-in+=0.3\"\n );\n\n if (playerHandle && playerHandlerTail && playerHandleWrapper) {\n tl.to(\n playerHandleWrapper,\n { opacity: 1, scale: 1, duration: 0.1, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.4\"\n );\n tl.to(\n playerHandle,\n { rotation: 30, duration: 0.5, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.4\"\n );\n tl.to(\n playerHandlerTail,\n { rotation: 30, duration: 0.5, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.4\"\n );\n }\n\n if (launchTitle) {\n tl.to(\n launchTitle,\n { y: 0, opacity: 1, scale: 1, duration: 0.2, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.35\"\n );\n }\n\n if (launchButton) {\n tl.to(\n launchButton,\n { y: 0, opacity: 1, scale: 1, duration: 0.2, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.45\"\n );\n }\n\n if (radialGradientWrapper) {\n tl.to(\n radialGradientWrapper,\n { opacity: 1, duration: 0.1, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.4\"\n );\n }\n\n if (vignette.length) {\n tl.to(\n vignette,\n { opacity: 1, duration: 0.2, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.4\"\n );\n }\n\n if (torchWrapper) {\n // kept commented out as in your original\n // tl.to(torchWrapper, { opacity: 1, duration: 0.2, ease: \"power2.out\", immediateRender: false }, \"grid-in+=0.4\");\n }\n\n if (torch) {\n tl.to(\n torch,\n { opacity: 1, duration: 0.2, ease: \"power2.out\", immediateRender: false },\n \"grid-in+=0.4\"\n );\n }\n\n if (gridItems.length) {\n tl.to(\n gridItems,\n {\n opacity: 0.8,\n ease: \"power2.out\",\n duration: 0.2,\n stagger: { amount: 0.1, from: \"random\" },\n immediateRender: false,\n },\n \"grid-in+=0.30\"\n );\n }\n}\n\n/* --------------------------------- Auto-Init ------------------------------- */\nif (typeof window !== \"undefined\") {\n window.addEventListener(\"DOMContentLoaded\", () => {\n initHomeScrollAnimation();\n });\n\n window.addEventListener(\"load\", () => {\n const gsap = getGlobalGsap();\n if (!gsap) return;\n\n const ScrollTrigger = window.ScrollTrigger || gsap.ScrollTrigger;\n if (ScrollTrigger && ScrollTrigger.refresh) ScrollTrigger.refresh();\n });\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
[horizontal-scroll-section]{height:100vh;overflow:hidden;background:#000;position:relative;justify-content:flex-start}[horizontal-scroll-wrapper]{display:flex;height:100%;will-change:transform;gap:40px}.panel{min-width:100vw;width:100vw;height:100vh;position:relative;z-index:1}.panel.is-title{min-width:60vw;width:60vw;position:relative;z-index:1}@media (max-width: 991px){[horizontal-scroll-section]{height:auto;overflow:visible;display:block;padding:0}[horizontal-scroll-wrapper]{display:block;height:auto;width:100%}.panel{min-width:100%;width:100%;height:100vh;position:sticky;top:0;box-shadow:0 -5px 20px #00000080}}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/home/horizontal-scroll.css"],
|
|
4
|
+
"sourcesContent": ["\n /* --- DESKTOP LAYOUT (Default) --- */\n \n [horizontal-scroll-section] {\n height: 100vh;\n overflow: hidden;\n background: #000;\n position: relative;\n /* Ensures content starts at left edge for horizontal scroll */\n justify-content: flex-start; \n }\n\n [horizontal-scroll-wrapper] {\n display: flex;\n height: 100%;\n will-change: transform;\n gap: 40px;\n }\n\n .panel {\n min-width: 100vw;\n width: 100vw;\n height: 100vh;\n /* Create a stacking context */\n position: relative; \n z-index: 1;\n }\n .panel.is-title {\n min-width: 60vw;\n width: 60vw;\n /* Create a stacking context */\n position: relative; \n z-index: 1;\n }\n\n /* --- MOBILE STACKING LAYOUT (< 992px) --- */\n @media (max-width: 991px) {\n \n /* 1. Unset the pinned height and overflow so the body can scroll naturally */\n [horizontal-scroll-section] {\n height: auto;\n overflow: visible; /* Important: sticky won't work if this is hidden */\n display: block; /* Stack block elements */\n padding: 0;\n }\n\n [horizontal-scroll-wrapper] {\n display: block;\n height: auto;\n width: 100%;\n }\n \n /* 2. The Stacking Effect */\n .panel {\n min-width: 100%;\n width: 100%;\n height: 100vh; /* Each card takes full screen */\n \n /* MAGIC SAUCE: Sticky Positioning */\n position: sticky; \n top: 0; /* Sticks to the top of viewport */\n \n /* Visual separation for the stacking effect */\n box-shadow: 0 -5px 20px rgba(0,0,0,0.5); \n }\n \n }\n"],
|
|
5
|
+
"mappings": ";AAGI,CAAC;AACC,UAAQ;AACR,YAAU;AACV,cAAY;AACZ,YAAU;AAEV,mBAAiB;AACnB;AAEA,CAAC;AACC,WAAS;AACT,UAAQ;AACR,eAAa;AACb,OAAK;AACP;AAEA,CAAC;AACC,aAAW;AACX,SAAO;AACP,UAAQ;AAER,YAAU;AACV,WAAS;AACX;AACE,CARD,KAQO,CAAC;AACP,aAAW;AACX,SAAO;AAEP,YAAU;AACV,WAAS;AACX;AAGA,OAAO,CAAC,SAAS,EAAE;AAGjB,GAAC;AACC,YAAQ;AACR,cAAU;AACV,aAAS;AACT,aAAS;AACX;AAEA,GAAC;AACC,aAAS;AACT,YAAQ;AACR,WAAO;AACT;AAGA,GAlCD;AAmCG,eAAW;AACX,WAAO;AACP,YAAQ;AAGR,cAAU;AACV,SAAK;AAGL,gBAAY,EAAE,KAAK,KAAK,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC;AACrC;AAEF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|