gclass-anims 1.0.0-beta.7 → 1.0.0-beta.8

package/Animations.js

@@ -340,6 +340,9 @@ export function pulse (delay , target , amount , dur , ease){
 
 export function radiate (delay , target , amount , dur , ease , zIndex){
     const clone = target.cloneNode(true)
+    // Tagged so engine teardown can sweep up clones whose tween was killed
+    // before its onComplete (route changes mid-animation).
+    clone.setAttribute("data-gsap-radiate", "1")
     clone.style.cssText = `position:fixed;left:0;top:0;right:auto;bottom:auto;margin:0;pointer-events:none;transform-origin:50% 50%;${zIndex != null ? `z-index:${zIndex};` : ""}`
     // Keep the ripple glued to the target so it tracks scroll/resize instead of
     // getting stranded at the position captured when the animation was built.
@@ -363,6 +366,13 @@ export function radiate (delay , target , amount , dur , ease , zIndex){
     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.
+    const cleanup = () => {
+        clone.remove()
+        window.removeEventListener("scroll", schedule)
+        window.removeEventListener("resize", schedule)
+    }
 
     return gsap.fromTo(clone , {scale:1 , opacity:1} , {
         scale:amount / 10 ,
@@ -370,11 +380,8 @@ export function radiate (delay , target , amount , dur , ease , zIndex){
         duration:dur ,
         delay:delay ,
         ease:easeOf(ease) ,
-        onComplete: () => {
-            clone.remove()
-            window.removeEventListener("scroll", schedule)
-            window.removeEventListener("resize", schedule)
-        } ,
+        onComplete: cleanup ,
+        onInterrupt: cleanup ,
     })
 }
 
@@ -400,28 +407,52 @@ export function marquee (target , dir , duration , xOffset = 0 , yOffset = 0 , n
     // which opens a gap on the trailing edge at some point in the loop.
     target.style.position = "relative"
     target.style.overflow = "hidden"
-    const track = document.createElement("div")
-    track.style.cssText = `position:absolute;top:${yOffset}px;left:${xOffset}px;display:flex;flex-direction:${horizontal ? "row" : "column"};width:max-content;will-change:transform;`
-    while (target.firstChild) track.appendChild(target.firstChild)
-    target.appendChild(track)
-
-    // The track is absolutely positioned, so once its content moves in, the host
-    // has no in-flow children left and can collapse to zero height. With the
-    // `overflow:hidden` set above that clips the track away entirely (e.g. a
-    // bare-text `<h1 class="marquee-left">` disappears). Preserve the content's
-    // height on the host when that happens so the marquee stays visible. Hosts
-    // with their own height (flex cards etc.) are left untouched.
+
+    // Rebuilds over the SAME element (engine restarts, StrictMode remounts)
+    // must reuse the existing track. Re-creating it would swallow the old
+    // absolute track as the first "child", repeat THAT as the tiling unit —
+    // every copy stacks at the same offset and scrollWidth collapses.
+    let track = target._gcTrack
+    if (!track || !track.isConnected) {
+        track = document.createElement("div")
+        track.style.cssText = `position:absolute;top:${yOffset}px;left:${xOffset}px;display:flex;flex-direction:${horizontal ? "row" : "column"};width:max-content;will-change:transform;`
+        while (target.firstChild) track.appendChild(target.firstChild)
+        target.appendChild(track)
+        // Guard against legacy poisoned DOM: older builds could wrap a previous
+        // absolute track inside this one. Unwrap any nested engine tracks so
+        // the stashed unit is always the raw content.
+        while (
+            track.children.length &&
+            [...track.children].every((c) => c.style.position === "absolute" && c.style.display === "flex")
+        ) {
+            const inner = track.firstElementChild
+            while (inner.firstChild) track.insertBefore(inner.firstChild, inner)
+            track.removeChild(inner)
+        }
+        target._gcUnitHtml = track.innerHTML
+    }
+    track.style.flexDirection = horizontal ? "row" : "column"
+    const unitHtml = target._gcUnitHtml
+
+    // Measure ONE unit on its own: the live track may already hold N copies
+    // (or stale content), which would inflate unitSize and starve `copies`.
+    const measurer = document.createElement("div")
+    measurer.style.cssText = track.style.cssText + "visibility:hidden;"
+    measurer.innerHTML = unitHtml
+    target.appendChild(measurer)
+    const unitSize = horizontal ? measurer.scrollWidth : measurer.scrollHeight
+    measurer.remove()
+
+    // Nothing to tile (empty content) — return an inert tween rather than one
+    // dividing by a zero-width unit.
+    if (!unitSize) return gsap.fromTo(track, {}, { duration: 0 })
+
+    // The track is absolutely positioned, so a bare-text host can collapse to
+    // zero height and `overflow:hidden` would clip the strip away entirely.
     if (target.offsetHeight === 0 && track.offsetHeight > 0) {
         target.style.height = track.offsetHeight + "px"
     }
 
-    const first = track.children[0]
-    if (!first) return gsap.fromTo(track, {}, { duration: 0 })
-
-    // A single copy of the content (the width one loop step must travel).
-    const unitHtml = track.innerHTML
-    const unitSize = horizontal ? track.scrollWidth : track.scrollHeight
-
     // Default: repeat the unit until the whole strip is at least as wide as the
     // viewport (plus one extra copy so the trailing edge stays covered mid-loop).
     // `.marquee-no-repeat` opts into the minimal 2-copy single-seam behaviour.

package/Listeners.js

@@ -57,19 +57,37 @@ export default function initListeners() {
 
         // `.preserve` keeps an already-rendered element (e.g. one that persists
         // in a shared layout across route changes) from being re-animated when
-        // the Listeners setup re-runs. The element is animated the first time it
-        // appears and tagged with data-gsap-preserved; on a later path change the
-        // tag survives on the persistent DOM node, so setup skips it.
-        // `.preserve` keeps an already-rendered element from being re-animated. It
-        // applies to the element AND its children: any preserved ancestor also
-        // suppresses animation on this node.
+        // the Listeners setup re-runs. It applies to the element AND its
+        // children: any preserved ancestor also suppresses animation on this
+        // node. Two subtleties make this behave correctly:
+        //   • markPreserved() tags the FULL preserve-ancestor chain, so a bare
+        //     `.preserve` container without its own spawn class (a site header,
+        //     say) still gets tagged when one of its children animates.
+        //   • Suppression requires the element ITSELF to carry data-gsap-wired
+        //     (set when a previous run animated it). Freshly mounted content
+        //     under a preserved root therefore still plays its entrance — only
+        //     DOM that survived from an earlier run stays frozen.
         const isPreserved = (el) => {
+            if (!el.dataset.gsapWired) return false
+            for (let node = el; node && node.nodeType === 1; node = node.parentElement) {
+                if (node.classList.contains("preserve") && node.dataset.gsapPreserved) return true
+            }
+            return false
+        }
+        const markPreserved = (el) => {
+            for (let node = el; node && node.nodeType === 1; node = node.parentElement) {
+                if (node.classList.contains("preserve")) node.dataset.gsapPreserved = "1"
+            }
+        }
+        // True when el sits inside a `.preserve` root that a run has already
+        // tagged. Such regions are frozen by design: later runs skip them, so
+        // teardown must leave their visual state untouched too.
+        const underPreservedRoot = (el) => {
             for (let node = el; node && node.nodeType === 1; node = node.parentElement) {
                 if (node.classList.contains("preserve") && node.dataset.gsapPreserved) return true
             }
             return false
         }
-        const markPreserved = (el) => { if (el.classList.contains("preserve")) el.dataset.gsapPreserved = "1" }
 
         // `spawnConfigs` is derived from the config in Config.js (see top of
         // file). Adding/removing an entry there automatically re-wires every
@@ -699,7 +717,7 @@ export default function initListeners() {
                 scrollTriggers.push(t.scrollTrigger)
             }
         }
-        gsap.utils.toArray('[class^="parallax-"], .progress-bar, .scroll-fill, .scroll-fade-bg, .scroll-horizontal').forEach(setupScrollDriven)
+        gsap.utils.toArray('[class^="parallax-"],[class*=" parallax-"], .progress-bar, .scroll-fill, .scroll-fade-bg, .scroll-horizontal').forEach(setupScrollDriven)
 
         // `.scroll`/`.scroll-progress` entrance animation, driven by ScrollTrigger.
         // Split out into a helper so DYNAMICALLY-added elements (e.g. pagination
@@ -915,6 +933,7 @@ export default function initListeners() {
                     })
                 }
                 markPreserved(el)
+                el.dataset.gsapWired = "1"
             })
         })
 
@@ -931,6 +950,7 @@ export default function initListeners() {
                 const { delay, duration } = readTiming(el)
                 el._spawnTween = playText(el, from, delay, duration, getEase(el))
                 markPreserved(el)
+                el.dataset.gsapWired = "1"
             })
         })
 
@@ -1077,8 +1097,11 @@ export default function initListeners() {
                     el[key]?.kill()
                     el[key] = trackCompatLoop(el, build(el, ctx))
                     if (loop) el[key].repeat(-1)
-                    // Infinite loops never truly complete, so fire on each cycle
-                    // (onRepeat); finite ones fire on their real completion.
+                    // Track wired loops so teardown can kill them (radiate
+                    // relies on kill/onInterrupt to remove its clones).
+                    if (!loopEls.some((l) => l.el === el && l.key === key)) {
+                        loopEls.push({ el, key })
+                    }
                     el[key].eventCallback(el[key].repeat() === -1 ? "onRepeat" : "onComplete",
                         () => fireOnComplete(el, "loop"))
                 }
@@ -1474,13 +1497,30 @@ export default function initListeners() {
         magnetListeners.forEach(({ el, type, fn }) => el.removeEventListener(type, fn))
         magnetQuery?.removeEventListener("change", applyMagnet)
         loopEls.forEach(({ el, key }) => el[key]?.kill())
+        // Sweep any radiate clones orphaned by pre-fix kills or edge cases.
+        document.querySelectorAll('[data-gsap-radiate]').forEach((n) => n.remove())
         cssTweens.forEach((t) => t?.kill())
         cssTweens.length = 0
         gsap.utils.toArray(".typewriter").forEach(el => {
-            if (el.typewriter && !el.typewriter.reversed()) el.typewriter.progress(1)
+            // Preserved-region typewriters stay as-is (already at their end
+            // state); finalize the rest so a mid-type kill can't strand
+            // partial text where the next run's stash would read it.
+            const keep = el.isConnected && underPreservedRoot(el)
+            if (!keep && el.typewriter && !el.typewriter.reversed()) el.typewriter.progress(1)
             el.typewriter?.kill()
         })
-        textSplits.forEach((s) => s.revert())
+        textSplits.forEach((s) => {
+            // Splits inside a tagged preserve region keep their spans — the
+            // next run will skip those elements, and reverting here would
+            // visibly strip their finished animation. Everything else reverts
+            // cleanly (and drops out of splitCache so a reused element can be
+            // re-split fresh).
+            const keep = (s.elements || []).some((e) => e.isConnected && underPreservedRoot(e))
+            if (!keep) {
+                ;(s.elements || []).forEach((e) => splitCache.delete(e))
+                s.revert()
+            }
+        })
         textSplits.length = 0
         onCompleteTweens.forEach((t) => t?.kill())
         onCompleteTweens.length = 0

package/package.json

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