gclass-anims 1.0.0-beta.14 → 1.0.0-beta.15

package/AnimToggle.js

@@ -1,10 +1,10 @@
   import initListeners from './Listeners'
 
 // localStorage key controlling whether the GSAP animation system is mounted.
-const STORAGE_KEY = 'funbyte-animations-enabled'
+const STORAGE_KEY = 'gclass-animations-enabled'
 // localStorage key for a forced reduced-motion override (see
 // enableReducedMotion / disableReducedMotion).
-const REDUCED_KEY = 'funbyte-reduced-motion'
+const REDUCED_KEY = 'gclass-reduced-motion'
 
 const reducedMotionQuery = typeof window !== 'undefined'
   ? window.matchMedia('(prefers-reduced-motion: reduce)')

package/Animations.js

@@ -587,27 +587,43 @@ export function radiate (delay , target , amount , dur , ease , zIndex){
         tick = true
         requestAnimationFrame(() => { tick = false; applyRect() })
     }
+    // Don't animate detached targets — return inert tween
+    if (!target.isConnected) {
+        return gsap.fromTo(clone, {}, { duration: 0 })
+    }
     document.body.appendChild(clone)
     applyRect()
     window.addEventListener("scroll", schedule, { passive: true })
     window.addEventListener("resize", schedule, { passive: true })
     // Killing the tween (teardown, hover/click rebuilds) must clean up exactly
     // like natural completion - otherwise clones + listeners leak.
+    let tween = null
     const cleanup = () => {
         clone.remove()
         window.removeEventListener("scroll", schedule)
         window.removeEventListener("resize", schedule)
+        if (observer) observer.disconnect()
     }
+    // If target is removed from DOM (React unmount, .remove(), SPA navigation),
+    // kill the tween and remove the clone — mirrors React useEffect cleanup
+    const observer = new MutationObserver(() => {
+        if (!target.isConnected) {
+            if (tween) tween.kill()
+            cleanup()
+        }
+    })
+    observer.observe(document.body, { childList: true, subtree: true })
 
-    return gsap.fromTo(clone , {scale:1 , opacity:1} , {
+    tween = gsap.fromTo(clone , {scale:1 , opacity:1} , {
         scale:amount / 10 ,
         opacity:0 ,
         duration:dur ,
         delay:delay ,
         ease:easeOf(ease) ,
-        onComplete: cleanup ,
-        onInterrupt: cleanup ,
+        onComplete: () => { observer.disconnect(); cleanup(); },
+        onInterrupt: () => { observer.disconnect(); cleanup(); },
     })
+    return tween
 }
 
 

package/Boot.html

@@ -0,0 +1,18 @@
+<!-- Boot.html — GClass boot overlay template -->
+<!-- 1. Put your boot HTML here. This file is scanned by Tailwind (v4 auto-detects *.html, v3 add "./Boot.html" to content[]) -->
+<!--    so any Tailwind utility + gclass-anims class (e.g. .spawn-*, .time-*) placed here is preserved in the CSS build. -->
+<!-- 2. Boot.js will fetch and inject this file if no #boot-overlay exists in the DOM. -->
+<!-- 3. Keep the outer id="boot-overlay" and .boot-time-N (N=seconds visible) — Boot.js reads it via readBootTime(). -->
+
+<div id="boot-overlay" class="boot-time-2 fixed inset-0 z-[9999] grid place-items-center bg-slate-950" style="position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#020617;">
+  <div class="flex flex-col items-center gap-4 p-8 text-center">
+    <!-- gclass-anims classes work here — Config.js:76 wiring runs inside the overlay -->
+    <h1 class="spawn-up time-1 text-4xl font-bold tracking-tight text-cyan-200 radiate radiate-z-9999 compatibility">GClass</h1>
+    <p class="spawn-fade time-1 text-sm text-slate-400">GSAP utilities</p>
+
+    <!-- Tailwind / other CSS lib classes also work — they are detected because this *.html is in tailwind content -->
+    <div class="mt-2 h-1 w-32 overflow-hidden rounded-full bg-slate-800">
+      
+    </div>
+  </div>
+</div>

package/Boot.js

@@ -0,0 +1,145 @@
+import { initAnimations } from './AnimToggle.js'
+
+// Raw JS boot overlay — framework-agnostic, no React.
+// Shows #boot-overlay once per session, delays main DOM wiring until finished,
+// and keeps Config.js animations usable inside the overlay.
+// Works with any framework (vanilla, React, Vue, Svelte, Next, Nuxt, Angular) and with/without Tailwind.
+
+let hasBooted = false
+const BOOT_KEY = 'gclass-boot-done' // kept for optional persistence, not used for gate
+
+const readBootTime = (el, fallback) => {
+  const cls = [...el.classList].find(c => c.startsWith('boot-time-'))
+  return cls ? Number(cls.slice('boot-time-'.length)) : fallback
+}
+
+export async function initBoot({ enabled = false, time = 2, id = 'boot-overlay', onDone } = {}) {
+  if (typeof window === 'undefined') return () => {}
+  if (!enabled) {
+    initAnimations()
+    return () => {}
+  }
+  if (hasBooted) {
+    initAnimations()
+    return () => {}
+  }
+
+  let overlay = document.getElementById(id)
+  if (!overlay) {
+    const tryFetch = async (url) => {
+      try {
+        const res = await fetch(url)
+        if (res.ok) return await res.text()
+      } catch {}
+      return null
+    }
+    let html = await tryFetch(new URL('./Boot.html', import.meta.url).href)
+    if (!html) html = await tryFetch('/Boot.html')
+    if (!html) html = await tryFetch('./Boot.html')
+    if (html) {
+      const tpl = document.createElement('template')
+      tpl.innerHTML = html.trim()
+      const node = tpl.content.firstElementChild
+      if (node) {
+        document.body.prepend(node)
+        overlay = document.getElementById(id) ?? node
+      }
+    }
+  }
+  if (!overlay) {
+    initAnimations()
+    return () => {}
+  }
+
+  hasBooted = true
+  overlay.style.position = 'fixed'
+  overlay.style.inset = '0'
+  overlay.style.zIndex = '9999'
+  overlay.style.display = 'grid'
+  overlay.style.placeItems = 'center'
+  if (!overlay.style.background && !overlay.style.backgroundColor) {
+    overlay.style.background = '#020617'
+  }
+
+  // Isolate: detach all body content except overlay so first initAnimations() only wires overlay
+  // This works for vanilla <main>, React #root, Vue #app, Next #__next, Nuxt, Svelte, Angular
+  // Listeners.js scans body * regardless of display:none, so must physically detach
+  const toIsolate = [...document.body.children].filter(el => {
+    if (el.id === id) return false
+    if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE' || el.tagName === 'TEMPLATE' || el.tagName === 'LINK') return false
+    if (el.id === 'next-route-announcer' || el.hasAttribute('data-nextjs')) return false
+    return true
+  })
+  const placements = toIsolate.map(el => ({ el, parent: el.parentNode, next: el.nextSibling }))
+  placements.forEach(({ el }) => el.remove())
+  const prevOverflow = document.body.style.overflow
+  document.body.style.overflow = 'hidden'
+
+  initAnimations()
+  placements.forEach(({ parent, next, el }) => {
+    if (!parent || el.isConnected) return
+    if (next && next.isConnected && next.parentNode === parent) {
+      parent.insertBefore(el, next)
+    } else {
+      parent.appendChild(el)
+    }
+  })
+
+  const duration = readBootTime(overlay, time)
+
+  const timer = setTimeout(() => {
+    overlay.style.transition = 'opacity 0.4s ease'
+    overlay.style.opacity = '0'
+    setTimeout(() => {
+      overlay.remove()
+      document.body.style.removeProperty('overflow')
+      if (prevOverflow) document.body.style.overflow = prevOverflow
+      initAnimations()
+      onDone?.()
+    }, 400)
+  }, duration * 1000)
+
+  return () => {
+    clearTimeout(timer)
+    document.body.style.removeProperty('overflow')
+    if (prevOverflow) document.body.style.overflow = prevOverflow
+    placements.forEach(({ el, parent, next }) => {
+      if (!el.isConnected && parent) {
+        if (next && next.isConnected && next.parentNode === parent) parent.insertBefore(el, next)
+        else parent.appendChild(el)
+      }
+    })
+  }
+}
+
+export async function createBootOverlay(html, opts = {}) {
+  if (document.getElementById(opts.id ?? 'boot-overlay')) return initBoot(opts)
+  if (!html) {
+    const tryFetch = async (url) => {
+      try { const r = await fetch(url); if (r.ok) return await r.text() } catch {}
+      return null
+    }
+    html = await tryFetch(new URL('./Boot.html', import.meta.url).href)
+    if (!html) html = await tryFetch('/Boot.html')
+  }
+  const div = document.createElement('div')
+  div.id = opts.id ?? 'boot-overlay'
+  if (!html) {
+    div.className = `boot-time-${opts.time ?? 2}`
+    div.style.cssText = 'position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#020617;'
+    div.innerHTML = '<h1 class="spawn-up time-1">Loading...</h1>'
+  } else {
+    const tpl = document.createElement('template')
+    tpl.innerHTML = html.trim()
+    const node = tpl.content.firstElementChild
+    if (node) {
+      document.body.prepend(node)
+      return initBoot(opts)
+    }
+    div.innerHTML = html
+  }
+  document.body.prepend(div)
+  return initBoot(opts)
+}
+
+export default initBoot

package/index.d.ts

@@ -219,4 +219,16 @@ export function radiate(delay: number, target: TweenTarget, amount: number, dur:
 export function hover(delay: number, target: TweenTarget, amount: number, dur: number, ease: string): any
 export function marquee(target: TweenTarget, dir: string, duration: number, xOffset?: number, yOffset?: number, noRepeat?: boolean): any
 export function flip(state: any, ease: string, dur: number): any
-export function animatecss(target: TweenTarget, dur: number, delay: number, ease: string, propertyS: any, propertySValue: any, propertyE: any, propertyEValue: any): any
+export function animatecss(target: TweenTarget, dur: number, delay: number, ease: string, propertyS: any, propertySValue: any, propertyE: any, propertyEValue: any): any
+// --- Boot ----------------------------------------------------------------
+
+export interface BootOptions {
+  enabled?: boolean
+  time?: number
+  id?: string
+  onDone?: () => void
+}
+export function initBoot(opts?: BootOptions): Promise<() => void>
+export function createBootOverlay(html?: string, opts?: BootOptions): Promise<() => void>
+export default function Boot(opts?: BootOptions): Promise<() => void>
+

package/index.js

@@ -2,4 +2,5 @@ export { initAnimations, toggleAnimations, enableReducedMotion, disableReducedMo
 export { default as initListeners, registerComplete } from './Listeners.js'
 export { customAnims } from './CustomAnims.js'
 export { defaults, animations, normalize } from './Config.js'
+export { default as Boot, initBoot, createBootOverlay } from './Boot.js'
 export * from './Animations.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gclass-anims",
-  "version": "1.0.0-beta.14",
+  "version": "1.0.0-beta.15",
   "description": "A Tailwind-style utility layer on top of GSAP. Framework-agnostic - works in vanilla JS, React, Vue, Svelte, or any bundler.",
   "type": "module",
   "main": "index.js",
@@ -21,6 +21,8 @@
     "Animations.js",
     "Config.js",
     "CustomAnims.js",
+    "Boot.js",
+    "Boot.html",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"