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

package/AnimToggle.js

@@ -116,6 +116,7 @@ let cleanup = null
 let bootCleanup = null
 let bootTimeout = null
 let bootStyle = null
+let hasBooted = false // true after first hard-load boot, skips boot on SPA path changes (remains false until first boot, resets on hard reload)
 
 const readBootTime = (els, fallback) => {
   let max = null
@@ -137,18 +138,40 @@ const readBootTime = (els, fallback) => {
 // Boot stops all DOM rendering for defaults.bootTime (overwritten by boot-time-N class).
 export function initAnimations() {
   if (typeof window === 'undefined' || !getEnabled()) return
+  // boot already in progress (first mount in StrictMode) - ignore second mount
+  if (bootTimeout) {
+    console.log(`[initAnimations] boot already in progress - ignoring duplicate call`)
+    return
+  }
   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") : []
+  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)
+    hideBootEls(bootEls)
+    hasBooted = true
+    // fall through
   } else {
     const bootEl = bootEls[0]
     const hasBootEnd = [...bootEl.classList].some(c => c.startsWith('boot-end-'))
@@ -160,6 +183,7 @@ export function initAnimations() {
     }
     const bootTime = readBootTime(bootEls, defaults.bootTime ?? 2)
     console.log(`[initAnimations] .boot-up found: ${bootEls.length} - pausing DOM for ${bootTime}s`, bootEls)
+    hasBooted = true
     // stop all DOM rendering except .boot-up
     bootStyle = document.createElement('style')
     bootStyle.id = 'gclass-boot-style'
@@ -175,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
@@ -198,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.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
+
 ## [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gclass-anims",
-  "version": "1.0.0-beta.16",
+  "version": "1.0.0-beta.18",
   "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",