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

package/Animations.js

@@ -28,6 +28,23 @@ export const finalOpacity = (target) => {
     return isNaN(v) ? 1 : v
 }
 
+// TextPlugin tweens take their endpoints from the LIVE DOM: the `.typewriter`
+// play callbacks pass `el.innerHTML` as the text to type. The tween's from
+// state ("") is applied the instant the tween is created, and a teardown that
+// kills the tween mid-flight leaves that wiped state behind — so a later
+// engine re-init reading `el.innerHTML` again would type an empty (or
+// partially-typed) string forever. Stash the full HTML on first sight and
+// reuse it. The stash only refreshes from SETTLED content: never while a
+// typewriter tween on the element is actively rendering partial progress, and
+// never from a blank DOM. Legit content changes (React re-renders, dynamic
+// `.appear` elements) therefore update the stash naturally.
+export const stashText = (el) => {
+    const busy = (el.typewriter || el._scrollTween)?.isActive?.()
+    const html = el.innerHTML
+    if (!busy && html && html.trim()) el._gcText = html
+    return el._gcText !== undefined ? el._gcText : html
+}
+
 
 //Spawn animations
 
@@ -323,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.
@@ -346,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 ,
@@ -353,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 ,
     })
 }
 
@@ -383,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/Config.js

@@ -3,7 +3,7 @@ import {
   spinCCW, spinCW, expandA, typewriter, bell, spawnBlur, spawnFade, spawnXDown,
   spawnXUp, spawnYRight, spawnYLeft, pulse, radiate, hover, expandRight,
   expandLeft, expandUp, expandDown, marquee, countUp,
-  spawnClipReveal, curtainHorizontal, curtainVertical,
+  spawnClipReveal, curtainHorizontal, curtainVertical, stashText,
 } from './Animations.js'
 
 // ---------------------------------------------------------------------------
@@ -91,7 +91,7 @@ export const animations = [
   { sel: ".expand-up", from: { opacity: 0, scaleY: 0 }, play: (el, delay, dur, ease) => expandUp(el, delay, dur, ease) },
   { sel: ".expand-down", from: { opacity: 0, scaleY: 0 }, play: (el, delay, dur, ease) => expandDown(el, delay, dur, ease) },
   { sel: ".expand-all", from: { opacity: 0, scale: 0 }, play: (el, delay, dur, ease) => expandA(el, delay, dur, ease) },
-  { sel: ".typewriter", typewriter: true, from: { text: "" }, play: (el, delay, dur, ease) => typewriter(el, el.innerHTML, dur, delay, ease) },
+  { sel: ".typewriter", typewriter: true, from: { text: "" }, play: (el, delay, dur, ease) => typewriter(el, stashText(el), dur, delay, ease) },
   { sel: ".typewriter-split", typewriter: true, typewriterSplit: true, from: { opacity: 0 }, play: (el, delay, dur, ease) => null },
 
   // Custom-function animation: counts from the `.spawn-num-N` value (N = the

package/Listeners.js

@@ -1,5 +1,5 @@
 import gsap from 'gsap'
-import { SpawnV, verticalmove, expandmove, magnet, magnet3d, reset, typewriter, countTargetVars } from './Animations'
+import { SpawnV, verticalmove, expandmove, magnet, magnet3d, reset, typewriter, countTargetVars, stashText } from './Animations'
 import { customAnims } from './CustomAnims'
 import { defaults, normalize } from './Config'
 import { TextPlugin, ScrollTrigger, SplitText } from 'gsap/all'
@@ -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
@@ -724,7 +742,7 @@ export default function initListeners() {
                 for (const [key] of Object.entries(from)) {
                     if (key === "opacity") to[key] = 1
                     else if (key === "filter") to[key] = "blur(0px)"
-                    else if (key === "text") to[key] = el.innerHTML
+                    else if (key === "text") to[key] = stashText(el)
                     else if (key === "clipPath") to[key] = "inset(0% 0% 0% 0%)"
                     else to[key] = key.startsWith("scale") ? 1 : 0
                 }
@@ -767,7 +785,7 @@ export default function initListeners() {
                 ? ([...el.classList].find(c => c.startsWith("ease-"))?.split("-")[1] ?? "none")
                 : getEase(el)
 
-            const fullText = el.innerHTML
+            const fullText = stashText(el)
 
             const enter = () => {
                 if (el._scrollTween) el._scrollTween.kill()
@@ -902,7 +920,7 @@ export default function initListeners() {
                         el._spawnTween = playTypewriterSplit(el, delay, duration, elEase)
                     } else {
                         el.typewriter?.kill()
-                        el.typewriter = typewriter(el, el.innerHTML, duration, delay, elEase)
+                        el.typewriter = typewriter(el, stashText(el), duration, delay, elEase)
                     }
                 } else {
                     el._spawnTween = play(el, delay, duration, getEase(el))
@@ -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"))
                 }
@@ -1442,19 +1465,62 @@ export default function initListeners() {
         window.removeEventListener("load", ScrollTrigger.refresh)
         clearTimeout(refreshTimer)
         scrollTriggers.forEach((t) => {
-            t.kill()
+            const tw = t.trigger._scrollTween
+            // Finalize a mid-flight typewriter entrance at its end state
+            // BEFORE killing: stranded partial text would otherwise be read as
+            // settled content by the next run's stash.
+            if (tw && !tw.reversed() && t.trigger.classList?.contains("typewriter")) tw.progress(1)
+            // kill(true): revert pinning (remove pin-spacers, restore inline
+            // styles) so a later init can re-pin cleanly instead of nesting a
+            // second spacer inside the leaked first one.
+            t.kill(true)
             t.trigger._scrollTween?.kill()
             delete t.trigger._scrollTween
         })
         ScrollTrigger.refresh()
+        // Clear per-element wire-up tags. Without this, any engine restart
+        // (initAnimations() called again, StrictMode remounts, route-level
+        // re-mounts that keep DOM nodes alive) would silently skip rewiring:
+        // .scroll/.pin/parallax triggers stay dead (their old ones were just
+        // killed) and clicks/loops/hover never re-bind. `_appeared` goes too,
+        // 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) => {
+            delete el.dataset.gsapScroll
+            delete el.dataset.gsapSetup
+            delete el.dataset.gsapPinned
+            delete el.dataset.gsapScrollDriven
+            delete el._appeared
+        })
         registeredListeners.forEach(({ el, type, fn }) => el.removeEventListener(type, fn))
         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 => el.typewriter?.kill())
-        textSplits.forEach((s) => s.revert())
+        gsap.utils.toArray(".typewriter").forEach(el => {
+            // 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) => {
+            // 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.6",
+  "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",