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

package/AnimToggle.js

@@ -1,10 +1,12 @@
   import initListeners from './Listeners'
+  import { defaults, animations } from './Config.js'
+  import gsap from 'gsap'
 
 // 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)')
@@ -111,12 +113,106 @@ export function disableReducedMotion() {
 }
 
 let cleanup = null
+let bootCleanup = null
+let bootTimeout = null
+let bootStyle = null
+
+const readBootTime = (els, fallback) => {
+  let max = null
+  for (const el of els) {
+    const cls = [...el.classList].find(c => c.startsWith('boot-time-'))
+    if (cls) {
+      const n = Number(cls.slice('boot-time-'.length))
+      if (!Number.isNaN(n)) max = max === null ? n : Math.max(max, n)
+    }
+  }
+  return max ?? fallback
+}
 
 // Boots the GSAP animation system unless animations are disabled (stored "off"
 // or reduced-motion fallback with no explicit choice). Idempotent: calling it
 // again tears down any previous run first.
+// Now also handles boot screen: any HTML/JSX with `.boot-up` anywhere is treated as the boot overlay.
+// No separate initBoot needed - just call initAnimations().
+// Boot stops all DOM rendering for defaults.bootTime (overwritten by boot-time-N class).
 export function initAnimations() {
   if (typeof window === 'undefined' || !getEnabled()) return
-  if (cleanup) cleanup()
+  if (cleanup) { cleanup(); cleanup = null }
+  if (bootCleanup) { bootCleanup(); bootCleanup = null }
+  if (bootTimeout) { clearTimeout(bootTimeout); bootTimeout = null }
+  if (bootStyle) { bootStyle.remove(); bootStyle = null; document.documentElement.classList.remove('gclass-booting') }
+
+  const bootEls = typeof document !== 'undefined' ? document.querySelectorAll(".boot-up") : []
+  if (!bootEls.length) {
+    // no .boot-up -> completely skip boot
+  } else if (bootEls.length > 1) {
+    console.error(`[initAnimations] Multiple .boot-up elements detected (${bootEls.length}) - skipping all boot animations`, bootEls)
+    bootEls.forEach(el => el.remove())
+    // fall through to normal initListeners without pausing DOM
+  } else {
+    const bootEl = bootEls[0]
+    const hasBootEnd = [...bootEl.classList].some(c => c.startsWith('boot-end-'))
+    if (!hasBootEnd) {
+      // no boot-end-* -> completely skip boot animation (still pause? spec says skip it)
+      // spec: skip boot-end animation if no class, but still do boot pause? user said "completely skip it if no .boot-end-<name> class is present"
+      // interpret as skip the exit animation only, still pause for bootTime
+      // To match "completely skip it" for boot-end, we just don't play exit tween
+    }
+    const bootTime = readBootTime(bootEls, defaults.bootTime ?? 2)
+    console.log(`[initAnimations] .boot-up found: ${bootEls.length} - pausing DOM for ${bootTime}s`, bootEls)
+    // stop all DOM rendering except .boot-up
+    bootStyle = document.createElement('style')
+    bootStyle.id = 'gclass-boot-style'
+    bootStyle.textContent = `html.gclass-booting{visibility:hidden} html.gclass-booting .boot-up,html.gclass-booting .boot-up *{visibility:visible} html.gclass-booting .boot-up{position:fixed;inset:0;z-index:9999;display:grid;place-items:center}`
+    document.head.appendChild(bootStyle)
+    document.documentElement.classList.add('gclass-booting')
+    // ensure boot els are visible even if nested inside hidden ancestors
+    bootEls.forEach(el => { el.style.visibility = 'visible' })
+
+    // animations inside boot screen must play while rest of DOM is hidden - init scoped to boot-up
+    bootCleanup = initListeners(bootEl)
+
+    bootTimeout = setTimeout(() => {
+      const bootEndCls = [...bootEl.classList].find(c => c.startsWith('boot-end-'))
+      if (!bootEndCls) {
+        // no boot-end -> skip exit animation, just remove
+        bootCleanup?.(); bootCleanup = null
+        document.documentElement.classList.remove('gclass-booting')
+        bootStyle?.remove(); bootStyle = null
+        bootEls.forEach(el => el.remove())
+        bootTimeout = null
+        cleanup = initListeners()
+        return
+      }
+      const name = bootEndCls.slice('boot-end-'.length) // e.g. spawn-blur
+      const cfg = animations.find(a => a.sel === '.' + name)
+      const from = cfg?.from
+      const easeCl = [...bootEl.classList].find(c => c.startsWith('ease-'))
+      const ease = easeCl ? easeCl.split('-')[1] : defaults.ease
+      const dur = readBootTime([bootEl], defaults.effectDuration ?? 1) // reuse boot-time- or fallback to effectDuration; if boot-time used for pause, reuse same value for exit unless overridden
+      // Actually use boot-end-time-N if present, else effectDuration
+      const endTimeCls = [...bootEl.classList].find(c => c.startsWith('boot-end-time-'))
+      const endDur = endTimeCls ? Number(endTimeCls.slice('boot-end-time-'.length)) : dur
+
+      const finish = () => {
+        bootCleanup?.(); bootCleanup = null
+        document.documentElement.classList.remove('gclass-booting')
+        bootStyle?.remove(); bootStyle = null
+        bootEls.forEach(el => el.remove())
+        bootTimeout = null
+        cleanup = initListeners()
+      }
+
+      if (!cfg || !from) {
+        console.warn(`[initAnimations] boot-end-${name} has no from state - removing without animation`)
+        finish()
+        return
+      }
+      // play spawn in reverse (visible -> hidden) before removing
+      gsap.to(bootEl, { ...from, duration: endDur, ease, onComplete: finish })
+    }, bootTime * 1000)
+    return
+  }
+
   cleanup = initListeners()
 }

package/Animations.js

@@ -79,7 +79,11 @@ export function expandA (target , delay , dur , ease){
 }
 
 export function typewriter (target , text , dur , delay , ease){
-    return gsap.fromTo(target , {text:""} , {ease:easeOf(ease) , duration:dur , delay:delay , text:text})
+    // Any element using TextPlugin gets pre-wrap so "\n" from VSCode Enter or JS strings
+    // renders as a real line break and any innerHTML formatting is preserved.
+    gsap.utils.toArray(target).forEach(el => { if (el.style) el.style.whiteSpace = "pre-wrap" })
+    const value = String(text).replace(/\n/g, "<br>")
+    return gsap.fromTo(target , {text:""} , {ease:easeOf(ease) , duration:dur , delay:delay , text:{value}})
 }
 
 export function spawnSpinCCW (target , delay , dur , ease){
@@ -587,27 +591,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.js

@@ -0,0 +1,12 @@
+import { initAnimations } from './AnimToggle.js'
+
+export function Boot(){
+  const els = document.querySelectorAll(".boot-up")
+  console.log(`[Boot -> initAnimations] .boot-up count: ${els.length}`, els)
+  // rewired: Boot now just delegates to initAnimations (single entry point)
+  return initAnimations()
+}
+// keep named exports wired so index.js / dev don't break during test
+export const initBoot = Boot
+export const createBootOverlay = Boot
+export default Boot

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to `gclass-anims` will be documented in this file.
 
+## [1.0.0-beta.16] - 2026-09-1
+- Added a new `.boot-up` class for boot up animations
+- Fixed text animations not taking formatting into account
+
+
 ## [1.0.0-beta.13] - 2026-08-27
 - Added a new `.fill-svg` modifier for the `.draw` and `.draw-split` classes that fills the SVG after it has been drawn.
 

package/Config.js

@@ -70,7 +70,8 @@ export const defaults = {
   typewriterSplitCharDuration: 0.05,
   minTextPartDuration: 0.3,
   revealDelay:0,
-  characterlist:"AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz"
+  characterlist:"AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz",
+  bootTime: 5,
 }
 
 export const animations = [

package/Listeners.js

@@ -93,9 +93,21 @@ const invokePlay = (config, el, delay, dur, ease) => {
     }
 }
 
-export default function initListeners() {
+export default function initListeners(root = document) {
     gsap.registerPlugin(TextPlugin, ScrollTrigger, SplitText)
 
+    // helper to scope queries to root (for boot screen: only boot-up subtree animates during boot)
+    const qAll = (sel) => {
+        if (root === document || root === document.documentElement || root === document.body) return gsap.utils.toArray(sel)
+        if (sel === "body *") return gsap.utils.toArray(root.querySelectorAll("*"))
+        try {
+            const els = [...(root.querySelectorAll ? root.querySelectorAll(sel) : [])]
+            if (root.matches?.(sel)) els.unshift(root)
+            // handle comma selectors where root itself may match one part
+            return els
+        } catch { return gsap.utils.toArray(sel) }
+    }
+
     const registeredListeners = []
         const onCompleteTweens = []
         const addListener = (el, type, fn) => {
@@ -358,7 +370,7 @@ export default function initListeners() {
             spawnConfigs.map(({ sel }) => "." + TEXT_PREFIX + sel.slice(1)).join(",")
 
         const getOrderDelay = (el, priority) => {
-            const samepri = gsap.utils.toArray(orderSelector())
+            const samepri = qAll(orderSelector())
                 .filter((e) => {
                     if (!e.classList.contains("order")) return false
                     const match = [...e.classList].find(p => p.startsWith("priority-"))
@@ -472,7 +484,10 @@ export default function initListeners() {
         // would render it in its connecting form instead of its correct END form),
         // but it should still be split into its own span so it animates too.
         const RTL_LETTER = /[\u0621-\u064A\u066E-\u06D5\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/
-        const getRTLCharSplit = (el) => new SplitText(el, {
+        const getRTLCharSplit = (el) => {
+            // Any element using SplitText gets pre-wrap so "\n" and formatting is preserved
+            if (el.style) el.style.whiteSpace = "pre-wrap"
+            return new SplitText(el, {
             type: "words",
             linesClass: "gsap-line",
             wordsClass: "gsap-word",
@@ -555,6 +570,7 @@ export default function initListeners() {
                 self.words.length = 0
             },
         })
+        }
 
         // Flex targets can't be split directly: the split parts would become
         // flex ITEMS, so justify-content/gap would apply per letter, whitespace-
@@ -595,6 +611,7 @@ export default function initListeners() {
         }
 
         const getSplit = (el, gran) => {
+            if (el.style) el.style.whiteSpace = "pre-wrap"
             let s = splitCache.get(el)
             const rtlChars = gran === "chars" && isRTLText(el)
             const key = rtlChars ? "rtl-chars" : gran
@@ -604,6 +621,9 @@ export default function initListeners() {
                     ? getRTLCharSplit(el)
                     : new SplitText(el, {
                         type: gran,
+                        tag: "span",
+                        reduceWhiteSpace: false,
+                        
                         linesClass: "gsap-line",
                         wordsClass: "gsap-word",
                         charsClass: "gsap-char",
@@ -739,7 +759,7 @@ export default function initListeners() {
         // created before any scroll/scroll-progress trigger measures its position.
         // Setting them up here (before the trigger pass below) keeps offsets correct
         // and lets the single ScrollTrigger.refresh() at the end reconcile layout.
-        gsap.utils.toArray(".pin").forEach(setupPin)
+        qAll(".pin").forEach(setupPin)
 
         // Scroll-driven extras - class-driven ScrollTrigger behaviours that don't
         // fit the spawn/loop machinery (no `play`/`build`), handled like `.pin`:
@@ -832,7 +852,7 @@ export default function initListeners() {
                 scrollTriggers.push(t.scrollTrigger)
             }
         }
-        gsap.utils.toArray('[class^="parallax-"],[class*=" parallax-"], .progress-bar, .scroll-fill, .scroll-fade-bg, .scroll-horizontal').forEach(setupScrollDriven)
+        qAll('[class^="parallax-"],[class*=" parallax-"], .progress-bar, .scroll-fill, .scroll-fade-bg, .scroll-horizontal').forEach(setupScrollDriven)
 
         // Scroller resolution: a `.scroll`/`.scroll-progress` element inside a
         // `.scroll-frame` container binds its trigger to THAT box instead of the
@@ -1001,7 +1021,7 @@ export default function initListeners() {
             })
             scrollTriggers.push(st)
         }
-        gsap.utils.toArray(".scroll, .scroll-progress").forEach(setupScroll)
+        qAll(".scroll, .scroll-progress").forEach(setupScroll)
 
         // SplitText scroll variants: `.spawn-text-<spawn>.scroll` plays the per-part
         // tween when the element enters the viewport and reverses on exit.
@@ -1009,7 +1029,7 @@ export default function initListeners() {
             if (isTypewriter || text === false) return
             const tSel = "." + TEXT_PREFIX + sel.slice(1)
 
-            gsap.utils.toArray(tSel + ".scroll:not(.scroll-progress)").forEach((el) => {
+            qAll(tSel + ".scroll:not(.scroll-progress)").forEach((el) => {
                 if (isReduced(el)) return
                 const { delay, duration } = readTiming(el)
                 const ease = getEase(el)
@@ -1034,7 +1054,7 @@ export default function initListeners() {
                 }))
             })
 
-            gsap.utils.toArray(tSel + ".scroll-progress").forEach((el) => {
+            qAll(tSel + ".scroll-progress").forEach((el) => {
                 if (isReduced(el)) return
                 const ease = getEase(el)
                 const parts = getParts(el, getGranularity(el))
@@ -1087,7 +1107,7 @@ export default function initListeners() {
 
         spawnConfigs.forEach((config) => {
             const { sel, typewriter: isTypewriter, typewriterSplit } = config
-            gsap.utils.toArray(sel).forEach((el) => {
+            qAll(sel).forEach((el) => {
                 if (el.classList.contains("scroll") || el.classList.contains("scroll-progress")) return
                 if (isPreserved(el)) return
                 if (isReduced(el)) return
@@ -1122,7 +1142,7 @@ export default function initListeners() {
         spawnConfigs.forEach(({ sel, from, typewriter: isTypewriter, text }) => {
             if (isTypewriter || text === false) return
             const tSel = "." + TEXT_PREFIX + sel.slice(1)
-            gsap.utils.toArray(tSel).forEach((el) => {
+            qAll(tSel).forEach((el) => {
                 if (el.classList.contains("scroll") || el.classList.contains("scroll-progress")) return
                 if (isPreserved(el)) return
                 if (isReduced(el)) return
@@ -1487,7 +1507,7 @@ export default function initListeners() {
 
         // Bind click + loop animations to every element present at load, tagging
         // them so the MutationObserver below never double-binds a dynamic one.
-        gsap.utils.toArray("body *").forEach((el) => {
+        qAll("body *").forEach((el) => {
             if (el.dataset?.gsapSetup) return
             el.dataset.gsapSetup = "1"
             setupClicks(el)
@@ -1608,7 +1628,7 @@ export default function initListeners() {
         appearObserver.observe(document.body, { childList: true, subtree: true })
 
         // Capture any .leave elements already present so they can exit later
-        gsap.utils.toArray(".leave").forEach(captureLeave)
+        qAll(".leave").forEach(captureLeave)
 
         const leaveObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
@@ -1625,7 +1645,7 @@ export default function initListeners() {
             if (positionTick) return
             positionTick = true
             requestAnimationFrame(() => {
-                gsap.utils.toArray(".leave").forEach((el) => {
+                qAll(".leave").forEach((el) => {
                     const s = leaveStates.get(el)
                     if (s) s.rect = el.getBoundingClientRect()
                 })
@@ -1666,7 +1686,7 @@ export default function initListeners() {
         // so dynamically-added .appear elements can animate under the new
         // engine run. data-gsap-preserved (cross-reset memory) and
         // data-gsap-ghost (detached .leave clones) are intentionally KEPT.
-        gsap.utils.toArray('[data-gsap-scroll],[data-gsap-setup],[data-gsap-pinned],[data-gsap-scroll-driven]').forEach((el) => {
+        qAll('[data-gsap-scroll],[data-gsap-setup],[data-gsap-pinned],[data-gsap-scroll-driven]').forEach((el) => {
             delete el.dataset.gsapScroll
             delete el.dataset.gsapSetup
             delete el.dataset.gsapPinned
@@ -1681,7 +1701,7 @@ export default function initListeners() {
         document.querySelectorAll('[data-gsap-radiate]').forEach((n) => n.remove())
         cssTweens.forEach((t) => t?.kill())
         cssTweens.length = 0
-        gsap.utils.toArray(".typewriter, .scramble").forEach(el => {
+        qAll(".typewriter, .scramble").forEach(el => {
             // Preserved-region typewriters/scrambles stay as-is (already at
             // their end state); finalize the rest so a mid-type/mid-scramble
             // kill can't strand partial or garbled text where the next run's

package/index.d.ts

@@ -219,4 +219,8 @@ 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
+
+
+export default function Boot()
+

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 { Boot } 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.16",
   "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,7 @@
     "Animations.js",
     "Config.js",
     "CustomAnims.js",
+    "Boot.js",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"