@fynd-design-engineering/fynd-one-v2 3.4.51 → 3.4.53
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(()=>{document.addEventListener("DOMContentLoaded",()=>{let o=window.gsap;if(!o){console.error("ERROR: GSAP not loaded!");return}let
|
|
1
|
+
"use strict";(()=>{document.addEventListener("DOMContentLoaded",()=>{let o=window.gsap;if(!o){console.error("ERROR: GSAP not loaded!");return}let g=window.ScrollTrigger;g&&o.registerPlugin(g);let P=document.querySelectorAll("[entity-error-connector]"),b=document.querySelectorAll("[entity-success-connector]"),w=document.querySelectorAll("[entity-name]");if(w.length===0){console.error("ERROR: No entities found with [entity-name] attribute");return}let u=document.querySelector("[playbook='store']"),d=document.querySelector("[playbook='store-foundation']"),p=document.querySelector("[playbook='foundation-base']"),x=document.querySelector("[playbook='spacer']"),E=document.querySelector("[playbook='title-1']"),f=document.querySelector("[playbook='title-2']"),y=document.querySelector("[playbook='title-3']"),m=document.querySelector("[playbook='counter']"),L=document.querySelector("[playbook='counter-text']"),S=document.querySelector("[playbook='grid']"),v=document.querySelector("[playbook='question']"),F=document.querySelector("[playbook='button']"),A={value:2341100};L&&(L.textContent="2341700");let C=null,G=()=>{C&&C.kill(),C=o.timeline({repeat:-1}),L&&C.to(A,{value:2341728,duration:20,ease:"power2.out",onUpdate:()=>{L.textContent=Math.floor(A.value).toLocaleString()}}).set(A,{value:2341100})},k=[];if(w.forEach(e=>{let n=e.getAttribute("entity-name");if(!n)return;let a=Array.from(b).find(s=>s.getAttribute("entity-success-connector")===n),t=Array.from(P).find(s=>s.getAttribute("entity-error-connector")===n);if(a){let s=a.querySelector("path"),I=t?.querySelector("path")||null,N=Array.from(e.querySelectorAll('[entity-state="success"]')),O=Array.from(e.querySelectorAll('[entity-state="error"]'));s&&k.push({name:e,connector:a,path:s,errorConnector:t||null,errorPath:I,successState:N[0]||null,successStates:N,errorStates:O,id:n})}}),k.length===0){console.error("ERROR: No pairs created!");return}console.log(`\u2713 Created ${k.length} animation pairs`);let c=e=>{let n=window.innerWidth,a={storeFoundation:{mobile:{scale:4,x:"32px",y:"-78px"},tablet:{scale:3,x:"0px",y:"-100px"},desktop:{scale:2.8,x:"-400px",y:"-50px"}},grid:{mobile:{scale:1.5,x:"30px"},tablet:{scale:1.8,x:"45px"},desktop:{scale:2.1,x:"60px"}},counter:{mobile:{scale:1,y:"-100px"},tablet:{scale:1.1,y:"-180px"},desktop:{scale:1.2,y:"-100px"}},question:{mobile:{scale:1,y:"-100px"},tablet:{scale:1.1,y:"-180px"},desktop:{scale:1.2,y:"-100px"}},spcerSet:{mobile:{height:"20px"},tablet:{height:"100px"},desktop:{height:"240px"}},storeAndStoreFoundationInitial:{mobile:{scale:3,x:"20px"},tablet:{scale:2,x:"0px"},desktop:{scale:1.5,x:"0px"}},storeAndStoreFoundationFinal:{mobile:{scale:1,x:"0px"},tablet:{scale:1,x:"0px"},desktop:{scale:1,x:"0px"}}},t=()=>n<480?"mobile":n<992?"tablet":"desktop";return a[e]?.[t()]||{}},l=k.sort(()=>Math.random()-.5),h=l.map(e=>e.path).filter(Boolean),T=l.map(e=>e.name).filter(Boolean),W=l.flatMap(e=>e.successStates);o.set([...P,...b],{opacity:0}),u&&d&&o.set([u,d],{...c("storeAndStoreFoundationInitial")}),p&&o.set(p,{opacity:0}),w.length>0&&o.set(w,{opacity:0,scale:.5}),x&&o.set(x,{...c("spcerSet")}),S&&o.set(S,{scale:2}),v&&o.set(v,{...c("question")}),m&&o.set(m,{...c("counter")}),E&&o.set(E,{y:0}),f&&o.set(f,{y:40,opacity:0,filter:"blur(10px)"}),y&&o.set(y,{y:40,opacity:0,filter:"blur(10px)"}),l.forEach(({path:e,errorPath:n,successStates:a,errorStates:t})=>{if(e){try{let s=e.getTotalLength();o.set(e,{strokeDasharray:s,strokeDashoffset:s})}catch{console.warn("WARNING: Could not get SVG path length")}n&&o.set(n,{opacity:0}),a.forEach(s=>{s&&o.set(s,{opacity:0})}),t.forEach(s=>{s&&o.set(s,{opacity:0})})}});let r=o.timeline({scrollTrigger:{trigger:"#scroll",start:"top top",end:"+=5000vh",scrub:2.5,pin:!0,fastScrollSensitivity:1}});u&&d&&r.to([u,d],{...c("storeAndStoreFoundationFinal")}),x&&r.to(x,{height:"0px",duration:.4,ease:"power3.out"},"<"),S&&r.to(S,{scale:1,duration:.4,ease:"power3.out"},"<"),p&&r.to(p,{opacity:1,duration:.2,ease:"power3.out"},"-=0.1"),b.length>0&&r.set(b,{opacity:1}),h.length>0&&r.to(h,{strokeDashoffset:0,duration:.8,ease:"power3.out"},"+=0.05"),T.length>0&&r.to(T,{opacity:1,scale:1,duration:.2,ease:"power3.out",delay:.2},"-=0.6"),W.length>0&&r.to(W,{opacity:1,duration:.2,ease:"power3.out"},"-=0.6"),r.add(()=>{console.log("\u2705 Step 4 Complete: All pairs set to SUCCESS state"),l.forEach(e=>{o.set(e.path,{opacity:1}),o.set(e.connector,{opacity:1}),e.successStates.forEach(n=>{o.set(n,{opacity:1})}),e.errorPath&&o.set(e.errorPath,{opacity:0}),e.errorConnector&&o.set(e.errorConnector,{opacity:0}),e.errorStates.forEach(n=>{o.set(n,{opacity:0})})})},"-=0.2"),E&&f&&r.to(E,{y:-40,opacity:0,filter:"blur(10px)",duration:.3,ease:"sine.inOut"}).to(f,{y:0,opacity:1,filter:"blur(0px)",duration:.3,ease:"sine.inOut"},"-=0.1"),r.addLabel("beforeWaves"),r.add(()=>{console.log("\u{1F3AC} Initializing all pairs to SUCCESS state"),l.forEach(e=>{o.set(e.path,{opacity:1}),e.errorPath&&o.set(e.errorPath,{opacity:0}),e.errorConnector&&o.set(e.errorConnector,{opacity:0}),e.successStates.forEach(n=>o.set(n,{opacity:1})),e.errorStates.forEach(n=>o.set(n,{opacity:0}))})},"beforeWaves"),r.addLabel("step6Start","+=0.2");let i=l.filter(e=>e.errorConnector&&e.errorPath);i.length===0?console.warn("WARNING: No pairs with error states found"):console.log(`\u2713 Found ${i.length} pairs with error states`);let q=[["content","inventory"],["products","delivery"],["returns","promises"]],H=e=>{!e||!e.path||(o.to(e.path,{opacity:0,duration:.3,ease:"power3.in"}),e.errorPath&&o.to(e.errorPath,{opacity:1,duration:.3,ease:"power3.out"}),e.errorConnector&&o.to(e.errorConnector,{opacity:1,duration:.15,ease:"power3.out"}),e.successStates&&e.successStates.length>0&&o.to(e.successStates,{opacity:0,duration:.3,ease:"power3.in"}),e.errorStates&&e.errorStates.length>0&&o.to(e.errorStates,{opacity:1,duration:.3,ease:"power3.out"}))},M=e=>{!e||!e.path||(e.errorPath&&o.to(e.errorPath,{opacity:0,duration:.3,ease:"power3.in"}),e.errorConnector&&o.to(e.errorConnector,{opacity:0,duration:.15,ease:"power3.in"}),o.to(e.path,{opacity:1,duration:.3,ease:"power3.out"}),e.errorStates&&e.errorStates.length>0&&o.to(e.errorStates,{opacity:0,duration:.3,ease:"power3.in"}),e.successStates&&e.successStates.length>0&&o.to(e.successStates,{opacity:1,duration:.3,ease:"power3.out"}))};i.length>0&&(r.addLabel("wave1Start","step6Start"),r.add(()=>{console.log("\u{1F30A} Wave 1 triggered!");let e=q[0],n=i.filter(t=>e.includes(t.id.toLowerCase())),a=i.filter(t=>!e.includes(t.id.toLowerCase()));console.log(` Failing: ${n.map(t=>t.id).join(", ")}`),console.log(` Succeeding: ${a.map(t=>t.id).join(", ")}`),n.forEach(t=>H(t)),a.forEach(t=>M(t))},"wave1Start"),r.to({},{duration:.5},"wave1Start"),r.addLabel("wave2Start","+=0.2"),r.add(()=>{console.log("\u{1F30A} Wave 2 triggered!");let e=q[1],n=i.filter(t=>e.includes(t.id.toLowerCase())),a=i.filter(t=>!e.includes(t.id.toLowerCase()));console.log(` Failing: ${n.map(t=>t.id).join(", ")}`),console.log(` Succeeding: ${a.map(t=>t.id).join(", ")}`),n.forEach(t=>H(t)),a.forEach(t=>M(t))},"wave2Start"),r.to({},{duration:.5},"wave2Start"),r.addLabel("wave3Start","+=0.2"),r.add(()=>{console.log("\u{1F30A} Wave 3 triggered!");let e=q[2],n=i.filter(t=>e.includes(t.id.toLowerCase())),a=i.filter(t=>!e.includes(t.id.toLowerCase()));console.log(` Failing: ${n.map(t=>t.id).join(", ")}`),console.log(` Succeeding: ${a.map(t=>t.id).join(", ")}`),n.forEach(t=>H(t)),a.forEach(t=>M(t))},"wave3Start"),r.to({},{duration:.5},"wave3Start"),r.addLabel("afterWaves","+=0.2"),r.add(()=>{console.log("\u2705 All waves complete! Making all pairs SUCCESS"),i.forEach(e=>{M(e)})},"afterWaves"),f&&y&&r.to(f,{y:-40,opacity:0,filter:"blur(10px)",duration:.3,ease:"sine.inOut"},"wave3Start").to(y,{y:0,opacity:1,filter:"blur(0px)",duration:.3,ease:"sine.inOut"},"wave3Start"));let R=i.flatMap(e=>e.successStates);R.length>0&&r.to(R,{opacity:0,duration:.1,ease:"power3.in"},"afterWaves+=0.2"),T.length>0&&r.to(T,{opacity:0,scale:.3,duration:.1,ease:"power3.in"},"<"),h.length>0&&r.to(h,{strokeDashoffset:e=>{if(h[e])try{return h[e].getTotalLength()}catch{return 0}return 0},duration:.3,ease:"power3.in"},"-=0.05"),u&&p&&r.to([u,p],{scale:0,x:"140px",y:"-20px",opacity:0,duration:.1,ease:"power3.in"}),y&&r.to(y,{opacity:0,filter:"blur(5px)",duration:.1,ease:"power3.in"},"<"),d&&r.to(d,{...c("storeFoundation"),opacity:1,duration:.2,ease:"power3.in"},"<"),S&&r.to(S,{...c("grid"),duration:.3,ease:"power3.out"},"<"),m&&(r.to(m,{opacity:1,filter:"blur(0px)",duration:.3,ease:"power3.out",onStart:G},"-=0.1"),r.to(m,{opacity:0,filter:"blur(10px)",scale:1,delay:.5,duration:.2,ease:"power3.in"})),v&&r.to(v,{opacity:1,filter:"blur(0px)",duration:.2,scale:1.2,ease:"power3.out"}),F&&r.to(F,{scale:1.01,duration:1,ease:"power3.out"},"-=0.2"),g.refresh(),console.log("\u2713 Animation timeline complete!"),window.addEventListener("resize",()=>{g.refresh()})});})();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../bin/live-reload.js", "../../src/playbook-2026/index.ts"],
|
|
4
|
-
"sourcesContent": ["// Only enable live reload when running on localhost\nif (\n window.location.hostname === \"localhost\" ||\n window.location.hostname === \"127.0.0.1\"\n) {\n new EventSource(`${SERVE_ORIGIN}/esbuild`).addEventListener(\"change\", () =>\n location.reload()\n );\n} else {\n // console.log(\"Live reload disabled: not running on localhost\");\n}\n", "// Initialize on DOM loaded\ndocument.addEventListener('DOMContentLoaded', (): void => {\n\n const gsap: any = (window as any).gsap\n if (!gsap) {\n console.error(\"ERROR: GSAP not loaded!\")\n return\n }\n\n const ScrollTrigger = (window as any).ScrollTrigger\n if (ScrollTrigger) {\n gsap.registerPlugin(ScrollTrigger)\n }\n\n // ! Scroll animation starts\n\n const errorConnectors = document.querySelectorAll<HTMLElement>(\"[entity-error-connector]\")\n const successConnectors = document.querySelectorAll<HTMLElement>(\"[entity-success-connector]\")\n const entityNames = document.querySelectorAll<HTMLElement>(\"[entity-name]\")\n\n if (entityNames.length === 0) {\n console.error(\"ERROR: No entities found with [entity-name] attribute\")\n return\n }\n\n const store = document.querySelector<HTMLElement>(\"[playbook='store']\")\n const storeFoundation = document.querySelector<HTMLElement>(\"[playbook='store-foundation']\")\n const foundationBase = document.querySelector<HTMLElement>(\"[playbook='foundation-base']\")\n const spacer = document.querySelector<HTMLElement>(\"[playbook='spacer']\")\n const title1 = document.querySelector<HTMLElement>(\"[playbook='title-1']\")\n const title2 = document.querySelector<HTMLElement>(\"[playbook='title-2']\")\n const title3 = document.querySelector<HTMLElement>(\"[playbook='title-3']\")\n const counter = document.querySelector<HTMLElement>(\"[playbook='counter']\")\n const counterText = document.querySelector<HTMLElement>(\"[playbook='counter-text']\")\n const grid = document.querySelector<HTMLElement>(\"[playbook='grid']\")\n const question = document.querySelector<HTMLElement>(\"[playbook='question']\")\n const button = document.querySelector<HTMLElement>(\"[playbook='button']\")\n\n const counterValue = { value: 2341700 }\n if (counterText) {\n counterText.textContent = \"2341700\"\n }\n\n // Create pairs based on matching attribute values\n const pairs: Array<{\n name: HTMLElement\n connector: HTMLElement\n path: SVGPathElement\n successState: HTMLElement | null\n errorConnector: HTMLElement | null\n errorPath: SVGPathElement | null\n successStates: HTMLElement[]\n errorStates: HTMLElement[]\n id: string\n }> = []\n\n entityNames.forEach(nameEl => {\n const id = nameEl.getAttribute('entity-name')\n if (!id) return\n\n const matchingSuccessConnector = Array.from(successConnectors).find(\n connector => connector.getAttribute('entity-success-connector') === id\n )\n\n const matchingErrorConnector = Array.from(errorConnectors).find(\n connector => connector.getAttribute('entity-error-connector') === id\n )\n\n if (matchingSuccessConnector) {\n const successPath = matchingSuccessConnector.querySelector<SVGPathElement>('path')\n const errorPath = matchingErrorConnector?.querySelector<SVGPathElement>('path') || null\n\n const successStates = Array.from(nameEl.querySelectorAll<HTMLElement>('[entity-state=\"success\"]'))\n const errorStates = Array.from(nameEl.querySelectorAll<HTMLElement>('[entity-state=\"error\"]'))\n\n if (successPath) {\n pairs.push({\n name: nameEl,\n connector: matchingSuccessConnector,\n path: successPath,\n errorConnector: matchingErrorConnector || null,\n errorPath,\n successState: successStates[0] || null,\n successStates,\n errorStates,\n id\n })\n }\n }\n })\n\n if (pairs.length === 0) {\n console.error(\"ERROR: No pairs created!\")\n return\n }\n\n console.log(`\u2713 Created ${pairs.length} animation pairs`)\n\n const shuffledPairs = pairs.sort(() => Math.random() - 0.5)\n const allPaths = shuffledPairs.map(p => p.path).filter(Boolean)\n const allNames = shuffledPairs.map(p => p.name).filter(Boolean)\n const allSuccessStatesStep4 = shuffledPairs.flatMap(p => p.successStates)\n\n gsap.set([...errorConnectors, ...successConnectors], { opacity: 0 })\n if (store && storeFoundation) gsap.set([store, storeFoundation], { scale: 1.5 })\n if (foundationBase) gsap.set(foundationBase, { opacity: 0 })\n if (entityNames.length > 0) gsap.set(entityNames, { opacity: 0, scale: 0.5 })\n if (spacer) gsap.set(spacer, { height: \"100px\" })\n if (grid) gsap.set(grid, { scale: 2 })\n if (question) gsap.set(question, { scale: 0.9, y: \"-110px\" })\n if (counter) gsap.set(counter, { scale: 1.2, y: \"-100px\" })\n\n if (title1 && title2) gsap.set(title2, { opacity: 0, filter: \"blur(10px)\" })\n if (title3) gsap.set(title3, { opacity: 0, filter: \"blur(10px)\" })\n\n shuffledPairs.forEach(({ path, errorPath, successStates, errorStates }) => {\n if (!path) return\n\n try {\n const length = path.getTotalLength()\n gsap.set(path, {\n strokeDasharray: length,\n strokeDashoffset: length,\n })\n } catch (e) {\n console.warn(\"WARNING: Could not get SVG path length\")\n }\n\n if (errorPath) gsap.set(errorPath, { opacity: 0 })\n successStates.forEach(state => { if (state) gsap.set(state, { opacity: 0 }) })\n errorStates.forEach(state => { if (state) gsap.set(state, { opacity: 0 }) })\n })\n\n const tl = gsap.timeline({\n scrollTrigger: {\n trigger: \"#scroll\",\n start: \"top top\",\n end: \"+=5000vh\",\n scrub: 1.5,\n pin: true,\n fastScrollSensitivity: 1,\n },\n });\n\n // 1. scale down store + foundation AND animate spacer height\n if (store && storeFoundation) {\n tl.to([store, storeFoundation], {\n scale: 1,\n duration: 0.4,\n ease: \"power3.out\",\n })\n }\n\n if (spacer) {\n tl.to(spacer, {\n height: \"0px\",\n duration: 0.4,\n ease: \"power3.out\",\n }, \"<\")\n }\n\n if (grid) {\n tl.to(grid, {\n scale: 1,\n duration: 0.4,\n ease: \"power3.out\",\n }, \"<\")\n }\n\n // 2. foundation base fades slightly overlapping\n if (foundationBase) {\n tl.to(foundationBase, {\n opacity: 1,\n duration: 0.2,\n ease: \"power3.out\",\n }, \"-=0.1\")\n }\n\n // 3. Make all connectors visible first\n if (successConnectors.length > 0) {\n tl.set(successConnectors, { opacity: 1 })\n }\n\n // FIXED: Step 4 - Animate paths with proper duration and timing\n\n // 3. Make all connectors visible first\n if (successConnectors.length > 0) {\n tl.set(successConnectors, { opacity: 1 })\n }\n\n // 4. Animate each pair together - all paths, names, and success states at once\n // IMPORTANT: Increased duration so you can see the full path animation\n if (allPaths.length > 0) {\n tl.to(allPaths, {\n strokeDashoffset: 0,\n duration: 0.8, // \u2190 INCREASED from 0.3 (so you see full path)\n ease: \"power3.out\",\n }, \"+=0.05\") // \u2190 CHANGED from \"-=0.1\" (ensures paths are visible first)\n }\n\n if (allNames.length > 0) {\n tl.to(allNames, {\n opacity: 1,\n scale: 1,\n duration: 0.2,\n ease: \"power3.out\",\n }, \"-=0.6\") // \u2190 Overlaps with path animation\n }\n\n if (allSuccessStatesStep4.length > 0) {\n tl.to(allSuccessStatesStep4, {\n opacity: 1,\n duration: 0.2,\n ease: \"power3.out\",\n }, \"-=0.6\") // \u2190 Overlaps with path animation\n }\n\n // ============================================\n // ALSO: Update your SVG setup to ensure proper rendering\n // ============================================\n\n shuffledPairs.forEach(({ path, errorPath, successStates, errorStates }) => {\n if (!path) return\n\n try {\n const length = path.getTotalLength()\n\n // Set initial stroke properties\n gsap.set(path, {\n strokeDasharray: length,\n strokeDashoffset: length,\n })\n\n // Make sure the path element has proper attributes\n // (Check your HTML to ensure these are set on the SVG <path>)\n // The path should have:\n // - stroke=\"#color\" or stroke=\"currentColor\"\n // - stroke-width=\"2\" (or appropriate width)\n // - fill=\"none\"\n\n } catch (e) {\n console.warn(\"WARNING: Could not get SVG path length\")\n }\n\n if (errorPath) {\n gsap.set(errorPath, { opacity: 0 })\n }\n\n successStates.forEach(state => {\n if (state) gsap.set(state, { opacity: 0 })\n })\n errorStates.forEach(state => {\n if (state) gsap.set(state, { opacity: 0 })\n })\n })\n\n // 5. Simple blur + opacity transition from title-1 to title-2\n if (title1 && title2) {\n tl.to(title1, {\n opacity: 0,\n filter: \"blur(10px)\",\n duration: 0.3,\n ease: \"sine.inOut\",\n })\n .to(title2, {\n opacity: 1,\n filter: \"blur(0px)\",\n duration: 0.3,\n ease: \"sine.inOut\",\n }, \"-=0.15\")\n }\n\n // ===== INITIALIZE ALL PAIRS TO SUCCESS STATE BEFORE WAVES START =====\n tl.addLabel(\"beforeWaves\")\n\n tl.add(() => {\n console.log(\"\uD83C\uDFAC Initializing all pairs to SUCCESS state\")\n shuffledPairs.forEach(pair => {\n gsap.set(pair.path, { opacity: 1 })\n if (pair.errorPath) gsap.set(pair.errorPath, { opacity: 0 })\n if (pair.errorConnector) gsap.set(pair.errorConnector, { opacity: 0 })\n pair.successStates.forEach(state => gsap.set(state, { opacity: 1 }))\n pair.errorStates.forEach(state => gsap.set(state, { opacity: 0 }))\n })\n }, \"beforeWaves\")\n\n // 6. Create cycling failure/success waves with predefined patterns\n tl.addLabel(\"step6Start\", \"+=0.2\")\n\n const pairsWithErrors = shuffledPairs.filter(p => p.errorConnector && p.errorPath)\n\n if (pairsWithErrors.length === 0) {\n console.warn(\"WARNING: No pairs with error states found\")\n } else {\n console.log(`\u2713 Found ${pairsWithErrors.length} pairs with error states`)\n }\n\n // Define which entities fail in each wave by their IDs\n const failurePatterns = [\n ['content', 'inventory'], // Wave 1\n ['products', 'delivery'], // Wave 2\n ['returns', 'promises'] // Wave 3\n ]\n\n // Helper function to animate failure - IMMEDIATE ANIMATION\n const animateFailure = (pair: typeof pairsWithErrors[0]): void => {\n if (!pair || !pair.path) return\n\n gsap.to(pair.path, {\n opacity: 0,\n duration: 0.3,\n ease: \"power3.in\",\n })\n\n if (pair.errorPath) {\n gsap.to(pair.errorPath, {\n opacity: 1,\n duration: 0.3,\n ease: \"power3.out\",\n })\n }\n\n if (pair.errorConnector) {\n gsap.set(pair.errorConnector, { opacity: 1 })\n }\n\n if (pair.successStates && pair.successStates.length > 0) {\n gsap.to(pair.successStates, {\n opacity: 0,\n duration: 0.3,\n ease: \"power3.in\",\n })\n }\n\n if (pair.errorStates && pair.errorStates.length > 0) {\n gsap.to(pair.errorStates, {\n opacity: 1,\n duration: 0.3,\n ease: \"power3.out\",\n })\n }\n }\n\n // Helper function to animate success - IMMEDIATE ANIMATION\n const animateSuccess = (pair: typeof pairsWithErrors[0]): void => {\n if (!pair || !pair.path) return\n\n if (pair.errorPath) {\n gsap.to(pair.errorPath, {\n opacity: 0,\n duration: 0.3,\n ease: \"power3.in\",\n })\n }\n\n if (pair.errorConnector) {\n gsap.set(pair.errorConnector, { opacity: 0 })\n }\n\n gsap.to(pair.path, {\n opacity: 1,\n duration: 0.3,\n ease: \"power3.out\",\n })\n\n if (pair.errorStates && pair.errorStates.length > 0) {\n gsap.to(pair.errorStates, {\n opacity: 0,\n duration: 0.3,\n ease: \"power3.in\",\n })\n }\n\n if (pair.successStates && pair.successStates.length > 0) {\n gsap.to(pair.successStates, {\n opacity: 1,\n duration: 0.3,\n ease: \"power3.out\",\n })\n }\n }\n\n // Create waves - EACH WAVE ON SEPARATE SCROLL\n if (pairsWithErrors.length > 0) {\n // WAVE 1 - Trigger at step6Start\n tl.addLabel(\"wave1Start\", \"step6Start\")\n tl.add(() => {\n console.log(`\uD83C\uDF0A Wave 1 triggered!`)\n const failureIds = failurePatterns[0]\n const toFail = pairsWithErrors.filter(p => failureIds.includes(p.id.toLowerCase()))\n const toSucceed = pairsWithErrors.filter(p => !failureIds.includes(p.id.toLowerCase()))\n console.log(` Failing: ${toFail.map(p => p.id).join(', ')}`)\n console.log(` Succeeding: ${toSucceed.map(p => p.id).join(', ')}`)\n toFail.forEach(pair => animateFailure(pair))\n toSucceed.forEach(pair => animateSuccess(pair))\n }, \"wave1Start\")\n\n // Add spacing for next wave\n tl.to({}, { duration: 0.5 }, \"wave1Start\")\n\n // WAVE 2 - Trigger on next scroll (0.5 duration later)\n tl.addLabel(\"wave2Start\", \"+=0.2\")\n tl.add(() => {\n console.log(`\uD83C\uDF0A Wave 2 triggered!`)\n const failureIds = failurePatterns[1]\n const toFail = pairsWithErrors.filter(p => failureIds.includes(p.id.toLowerCase()))\n const toSucceed = pairsWithErrors.filter(p => !failureIds.includes(p.id.toLowerCase()))\n console.log(` Failing: ${toFail.map(p => p.id).join(', ')}`)\n console.log(` Succeeding: ${toSucceed.map(p => p.id).join(', ')}`)\n toFail.forEach(pair => animateFailure(pair))\n toSucceed.forEach(pair => animateSuccess(pair))\n }, \"wave2Start\")\n\n // Add spacing for next wave\n tl.to({}, { duration: 0.5 }, \"wave2Start\")\n\n // WAVE 3 - Trigger on next scroll (0.5 duration later)\n tl.addLabel(\"wave3Start\", \"+=0.2\")\n tl.add(() => {\n console.log(`\uD83C\uDF0A Wave 3 triggered!`)\n const failureIds = failurePatterns[2]\n const toFail = pairsWithErrors.filter(p => failureIds.includes(p.id.toLowerCase()))\n const toSucceed = pairsWithErrors.filter(p => !failureIds.includes(p.id.toLowerCase()))\n console.log(` Failing: ${toFail.map(p => p.id).join(', ')}`)\n console.log(` Succeeding: ${toSucceed.map(p => p.id).join(', ')}`)\n toFail.forEach(pair => animateFailure(pair))\n toSucceed.forEach(pair => animateSuccess(pair))\n }, \"wave3Start\")\n\n // Add spacing before final animations\n tl.to({}, { duration: 0.5 }, \"wave3Start\")\n\n // AFTER ALL WAVES - Make all success\n tl.addLabel(\"afterWaves\", \"+=0.2\")\n tl.add(() => {\n console.log(\"\u2705 All waves complete! Making all pairs SUCCESS\")\n pairsWithErrors.forEach(pair => {\n animateSuccess(pair)\n })\n }, \"afterWaves\")\n\n // Title transition along with Wave 3 - BOTH HAPPEN TOGETHER\n if (title2 && title3) {\n tl.to(title2, {\n opacity: 0,\n filter: \"blur(10px)\",\n duration: 0.3,\n ease: \"sine.inOut\",\n }, \"wave3Start\")\n .to(title3, {\n opacity: 1,\n filter: \"blur(0px)\",\n duration: 0.3,\n ease: \"sine.inOut\",\n }, \"wave3Start\") // \u2190 Changed from \"-=0.15\" to \"wave3Start\"\n }\n }\n\n // ===== FINAL ANIMATIONS (Steps 7-9) =====\n\n // 7. Fade out all success states together\n const allSuccessStatesStep7 = pairsWithErrors.flatMap(p => p.successStates)\n\n if (allSuccessStatesStep7.length > 0) {\n tl.to(allSuccessStatesStep7, {\n opacity: 0,\n duration: 0.1,\n ease: \"power3.in\",\n }, \"afterWaves+=0.2\")\n }\n\n if (allNames.length > 0) {\n tl.to(allNames, {\n opacity: 0,\n scale: 0.3,\n duration: 0.1,\n ease: \"power3.in\",\n }, \"<\")\n }\n\n if (allPaths.length > 0) {\n tl.to(allPaths, {\n strokeDashoffset: (index: number) => {\n if (allPaths[index]) {\n try {\n return allPaths[index].getTotalLength()\n } catch (e) {\n return 0\n }\n }\n return 0\n },\n duration: 0.3,\n ease: \"power3.in\",\n }, \"-=0.05\")\n }\n\n // 8. Scale down store and foundationBase to 0\n if (store && foundationBase) {\n tl.to([store, foundationBase], {\n scale: 0,\n x: \"140px\",\n y: \"-20px\",\n opacity: 0,\n duration: 0.1,\n ease: \"power3.in\",\n })\n }\n\n if (title3) {\n tl.to(title3, {\n opacity: 0,\n filter: \"blur(5px)\",\n duration: 0.1,\n ease: \"power3.in\",\n }, \"<\")\n }\n\n if (storeFoundation) {\n tl.to(storeFoundation, {\n scale: 2.8,\n x: \"-400px\",\n y: \"-50px\",\n opacity: 1,\n duration: 0.2,\n ease: \"power3.in\",\n }, \"<\")\n }\n\n if (grid) {\n tl.to(grid, {\n scale: 2.1,\n duration: 0.3,\n x: \"60px\",\n ease: \"power3.out\",\n }, \"<\")\n }\n\n if (counter) {\n tl.to(counter, {\n opacity: 1,\n filter: \"blur(0px)\",\n duration: 0.3,\n ease: \"power3.out\",\n })\n\n tl.to(counterValue, {\n value: 2341728,\n duration: 0.8,\n ease: \"power3.out\",\n onUpdate: () => {\n if (counterText) {\n counterText.textContent = Math.floor(counterValue.value).toLocaleString()\n }\n }\n }, \"<\")\n\n tl.to(counter, {\n opacity: 0,\n filter: \"blur(10px)\",\n scale: 1,\n duration: 0.3,\n ease: \"power3.in\",\n })\n }\n\n if (question) {\n tl.to(question, {\n opacity: 1,\n filter: \"blur(0px)\",\n duration: 0.3,\n scale: 1.2,\n ease: \"power3.out\",\n }, \"-=0.15\")\n }\n\n // if (button) {\n // tl.to(button, {\n // scale: 1.2,\n // duration: 0.6,\n // ease: \"power3.out\",\n // })\n // }\n\n ScrollTrigger.refresh()\n console.log(\"\u2713 Animation timeline complete!\")\n\n});"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["// Only enable live reload when running on localhost\nif (\n window.location.hostname === \"localhost\" ||\n window.location.hostname === \"127.0.0.1\"\n) {\n new EventSource(`${SERVE_ORIGIN}/esbuild`).addEventListener(\"change\", () =>\n location.reload()\n );\n} else {\n // console.log(\"Live reload disabled: not running on localhost\");\n}\n", "// Initialize on DOM loaded\ndocument.addEventListener('DOMContentLoaded', (): void => {\n\n const gsap: any = (window as any).gsap\n if (!gsap) {\n console.error(\"ERROR: GSAP not loaded!\")\n return\n }\n\n const ScrollTrigger = (window as any).ScrollTrigger\n if (ScrollTrigger) {\n gsap.registerPlugin(ScrollTrigger)\n }\n\n // ! Scroll animation starts\n\n const errorConnectors = document.querySelectorAll<HTMLElement>(\"[entity-error-connector]\")\n const successConnectors = document.querySelectorAll<HTMLElement>(\"[entity-success-connector]\")\n const entityNames = document.querySelectorAll<HTMLElement>(\"[entity-name]\")\n\n if (entityNames.length === 0) {\n console.error(\"ERROR: No entities found with [entity-name] attribute\")\n return\n }\n\n const store = document.querySelector<HTMLElement>(\"[playbook='store']\")\n const storeFoundation = document.querySelector<HTMLElement>(\"[playbook='store-foundation']\")\n const foundationBase = document.querySelector<HTMLElement>(\"[playbook='foundation-base']\")\n const spacer = document.querySelector<HTMLElement>(\"[playbook='spacer']\")\n const title1 = document.querySelector<HTMLElement>(\"[playbook='title-1']\")\n const title2 = document.querySelector<HTMLElement>(\"[playbook='title-2']\")\n const title3 = document.querySelector<HTMLElement>(\"[playbook='title-3']\")\n const counter = document.querySelector<HTMLElement>(\"[playbook='counter']\")\n const counterText = document.querySelector<HTMLElement>(\"[playbook='counter-text']\")\n const grid = document.querySelector<HTMLElement>(\"[playbook='grid']\")\n const question = document.querySelector<HTMLElement>(\"[playbook='question']\")\n const button = document.querySelector<HTMLElement>(\"[playbook='button']\")\n\n const counterValue = { value: 2341100 }\n if (counterText) {\n counterText.textContent = \"2341700\"\n }\n // Create independent counter animation (OUTSIDE the timeline)\n let counterAnimation: any = null;\n\n const startCounterAnimation = () => {\n // Kill any existing animation\n if (counterAnimation) counterAnimation.kill();\n\n counterAnimation = gsap.timeline({ repeat: -1 });\n\n if (counterText) {\n counterAnimation.to(counterValue, {\n value: 2341728,\n duration: 20,\n ease: \"power2.out\",\n onUpdate: () => {\n counterText.textContent = Math.floor(counterValue.value).toLocaleString();\n }\n })\n .set(counterValue, { value: 2341100 }); // Reset for next loop\n }\n }\n\n // Create pairs based on matching attribute values\n const pairs: Array<{\n name: HTMLElement\n connector: HTMLElement\n path: SVGPathElement\n successState: HTMLElement | null\n errorConnector: HTMLElement | null\n errorPath: SVGPathElement | null\n successStates: HTMLElement[]\n errorStates: HTMLElement[]\n id: string\n }> = []\n\n entityNames.forEach(nameEl => {\n const id = nameEl.getAttribute('entity-name')\n if (!id) return\n\n const matchingSuccessConnector = Array.from(successConnectors).find(\n connector => connector.getAttribute('entity-success-connector') === id\n )\n\n const matchingErrorConnector = Array.from(errorConnectors).find(\n connector => connector.getAttribute('entity-error-connector') === id\n )\n\n if (matchingSuccessConnector) {\n const successPath = matchingSuccessConnector.querySelector<SVGPathElement>('path')\n const errorPath = matchingErrorConnector?.querySelector<SVGPathElement>('path') || null\n\n const successStates = Array.from(nameEl.querySelectorAll<HTMLElement>('[entity-state=\"success\"]'))\n const errorStates = Array.from(nameEl.querySelectorAll<HTMLElement>('[entity-state=\"error\"]'))\n\n if (successPath) {\n pairs.push({\n name: nameEl,\n connector: matchingSuccessConnector,\n path: successPath,\n errorConnector: matchingErrorConnector || null,\n errorPath,\n successState: successStates[0] || null,\n successStates,\n errorStates,\n id\n })\n }\n }\n })\n\n if (pairs.length === 0) {\n console.error(\"ERROR: No pairs created!\")\n return\n }\n\n console.log(`\u2713 Created ${pairs.length} animation pairs`)\n\n // Responsive breakpoints configuration\n const getBreakpointValues = (breakpointName: string) => {\n const width = window.innerWidth;\n\n const breakpoints: Record<string, Record<'mobile' | 'tablet' | 'desktop', any>> = {\n storeFoundation: {\n mobile: { scale: 4, x: \"26px\", y: \"-78px\" },\n tablet: { scale: 3, x: \"0px\", y: \"-100px\" },\n desktop: { scale: 2.8, x: \"-400px\", y: \"-50px\" },\n },\n grid: {\n mobile: { scale: 1.5, x: \"30px\" },\n tablet: { scale: 1.8, x: \"45px\" },\n desktop: { scale: 2.1, x: \"60px\" },\n },\n counter: {\n mobile: { scale: 1.0, y: \"-100px\" },\n tablet: { scale: 1.1, y: \"-180px\" },\n desktop: { scale: 1.2, y: \"-100px\" },\n },\n question: {\n mobile: { scale: 1.0, y: \"-100px\" },\n tablet: { scale: 1.1, y: \"-180px\" },\n desktop: { scale: 1.2, y: \"-100px\" },\n },\n spcerSet: {\n mobile: { height: \"20px\" },\n tablet: { height: \"100px\" },\n desktop: { height: \"240px\" },\n },\n storeAndStoreFoundationInitial: {\n mobile: { scale: 3, x: \"20px\" },\n tablet: { scale: 2, x: \"0px\" },\n desktop: { scale: 1.5, x: \"0px\" },\n },\n storeAndStoreFoundationFinal: {\n mobile: { scale: 1, x: \"0px\" },\n tablet: { scale: 1, x: \"0px\" },\n desktop: { scale: 1, x: \"0px\" },\n },\n // Add more element configs as needed\n }\n\n const getDeviceType = (): 'mobile' | 'tablet' | 'desktop' => {\n if (width < 480) return 'mobile'\n if (width < 992) return 'tablet'\n return 'desktop'\n }\n\n return breakpoints[breakpointName]?.[getDeviceType()] || {}\n }\n\n const shuffledPairs = pairs.sort(() => Math.random() - 0.5)\n const allPaths = shuffledPairs.map(p => p.path).filter(Boolean)\n const allNames = shuffledPairs.map(p => p.name).filter(Boolean)\n const allSuccessStatesStep4 = shuffledPairs.flatMap(p => p.successStates)\n\n gsap.set([...errorConnectors, ...successConnectors], { opacity: 0 })\n // if (store && storeFoundation) gsap.set([store, storeFoundation], { scale: 1.5 })\n if (store && storeFoundation) gsap.set([store, storeFoundation], { ...getBreakpointValues('storeAndStoreFoundationInitial') })\n if (foundationBase) gsap.set(foundationBase, { opacity: 0 })\n if (entityNames.length > 0) gsap.set(entityNames, { opacity: 0, scale: 0.5 })\n // if (spacer) gsap.set(spacer, { height: \"200px\" })\n if (spacer) gsap.set(spacer, { ...getBreakpointValues('spcerSet') })\n\n if (grid) gsap.set(grid, { scale: 2 })\n if (question) gsap.set(question, { ...getBreakpointValues('question') })\n if (counter) gsap.set(counter, { ...getBreakpointValues('counter') })\n\n // if (title1 && title2) gsap.set(title2, { opacity: 0, filter: \"blur(10px)\" })\n // Set initial state for title2 (add to your initialization section)\n if (title1) gsap.set(title1, { y: 0 })\n if (title2) gsap.set(title2, { y: 40, opacity: 0, filter: \"blur(10px)\" })\n if (title3) gsap.set(title3, { y: 40, opacity: 0, filter: \"blur(10px)\" })\n\n shuffledPairs.forEach(({ path, errorPath, successStates, errorStates }) => {\n if (!path) return\n\n try {\n const length = path.getTotalLength()\n gsap.set(path, {\n strokeDasharray: length,\n strokeDashoffset: length,\n })\n } catch (e) {\n console.warn(\"WARNING: Could not get SVG path length\")\n }\n\n if (errorPath) gsap.set(errorPath, { opacity: 0 })\n successStates.forEach(state => { if (state) gsap.set(state, { opacity: 0 }) })\n errorStates.forEach(state => { if (state) gsap.set(state, { opacity: 0 }) })\n })\n\n const tl = gsap.timeline({\n scrollTrigger: {\n trigger: \"#scroll\",\n start: \"top top\",\n end: \"+=5000vh\",\n scrub: 2.5,\n pin: true,\n fastScrollSensitivity: 1,\n },\n });\n\n // 1. scale down store + foundation AND animate spacer height\n // if (store && storeFoundation) {\n // tl.to([store, storeFoundation], {\n // scale: 1,\n // duration: 0.4,\n // ease: \"power3.out\",\n // })\n // }\n if (store && storeFoundation) {\n tl.to([store, storeFoundation], { ...getBreakpointValues('storeAndStoreFoundationFinal') })\n }\n\n if (spacer) {\n tl.to(spacer, {\n height: \"0px\",\n duration: 0.4,\n ease: \"power3.out\",\n }, \"<\")\n }\n\n if (grid) {\n tl.to(grid, {\n scale: 1,\n duration: 0.4,\n ease: \"power3.out\",\n }, \"<\")\n }\n\n // 2. foundation base fades slightly overlapping\n if (foundationBase) {\n tl.to(foundationBase, {\n opacity: 1,\n duration: 0.2,\n ease: \"power3.out\",\n }, \"-=0.1\")\n }\n\n // 3. Make all connectors visible first\n if (successConnectors.length > 0) {\n tl.set(successConnectors, { opacity: 1 })\n }\n\n // 4. Animate each pair together - all paths, names, and success states at once\n // INCREASED duration so you can see the full path animation\n if (allPaths.length > 0) {\n tl.to(allPaths, {\n strokeDashoffset: 0,\n duration: 0.8, // Increased from 0.3 to see full path\n ease: \"power3.out\",\n }, \"+=0.05\")\n }\n\n if (allNames.length > 0) {\n tl.to(allNames, {\n opacity: 1,\n scale: 1,\n duration: 0.2,\n ease: \"power3.out\",\n delay: 0.2\n }, \"-=0.6\")\n }\n\n if (allSuccessStatesStep4.length > 0) {\n tl.to(allSuccessStatesStep4, {\n opacity: 1,\n duration: 0.2,\n ease: \"power3.out\",\n }, \"-=0.6\")\n }\n\n // ===== SET ALL TO SUCCESS STATE AFTER STEP 4 =====\n // Make sure all success connectors and states visible, error ones hidden\n tl.add(() => {\n console.log(\"\u2705 Step 4 Complete: All pairs set to SUCCESS state\")\n\n shuffledPairs.forEach(pair => {\n // Success path visible\n gsap.set(pair.path, { opacity: 1 })\n\n // Success connector visible\n gsap.set(pair.connector, { opacity: 1 })\n\n // Success states visible\n pair.successStates.forEach(state => {\n gsap.set(state, { opacity: 1 })\n })\n\n // Error path hidden\n if (pair.errorPath) {\n gsap.set(pair.errorPath, { opacity: 0 })\n }\n\n // Error connector hidden\n if (pair.errorConnector) {\n gsap.set(pair.errorConnector, { opacity: 0 })\n }\n\n // Error states hidden\n pair.errorStates.forEach(state => {\n gsap.set(state, { opacity: 0 })\n })\n })\n }, \"-=0.2\") // Add after step 4 completes\n\n\n // 5. Smooth slide + blur transition from title-1 to title-2\n if (title1 && title2) {\n tl.to(title1, {\n y: -40,\n opacity: 0,\n filter: \"blur(10px)\",\n duration: 0.3,\n ease: \"sine.inOut\",\n })\n .to(title2, {\n y: 0,\n opacity: 1,\n filter: \"blur(0px)\",\n duration: 0.3,\n ease: \"sine.inOut\",\n }, \"-=0.1\") // Starts with 0.2 delay overlap\n }\n\n // ===== INITIALIZE ALL PAIRS TO SUCCESS STATE BEFORE WAVES START =====\n tl.addLabel(\"beforeWaves\")\n\n tl.add(() => {\n console.log(\"\uD83C\uDFAC Initializing all pairs to SUCCESS state\")\n shuffledPairs.forEach(pair => {\n gsap.set(pair.path, { opacity: 1 })\n if (pair.errorPath) gsap.set(pair.errorPath, { opacity: 0 })\n if (pair.errorConnector) gsap.set(pair.errorConnector, { opacity: 0 })\n pair.successStates.forEach(state => gsap.set(state, { opacity: 1 }))\n pair.errorStates.forEach(state => gsap.set(state, { opacity: 0 }))\n })\n }, \"beforeWaves\")\n\n // 6. Create cycling failure/success waves with predefined patterns\n tl.addLabel(\"step6Start\", \"+=0.2\")\n\n const pairsWithErrors = shuffledPairs.filter(p => p.errorConnector && p.errorPath)\n\n if (pairsWithErrors.length === 0) {\n console.warn(\"WARNING: No pairs with error states found\")\n } else {\n console.log(`\u2713 Found ${pairsWithErrors.length} pairs with error states`)\n }\n\n // Define which entities fail in each wave by their IDs\n const failurePatterns = [\n ['content', 'inventory'], // Wave 1\n ['products', 'delivery'], // Wave 2\n ['returns', 'promises'] // Wave 3\n ]\n\n // Helper function to animate failure - FIXED with smooth connector animation\n const animateFailure = (pair: typeof pairsWithErrors[0]): void => {\n if (!pair || !pair.path) return\n\n // Fade out success path\n gsap.to(pair.path, {\n opacity: 0,\n duration: 0.3,\n ease: \"power3.in\",\n })\n\n // Fade in error path\n if (pair.errorPath) {\n gsap.to(pair.errorPath, {\n opacity: 1,\n duration: 0.3,\n ease: \"power3.out\",\n })\n }\n\n // FIXED: Use gsap.to() for smooth connector animation (not gsap.set())\n if (pair.errorConnector) {\n gsap.to(pair.errorConnector, {\n opacity: 1,\n duration: 0.15,\n ease: \"power3.out\",\n })\n }\n\n // Fade out success states\n if (pair.successStates && pair.successStates.length > 0) {\n gsap.to(pair.successStates, {\n opacity: 0,\n duration: 0.3,\n ease: \"power3.in\",\n })\n }\n\n // Fade in error states\n if (pair.errorStates && pair.errorStates.length > 0) {\n gsap.to(pair.errorStates, {\n opacity: 1,\n duration: 0.3,\n ease: \"power3.out\",\n })\n }\n }\n\n // Helper function to animate success - FIXED with smooth connector animation\n const animateSuccess = (pair: typeof pairsWithErrors[0]): void => {\n if (!pair || !pair.path) return\n\n // Fade out error path\n if (pair.errorPath) {\n gsap.to(pair.errorPath, {\n opacity: 0,\n duration: 0.3,\n ease: \"power3.in\",\n })\n }\n\n // FIXED: Use gsap.to() for smooth connector animation (not gsap.set())\n if (pair.errorConnector) {\n gsap.to(pair.errorConnector, {\n opacity: 0,\n duration: 0.15,\n ease: \"power3.in\",\n })\n }\n\n // Fade in success path\n gsap.to(pair.path, {\n opacity: 1,\n duration: 0.3,\n ease: \"power3.out\",\n })\n\n // Fade out error states\n if (pair.errorStates && pair.errorStates.length > 0) {\n gsap.to(pair.errorStates, {\n opacity: 0,\n duration: 0.3,\n ease: \"power3.in\",\n })\n }\n\n // Fade in success states\n if (pair.successStates && pair.successStates.length > 0) {\n gsap.to(pair.successStates, {\n opacity: 1,\n duration: 0.3,\n ease: \"power3.out\",\n })\n }\n }\n\n // Create waves - EACH WAVE ON SEPARATE SCROLL\n if (pairsWithErrors.length > 0) {\n // WAVE 1 - Trigger at step6Start\n tl.addLabel(\"wave1Start\", \"step6Start\")\n tl.add(() => {\n console.log(`\uD83C\uDF0A Wave 1 triggered!`)\n const failureIds = failurePatterns[0]\n const toFail = pairsWithErrors.filter(p => failureIds.includes(p.id.toLowerCase()))\n const toSucceed = pairsWithErrors.filter(p => !failureIds.includes(p.id.toLowerCase()))\n console.log(` Failing: ${toFail.map(p => p.id).join(', ')}`)\n console.log(` Succeeding: ${toSucceed.map(p => p.id).join(', ')}`)\n toFail.forEach(pair => animateFailure(pair))\n toSucceed.forEach(pair => animateSuccess(pair))\n }, \"wave1Start\")\n\n // Add spacing for next wave\n tl.to({}, { duration: 0.5 }, \"wave1Start\")\n\n // WAVE 2 - Trigger on next scroll\n tl.addLabel(\"wave2Start\", \"+=0.2\")\n tl.add(() => {\n console.log(`\uD83C\uDF0A Wave 2 triggered!`)\n const failureIds = failurePatterns[1]\n const toFail = pairsWithErrors.filter(p => failureIds.includes(p.id.toLowerCase()))\n const toSucceed = pairsWithErrors.filter(p => !failureIds.includes(p.id.toLowerCase()))\n console.log(` Failing: ${toFail.map(p => p.id).join(', ')}`)\n console.log(` Succeeding: ${toSucceed.map(p => p.id).join(', ')}`)\n toFail.forEach(pair => animateFailure(pair))\n toSucceed.forEach(pair => animateSuccess(pair))\n }, \"wave2Start\")\n\n // Add spacing for next wave\n tl.to({}, { duration: 0.5 }, \"wave2Start\")\n\n // WAVE 3 - Trigger on next scroll\n tl.addLabel(\"wave3Start\", \"+=0.2\")\n tl.add(() => {\n console.log(`\uD83C\uDF0A Wave 3 triggered!`)\n const failureIds = failurePatterns[2]\n const toFail = pairsWithErrors.filter(p => failureIds.includes(p.id.toLowerCase()))\n const toSucceed = pairsWithErrors.filter(p => !failureIds.includes(p.id.toLowerCase()))\n console.log(` Failing: ${toFail.map(p => p.id).join(', ')}`)\n console.log(` Succeeding: ${toSucceed.map(p => p.id).join(', ')}`)\n toFail.forEach(pair => animateFailure(pair))\n toSucceed.forEach(pair => animateSuccess(pair))\n }, \"wave3Start\")\n\n // Add spacing before final animations\n tl.to({}, { duration: 0.5 }, \"wave3Start\")\n\n // AFTER ALL WAVES - Make all success\n tl.addLabel(\"afterWaves\", \"+=0.2\")\n tl.add(() => {\n console.log(\"\u2705 All waves complete! Making all pairs SUCCESS\")\n pairsWithErrors.forEach(pair => {\n animateSuccess(pair)\n })\n }, \"afterWaves\")\n\n // Title transition along with Wave 3 - BOTH HAPPEN TOGETHER\n if (title2 && title3) {\n tl.to(title2, {\n y: -40,\n opacity: 0,\n filter: \"blur(10px)\",\n duration: 0.3,\n ease: \"sine.inOut\",\n }, \"wave3Start\")\n .to(title3, {\n y: 0,\n opacity: 1,\n filter: \"blur(0px)\",\n duration: 0.3,\n ease: \"sine.inOut\",\n }, \"wave3Start\")\n }\n }\n\n // ===== FINAL ANIMATIONS (Steps 7-9) =====\n\n // 7. Fade out all success states together\n const allSuccessStatesStep7 = pairsWithErrors.flatMap(p => p.successStates)\n\n if (allSuccessStatesStep7.length > 0) {\n tl.to(allSuccessStatesStep7, {\n opacity: 0,\n duration: 0.1,\n ease: \"power3.in\",\n }, \"afterWaves+=0.2\")\n }\n\n if (allNames.length > 0) {\n tl.to(allNames, {\n opacity: 0,\n scale: 0.3,\n duration: 0.1,\n ease: \"power3.in\",\n }, \"<\")\n }\n\n if (allPaths.length > 0) {\n tl.to(allPaths, {\n strokeDashoffset: (index: number) => {\n if (allPaths[index]) {\n try {\n return allPaths[index].getTotalLength()\n } catch (e) {\n return 0\n }\n }\n return 0\n },\n duration: 0.3,\n ease: \"power3.in\",\n }, \"-=0.05\")\n }\n\n // 8. Scale down store and foundationBase to 0\n if (store && foundationBase) {\n tl.to([store, foundationBase], {\n scale: 0,\n x: \"140px\",\n y: \"-20px\",\n opacity: 0,\n duration: 0.1,\n ease: \"power3.in\",\n })\n }\n\n if (title3) {\n tl.to(title3, {\n opacity: 0,\n filter: \"blur(5px)\",\n duration: 0.1,\n ease: \"power3.in\",\n }, \"<\")\n }\n\n if (storeFoundation) {\n tl.to(storeFoundation, {\n ...getBreakpointValues('storeFoundation'),\n opacity: 1,\n duration: 0.2,\n ease: \"power3.in\",\n }, \"<\")\n }\n\n if (grid) {\n tl.to(grid, {\n ...getBreakpointValues('grid'),\n duration: 0.3,\n ease: \"power3.out\",\n }, \"<\")\n }\n\n // Then replace the scroll timeline counter animations with this:\n if (counter) {\n tl.to(counter, {\n opacity: 1,\n filter: \"blur(0px)\",\n duration: 0.3,\n ease: \"power3.out\",\n onStart: startCounterAnimation // \u2190 Triggers independent animation\n }, \"-=0.1\")\n\n tl.to(counter, {\n opacity: 0,\n filter: \"blur(10px)\",\n scale: 1,\n delay: 0.5,\n duration: 0.2,\n ease: \"power3.in\",\n })\n }\n\n if (question) {\n tl.to(question, {\n opacity: 1,\n filter: \"blur(0px)\",\n duration: 0.2,\n scale: 1.2,\n ease: \"power3.out\",\n })\n }\n\n if (button) {\n tl.to(button, {\n scale: 1.01,\n duration: 1,\n ease: \"power3.out\",\n }, \"-=0.2\")\n }\n\n ScrollTrigger.refresh()\n console.log(\"\u2713 Animation timeline complete!\")\n\n // Add this after the animation timeline is complete\n window.addEventListener('resize', () => {\n ScrollTrigger.refresh()\n })\n\n});"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[entity-state=error],[entity-state=success],[entity-error-connector]{opacity:0}[entity-success-connector]{opacity:1}[connector-wrapper]{opacity:0}#scroll{height:100vh;width:100vw;overflow:hidden}.pin-spacer{overflow:hidden}[entity-error-connector],[entity-success-connector],[entity-name],[playbook=foundation-base]{opacity:0}[playbook=counter],[playbook=question]{opacity:0;pointer-events:none}[inner-shadow]{background-color:#3c3b3b;color:transparent;-webkit-background-clip:text;background-clip:text;text-shadow:0px 2px 3px rgba(255,255,255,.5);max-width:500px}[playbook-title]{font-size:3rem;font-family:var(--Primary);line-height:110%;letter-spacing:-.03em}@media (min-width: 992px) and (max-height: 713px){[playbook-title]{font-size:2.5rem;max-width:415px}}@media (max-width: 1199px){[playbook-main-title]{height:60px;font-size:70px}}
|
|
1
|
+
[entity-state=error],[entity-state=success],[entity-error-connector]{opacity:0}[entity-success-connector]{opacity:1}[connector-wrapper]{opacity:0}#scroll{height:100vh;width:100vw;overflow:hidden}.pin-spacer{overflow:hidden}[entity-error-connector],[entity-success-connector],[entity-name],[playbook=foundation-base]{opacity:0}[playbook=counter],[playbook=question]{opacity:0;pointer-events:none}[inner-shadow]{background-color:#3c3b3b;color:transparent;-webkit-background-clip:text;background-clip:text;text-shadow:0px 2px 3px rgba(255,255,255,.5);max-width:500px}[playbook-title]{font-size:3rem;font-family:var(--Primary);line-height:110%;letter-spacing:-.03em}@media (min-width: 992px) and (max-height: 713px){[playbook-title]{font-size:2.5rem;max-width:415px}}@media (max-width: 1199px){[playbook-main-title]{height:60px;font-size:70px}}[entity-error-connector] svg path{stroke-dasharray:4 8;animation:dashMove 1s linear infinite}@keyframes dashMove{to{stroke-dashoffset:-12}}[entity-success-connector] svg .comet-glow{animation:cometMove 2.5s linear infinite;filter:blur(4px);opacity:.7}[entity-success-connector] svg .comet{animation:cometMove 2.5s linear infinite;filter:blur(1px)}@keyframes cometMove{0%{stroke-dashoffset:0}to{stroke-dashoffset:-420}}@media (min-width: 481px) and (max-width: 768px){[inner-shadow]{max-width:450px}}@media (max-width: 480px){[inner-shadow]{max-width:244px}[playbook-title]{font-size:2.3rem}}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/playbook-2026/styles.css"],
|
|
4
|
-
"sourcesContent": ["[entity-state=\"error\"] {\n opacity: 0;\n}\n\n[entity-state=\"success\"] {\n opacity: 0;\n}\n\n[entity-error-connector] {\n opacity: 0;\n}\n\n[entity-success-connector] {\n opacity: 1;\n}\n\n[connector-wrapper] {\n opacity: 0;\n}\n\n#scroll {\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n}\n\n.pin-spacer {\n overflow: hidden;\n}\n\n/* #scroll {\n position: relative;\n}\n\n.playbook_sticky-block {\n position: sticky;\n top: 0;\n} */\n\n[entity-error-connector] {\n opacity: 0;\n}\n\n[entity-success-connector] {\n opacity: 0;\n}\n\n[entity-name] {\n opacity: 0;\n}\n\n[playbook='foundation-base'] {\n opacity: 0;\n}\n\n[playbook=\"counter\"] {\n opacity: 0;\n pointer-events: none;\n /* padding-top: 35vh; */\n /* top: -80px; */\n}\n\n[playbook=\"question\"] {\n opacity: 0;\n pointer-events: none;\n /* padding-top: 35vh; */\n /* top: 0px; */\n}\n\n/* [inner-shadow]::after {\n background-color: #818181;\n color: transparent;\n text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);\n -webkit-background-clip: text;\n -moz-background-clip: text;\n background-clip: text;\n} */\n\n[inner-shadow] {\n background-color: #3c3b3b;\n color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.5);\n max-width: 500px;\n}\n\n[playbook-title] {\n font-size: 3rem;\n font-family: var(--Primary);\n line-height: 110%;\n letter-spacing: -0.03em;\n}\n\n@media (min-width: 992px) and (max-height: 713px) {\n [playbook-title] {\n font-size: 2.5rem;\n max-width: 415px;\n }\n}\n\n@media (max-width: 1199px) {\n [playbook-main-title] {\n height: 60px;\n font-size: 70px;\n }\n}"],
|
|
5
|
-
"mappings": ";AAAA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,UAAQ;AACR,SAAO;AACP,YAAU;AACd;AAEA,CAAC;AACG,YAAU;AACd;AAWA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACT,kBAAgB;AAGpB;AAEA,CAAC;AACG,WAAS;AACT,kBAAgB;AAGpB;AAWA,CAAC;AACG,oBAAkB;AAClB,SAAO;AACP,2BAAyB;AACzB,mBAAiB;AACjB,eAAa,IAAI,IAAI,IAAI,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC7C,aAAW;AACf;AAEA,CAAC;AACG,aAAW;AACX,eAAa,IAAI;AACjB,eAAa;AACb,kBAAgB;AACpB;AAEA,OAAO,CAAC,SAAS,EAAE,OAAO,IAAI,CAAC,UAAU,EAAE;AACvC,GAAC;AACG,eAAW;AACX,eAAW;AACf;AACJ;AAEA,OAAO,CAAC,SAAS,EAAE;AACf,GAAC;AACG,YAAQ;AACR,eAAW;AACf;AACJ;",
|
|
4
|
+
"sourcesContent": ["[entity-state=\"error\"] {\n opacity: 0;\n}\n\n[entity-state=\"success\"] {\n opacity: 0;\n}\n\n[entity-error-connector] {\n opacity: 0;\n}\n\n[entity-success-connector] {\n opacity: 1;\n}\n\n[connector-wrapper] {\n opacity: 0;\n}\n\n#scroll {\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n}\n\n.pin-spacer {\n overflow: hidden;\n}\n\n/* #scroll {\n position: relative;\n}\n\n.playbook_sticky-block {\n position: sticky;\n top: 0;\n} */\n\n[entity-error-connector] {\n opacity: 0;\n}\n\n[entity-success-connector] {\n opacity: 0;\n}\n\n[entity-name] {\n opacity: 0;\n}\n\n[playbook='foundation-base'] {\n opacity: 0;\n}\n\n[playbook=\"counter\"] {\n opacity: 0;\n pointer-events: none;\n /* padding-top: 35vh; */\n /* top: -80px; */\n}\n\n[playbook=\"question\"] {\n opacity: 0;\n pointer-events: none;\n /* padding-top: 35vh; */\n /* top: 0px; */\n}\n\n/* [inner-shadow]::after {\n background-color: #818181;\n color: transparent;\n text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);\n -webkit-background-clip: text;\n -moz-background-clip: text;\n background-clip: text;\n} */\n\n[inner-shadow] {\n background-color: #3c3b3b;\n color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.5);\n max-width: 500px;\n}\n\n[playbook-title] {\n font-size: 3rem;\n font-family: var(--Primary);\n line-height: 110%;\n letter-spacing: -0.03em;\n}\n\n@media (min-width: 992px) and (max-height: 713px) {\n [playbook-title] {\n font-size: 2.5rem;\n max-width: 415px;\n }\n}\n\n@media (max-width: 1199px) {\n [playbook-main-title] {\n height: 60px;\n font-size: 70px;\n }\n}\n\n[entity-error-connector] svg path {\n stroke-dasharray: 4 8;\n animation: dashMove 1s linear infinite;\n}\n\n@keyframes dashMove {\n to {\n stroke-dashoffset: -12;\n }\n}\n\n/* Glow effect - subtle blur behind */\n[entity-success-connector] svg .comet-glow {\n animation: cometMove 2.5s linear infinite;\n filter: blur(4px);\n opacity: 0.7;\n}\n\n/* Main comet */\n[entity-success-connector] svg .comet {\n animation: cometMove 2.5s linear infinite;\n filter: blur(1px);\n}\n\n@keyframes cometMove {\n from {\n stroke-dashoffset: 0;\n }\n\n to {\n stroke-dashoffset: -420;\n }\n}\n\n/* Tablet range: 481px to 768px */\n@media (min-width: 481px) and (max-width: 768px) {\n [inner-shadow] {\n max-width: 450px;\n }\n}\n\n/* Mobile: 480px and below */\n@media (max-width: 480px) {\n [inner-shadow] {\n max-width: 244px;\n }\n\n [playbook-title] {\n font-size: 2rem;\n }\n}"],
|
|
5
|
+
"mappings": ";AAAA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,UAAQ;AACR,SAAO;AACP,YAAU;AACd;AAEA,CAAC;AACG,YAAU;AACd;AAWA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACb;AAEA,CAAC;AACG,WAAS;AACT,kBAAgB;AAGpB;AAEA,CAAC;AACG,WAAS;AACT,kBAAgB;AAGpB;AAWA,CAAC;AACG,oBAAkB;AAClB,SAAO;AACP,2BAAyB;AACzB,mBAAiB;AACjB,eAAa,IAAI,IAAI,IAAI,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC7C,aAAW;AACf;AAEA,CAAC;AACG,aAAW;AACX,eAAa,IAAI;AACjB,eAAa;AACb,kBAAgB;AACpB;AAEA,OAAO,CAAC,SAAS,EAAE,OAAO,IAAI,CAAC,UAAU,EAAE;AACvC,GAAC;AACG,eAAW;AACX,eAAW;AACf;AACJ;AAEA,OAAO,CAAC,SAAS,EAAE;AACf,GAAC;AACG,YAAQ;AACR,eAAW;AACf;AACJ;AAEA,CAAC,wBAAwB,IAAI;AACzB,oBAAkB,EAAE;AACpB,aAAW,SAAS,GAAG,OAAO;AAClC;AAEA,WAHe;AAIX;AACI,uBAAmB;AACvB;AACJ;AAGA,CAAC,0BAA0B,IAAI,CAAC;AAC5B,aAAW,UAAU,KAAK,OAAO;AACjC,UAAQ,KAAK;AACb,WAAS;AACb;AAGA,CAAC,0BAA0B,IAAI,CAAC;AAC5B,aAAW,UAAU,KAAK,OAAO;AACjC,UAAQ,KAAK;AACjB;AAEA,WAXe;AAYX;AACI,uBAAmB;AACvB;AAEA;AACI,uBAAmB;AACvB;AACJ;AAGA,OAAO,CAAC,SAAS,EAAE,OAAO,IAAI,CAAC,SAAS,EAAE;AACtC,GAAC;AACG,eAAW;AACf;AACJ;AAGA,OAAO,CAAC,SAAS,EAAE;AACf,GAAC;AACG,eAAW;AACf;AAEA,GAAC;AACG,eAAW;AACf;AACJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED