gclass-anims 1.0.0-beta.17 → 1.0.0-beta.19

package/AnimToggle.js

@@ -147,18 +147,29 @@ export function initAnimations() {
   if (bootCleanup) { bootCleanup(); bootCleanup = null }
   if (bootStyle) { bootStyle.remove(); bootStyle = null; document.documentElement.classList.remove('gclass-booting') }
 
-  const bootEls = typeof document !== 'undefined' ? document.querySelectorAll(".boot-up") : []
+  const hideBootEls = (els) => {
+    // React-safe: don't el.remove() - React owns the nodes and will throw
+    // insertBefore/removeChild on next commit if we mutate outside React.
+    // Hiding keeps React's tree intact but visually removes boot screen.
+    els.forEach(el => {
+      el.style.display = 'none'
+      el.setAttribute('hidden', '')
+      el.setAttribute('data-gclass-boot-hidden', '1')
+    })
+  }
+
+  const bootEls = typeof document !== 'undefined' ? [...document.querySelectorAll(".boot-up")].filter(el => !el.hasAttribute('data-gclass-boot-hidden')) : []
   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())
+    hideBootEls(bootEls)
     hasBooted = true
     // fall through to normal initListeners without pausing DOM
   } else if (hasBooted && !bootTimeout) {
     // path change after already booted (SPA navigation) - skip boot, hard reload resets hasBooted
     console.log(`[initAnimations] skipping boot on path change (already booted)`, bootEls)
-    bootEls.forEach(el => el.remove())
+    hideBootEls(bootEls)
     hasBooted = true
     // fall through
   } else {
@@ -188,11 +199,11 @@ export function initAnimations() {
     bootTimeout = setTimeout(() => {
       const bootEndCls = [...bootEl.classList].find(c => c.startsWith('boot-end-'))
       if (!bootEndCls) {
-        // no boot-end -> skip exit animation, just remove
+        // no boot-end -> skip exit animation, just hide
         bootCleanup?.(); bootCleanup = null
         document.documentElement.classList.remove('gclass-booting')
         bootStyle?.remove(); bootStyle = null
-        bootEls.forEach(el => el.remove())
+        hideBootEls(bootEls)
         bootTimeout = null
         cleanup = initListeners()
         return
@@ -211,7 +222,7 @@ export function initAnimations() {
         bootCleanup?.(); bootCleanup = null
         document.documentElement.classList.remove('gclass-booting')
         bootStyle?.remove(); bootStyle = null
-        bootEls.forEach(el => el.remove())
+        hideBootEls(bootEls)
         bootTimeout = null
         cleanup = initListeners()
       }

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to `gclass-anims` will be documented in this file.
 
+## [1.0.0-beta.19] - 2026-9-1
+- Fixed the SplitText animations formatting and removed Boot.js
+
+## [1.0.0-beta.18] - 2026-9-1
+- Hopefully finally fixed `.boot-up` properly skipping on path changes
+
 ## [1.0.0-beta.17] - 2026-9-1
 - Fixed the `.boot-up` class firing on every path change
 

package/Listeners.js

@@ -484,10 +484,7 @@ export default function initListeners(root = document) {
         // 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) => {
-            // 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, {
+        const getRTLCharSplit = (el) => new SplitText(el, {
             type: "words",
             linesClass: "gsap-line",
             wordsClass: "gsap-word",
@@ -570,7 +567,6 @@ export default function initListeners(root = document) {
                 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-
@@ -611,22 +607,39 @@ export default function initListeners(root = document) {
         }
 
         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
             if (!s || s.granularity !== key) {
                 if (s) revertSplitInstance(s)
+                const hasN = el.textContent.includes('\n')
+                // only set pre-wrap if element actually contains a newline, so \n renders without breaking other SplitText (flex/lines)
+                if (hasN && el.style) el.style.whiteSpace = 'pre-wrap'
                 s = rtlChars
                     ? getRTLCharSplit(el)
                     : new SplitText(el, {
                         type: gran,
-                        tag: "span",
-                        reduceWhiteSpace: false,
-                        
+                        reduceWhiteSpace: hasN ? false : undefined,
                         linesClass: "gsap-line",
                         wordsClass: "gsap-word",
                         charsClass: "gsap-char",
+                        onSplit(self) {
+                            // make \n actually break line DURING split (not just after revert)
+                            for (const c of self.chars || []) {
+                                if (c.textContent === '\n') {
+                                    c.textContent = ''
+                                    c.style.display = 'block'
+                                    c.style.width = '100%'
+                                    c.style.height = '0'
+                                }
+                            }
+                            // also handle words split where \n is between words
+                            for (const w of self.words || []) {
+                                if (w.textContent.includes('\n')) {
+                                    w.style.whiteSpace = 'pre-wrap'
+                                }
+                            }
+                        }
                     })
                 s._gcFlexUnwrap = wrapFlexTarget(el)
                 s.granularity = key
@@ -642,8 +655,10 @@ export default function initListeners(root = document) {
             // does this automatically for animated elements; Firefox is
             // conservative and otherwise repaints these inline-block parts on the
             // main thread every frame, which is what makes split-text lag there.
+            // A: keep inline flow so <strong> etc stays inline during split
             for (let i = 0; i < parts.length; i++) {
                 parts[i].style.willChange = "transform, opacity"
+                if (gran === "chars" || gran === "words") parts[i].style.display = "inline-block"
             }
             return parts
         }

package/index.d.ts

@@ -27,8 +27,9 @@ export function registerComplete(name: string, fn: CompleteHandler): CompleteHan
 /**
  * Boot the engine directly, bypassing AnimToggle. Returns a teardown function
  * that removes all listeners/observers/tweens created by this run.
+ * Pass a root to scope to that subtree (used for .boot-up).
  */
-export default function initListeners(): () => void
+export default function initListeners(root?: Document | HTMLElement): () => void
 
 // --- onComplete config -----------------------------------------------------
 
@@ -123,6 +124,7 @@ export interface Defaults {
   minTextPartDuration: number
   revealDelay: number
   characterlist: string
+  bootTime: number
 }
 
 /** Global timing / ease defaults (edit to tweak global behaviour). */
@@ -221,6 +223,3 @@ export function marquee(target: TweenTarget, dir: string, duration: number, xOff
 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 default function Boot()
-

package/index.js

@@ -2,5 +2,4 @@ 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.17",
+  "version": "1.0.0-beta.19",
   "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,7 +21,6 @@
     "Animations.js",
     "Config.js",
     "CustomAnims.js",
-    "Boot.js",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"

package/Boot.js

@@ -1,12 +0,0 @@
-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