gclass-anims 1.0.0-beta.1 → 1.0.0-beta.11

package/Animations.js

@@ -1,9 +1,13 @@
-import { Flip, SplitText, TextPlugin } from "gsap/all";
+import { DrawSVGPlugin, Flip, MotionPathPlugin, ScrambleTextPlugin, SplitText, TextPlugin } from "gsap/all";
 import gsap from "gsap";
+import { defaults } from './Config.js'
 
 gsap.registerPlugin(Flip)
 gsap.registerPlugin(SplitText)
 gsap.registerPlugin(TextPlugin)
+gsap.registerPlugin(DrawSVGPlugin)
+gsap.registerPlugin(MotionPathPlugin)
+gsap.registerPlugin(ScrambleTextPlugin)
 
 // A tasteful fallback whenever a call site omits an ease, so the animation
 // never lapses into the raw "none" look. Callers still override this freely.
@@ -28,6 +32,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._spawnTween || el._scrollTween)?.isActive?.()
+    const html = el.innerHTML
+    if (!busy && html && html.trim()) el._gcText = html
+    return el._gcText !== undefined ? el._gcText : html
+}
+
 
 //Spawn animations
 
@@ -201,6 +222,188 @@ export function countUp (target , delay , dur, ease){
     return gsap.timeline({ delay }).fromTo(obj , { n: start } , { n: end , duration:dur , ease:e , onUpdate: () => { target.textContent = obj.n.toFixed(decimals) } } , 0)
 }
 
+// Stroke-draw reveal (strokes only — filled SVGs are deliberately out of
+// scope for now). Explicit fromTo endpoints so the animation's hidden state
+// matches this class's Config `from` metadata exactly: `.scroll-progress`
+// scrubs between those two values and `.leave`/`.scroll` reversal tweens back
+// into them.
+export function drawsvg (target , delay , dur , ease){
+    const e = easeOf(ease)
+    return gsap.fromTo(target , {drawSVG:"0%"} , {ease:e , duration:dur , delay:delay , drawSVG:"100%"})
+}
+
+// Busts a multi-segment <path> (one containing multiple "M" commands) apart
+// into one single-segment <path> per segment. Browsers can't reliably render
+// a stroke-dash progressive reveal across disconnected subpaths, while
+// separate paths draw correctly. Adapted from the official DrawSVGPlugin
+// helper, with one addition: splitting REPLACES the source path in the DOM,
+// so the result is cached on that element and reused while the segments are
+// still live — an engine re-init (StrictMode remount, route change) must not
+// churn the DOM a second time. Attributes are copied verbatim; filled SVGs
+// are simply untouched territory for now.
+export function splitPaths (paths){
+    const toSplit = gsap.utils.toArray(paths)
+    let newPaths = []
+    if (toSplit.length > 1) {
+        toSplit.forEach(path => newPaths.push(...splitPaths(path)))
+        return newPaths
+    }
+    const path = toSplit[0]
+    if (!path) return newPaths
+    if (path._gcSplitPaths?.[0]?.isConnected) return path._gcSplitPaths
+    const rawPath = MotionPathPlugin.getRawPath(path)
+    const parent = path.parentNode
+    const attributes = [...path.attributes]
+    newPaths = rawPath.map(segment => {
+        const newPath = document.createElementNS("http://www.w3.org/2000/svg" , "path")
+        let i = attributes.length
+        while (i--) {
+            const attr = attributes[i]
+            // Don't copy GSAP wiring or appear/scroll triggers — children are
+            // animated via the returned timeline, not as independent spawns.
+            // Copying "appear" caused appearObserver → split → appear loop.
+            if (attr.nodeName === "class") {
+                const filtered = attr.nodeValue
+                    .split(/\s+/)
+                    .filter(c => c && c !== "appear" && c !== "scroll" && c !== "scroll-progress" && c !== "draw" && c !== "draw-split")
+                    .join(" ")
+                if (filtered) newPath.setAttributeNS(null, "class", filtered)
+                continue
+            }
+            if (attr.nodeName.startsWith("data-gsap")) continue
+            newPath.setAttributeNS(null , attr.nodeName , attr.nodeValue)
+        }
+        newPath.setAttributeNS(null , "d" ,
+            "M" + segment[0] + "," + segment[1] +
+            "C" + segment.slice(2).join(",") +
+            (segment.closed ? "z" : ""))
+        // Isolate paint and mark as split child so future inits skip it
+        newPath.dataset.gsapSplit = "1"
+        newPath.style.contain = "paint"
+        newPath.style.willChange = "transform"
+        parent.insertBefore(newPath , path)
+        return newPath
+    })
+    parent.removeChild(path)
+    return path._gcSplitPaths = newPaths
+}
+
+// Like drawsvg but built for MULTI-SEGMENT paths: splitPaths() first, then
+// draw each resulting segment one after another, giving every segment a slice
+// of `dur` proportional to its own stroke length so the pen travels at a
+// constant speed across the whole drawing. Returns a timeline, so leave /
+// scroll reversal un-draws the segments back-to-front and the engine's
+// onComplete hooks fire only after the final segment lands.
+export function drawsvgSplit (target , delay , dur , ease){
+    const e = easeOf(ease)
+    const tl = gsap.timeline({ delay })
+    const paths = splitPaths(target)
+    let distance = 0
+    paths.forEach(segment => distance += segment.getTotalLength())
+    // Nothing drawable (empty selection / zero-length strokes): hand back the
+    // inert timeline rather than divide by zero below.
+    if (!distance) return tl
+    paths.forEach(segment => {
+        tl.fromTo(segment ,
+            {drawSVG:"0%"} ,
+            {ease:e , duration:dur * (segment.getTotalLength() / distance) , drawSVG:"100%"})
+    })
+    return tl
+}
+
+// Scramble plumbing. Only the element's TOP-LEVEL TEXT runs are scrambled:
+// each run is wrapped in its own span and tweened separately, while real child
+// elements (links, icons, ...) are left completely untouched — their markup
+// survives the animation intact. Wraps are cached on the element so replays
+// (engine re-inits, .appear re-triggers) reuse the same spans instead of
+// churning the DOM.
+export const scrambleSegments = (target) => {
+    let wraps = target._gcScrambleSegs
+    if (!wraps || !wraps.length || !wraps.every((w) => w.parentNode === target)) {
+        wraps = []
+        ;[...target.childNodes].forEach((node) => {
+            // Whitespace-only runs stay bare so natural spacing is preserved;
+            // everything else becomes an individually scrambable span.
+            if (node.nodeType !== 3 || !node.textContent.trim()) return
+            // ScrambleTextPlugin TRIMS its targets, so a span holding
+            // " with a " would resolve to "with a" and swallow the spaces
+            // around a neighbouring element. Split the edge whitespace off
+            // into bare text nodes and wrap only the trimmed core.
+            const raw = node.textContent
+            const core = raw.trim()
+            const leadIdx = raw.indexOf(core[0])
+            const trailStart = leadIdx + core.length
+            const frag = document.createDocumentFragment()
+            if (leadIdx > 0) frag.appendChild(document.createTextNode(raw.slice(0 , leadIdx)))
+            const span = document.createElement("span")
+            span.textContent = core
+            frag.appendChild(span)
+            if (trailStart < raw.length) frag.appendChild(document.createTextNode(raw.slice(trailStart)))
+            target.insertBefore(frag , node)
+            target.removeChild(node)
+            wraps.push(span)
+        })
+        target._gcScrambleSegs = wraps
+    }
+    return wraps.map((w) => ({ t: w , text: w.textContent }))
+}
+
+// Reads a scramble element's modifier classes and resolves them against the
+// package defaults:
+//   .amount-N        -> ScrambleText speed (default 1, GSAP's own default)
+//   .reveal-delay-N  -> revealDelay in seconds (default defaults.revealDelay)
+//   .chars-[...]     -> character pool taken verbatim from inside the brackets
+//                       (default defaults.characterlist)
+export function scrambleVars (target){
+    const num = (prefix , fallback) => {
+        const match = [...target.classList].find(c => c.startsWith(prefix))
+        return match ? Number(match.slice(prefix.length)) : fallback
+    }
+    // Greedy up to the LAST "]" so pools containing "]" survive intact.
+    const charsCls = [...target.classList].find(c => /^chars-\[(.*)\]$/.test(c))
+    return {
+        segs: scrambleSegments(target) ,
+        chars: charsCls ? charsCls.slice("chars-[".length , -1) : defaults.characterlist ,
+        speed: num("amount-" , 1) ,
+        revealDelay: num("reveal-delay-" , defaults.revealDelay) ,
+        // .scramble-rtl flips the reveal direction (ScrambleTextPlugin's
+        // rightToLeft) so the sweep travels right -> left.
+        rtl: target.classList.contains("scramble-rtl") ,
+    }
+}
+
+// Scramble spawn: the text starts empty and resolves into the real content
+// through garbage characters — no opacity involved, the scramble IS the
+// reveal. Unlike typewriter there is no opacity fade to hide behind, so the
+// package default "back" ease would visually finish at ~36% of `dur` (back.out
+// crosses ~99% early and the reveal index clamps): unless an explicit ease-*
+// class is present the tween therefore eases linearly, making time-N the TRUE
+// total reveal time. One timeline holds a per-text-run tween at position 0 so
+// leave/scroll reversal and onComplete hooks treat it as a single animation.
+//
+// Variants / modifiers:
+//   .scramble-all     - no empty-start typing: the already-finished string
+//                       flips to garbage as a whole and sweeps back (native
+//                       ScrambleTextPlugin resolve).
+//   .scramble-rtl     - reveal travels right -> left.
+export function scramble (target , delay , dur , ease){
+    const e = [...target.classList].some(c => c.startsWith("ease-")) ? easeOf(ease) : "none"
+    const { segs , chars , speed , revealDelay , rtl } = scrambleVars(target)
+    const all = target.classList.contains("scramble-all")
+    const tl = gsap.timeline({ delay })
+    segs.forEach(({ t , text }) => {
+        if (all) {
+            tl.to(t ,
+                {scrambleText:{text , chars , speed , revealDelay , rightToLeft:rtl} , ease:e , duration:dur} , 0)
+        } else {
+            tl.fromTo(t ,
+                {scrambleText:{text:"" , chars}} ,
+                {scrambleText:{text , chars , speed , revealDelay , rightToLeft:rtl} , ease:e , duration:dur} , 0)
+        }
+    })
+    return tl
+}
+
 
 //Mouse animations
 
@@ -323,6 +526,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 +552,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 +566,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 +593,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/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+All notable changes to `gclass-anims` will be documented in this file.
+
+## [1.0.0-beta.11] - 2026-08-26
+
+- Fixed `.draw-split` infinite loop when paired with `.appear` — `splitPaths` (`Animations.js:244`) now strips `appear`/`scroll`/`scroll-progress`/`draw`/`draw-split`/`data-gsap-*` from cloned segments, marks children with `data-gsap-split` + `contain:paint`/`will-change:transform` isolation, and prevents `appearObserver` (`Listeners.js:1559`) re-triggering. Also isolated `draw-split` demos in docs.
+
+## [1.0.0-beta.10] - 2026-08-26
+
+- Added `.randomize-<prop>-[min]-[max]` — randomize spawn start values per element (e.g. `randomize-rotation-[-90]-[90]`, `randomize-x-[-40]-[40]`). Re-rolls on every replay (`.scroll` re-enter, `.appear`).
+- Added `.draw` — stroke-draw reveal for SVG paths using DrawSVGPlugin (`drawSVG: 0% → 100%`).
+- Added `.draw-split` — draws multi-segment SVG paths sequentially at constant pen speed (splits paths with multiple `M` commands into individual strokes).
+- Added `.scramble` — text resolves from empty through scrambled characters into real content (ScrambleTextPlugin). Supports `.reveal-delay-N`, `.chars-[...]`, `.amount-N`, `.scramble-rtl`.
+- Added `.scramble-all` — variant of scramble with no empty start; the finished string flips to garbage as a whole then sweeps back.
+- Added `.scroll-frame` — use a scrollable container as the ScrollTrigger scroller for nested `.scroll` / `.scroll-progress` elements (innermost `.scroll-frame` ancestor wins).
+- Fixed `spawn-text-*` (SplitText) not working correctly on flex containers — text runs are now wrapped in block containers before splitting to preserve flex layout, spacing, and line grouping.
+
+## [1.0.0-beta.9] - Previous release
+
+- See git history for earlier changes.

package/Config.js

@@ -3,7 +3,8 @@ 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,
+  drawsvg, drawsvgSplit, scramble,
 } from './Animations.js'
 
 // ---------------------------------------------------------------------------
@@ -68,6 +69,8 @@ export const defaults = {
   textStagger: 0.03,
   typewriterSplitCharDuration: 0.05,
   minTextPartDuration: 0.3,
+  revealDelay:0,
+  characterlist:"AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz"
 }
 
 export const animations = [
@@ -91,9 +94,28 @@ 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 },
 
+  // Scramble reveal: the text resolves out of garbage characters (ScrambleText).
+  // No opacity change — the scramble IS the spawn. Only the element's own text
+  // runs animate; nested elements (links, icons) are preserved untouched.
+  // Deliberately NO `from`: the scramble manages its own DOM (segment spans),
+  // so the generic TextPlugin-based reversal would destroy it — `.scroll`
+  // exit simply freezes the revealed state and re-entry replays fresh.
+  // `scramble: true` gives `.scroll-progress` a true scrub branch (like
+  // `.count`), since the generic from/to scrub can't express a text tween.
+  // Defaults to a LINEAR ease so time-N is the true total reveal time;
+  // an explicit .ease-* class overrides. Modifiers:
+  //   .reveal-delay-N  - seconds of full-garbage hold before chars start locking in
+  //   .chars-[...]     - the character pool, verbatim inside the brackets
+  //   .amount-N        - scramble speed (ScrambleTextPlugin `speed`)
+  //   .scramble-all    - no typing: the finished string flips to garbage as a
+  //                      whole and sweeps back (native plugin resolve)
+  //   .scramble-rtl    - reveal travels right -> left
+  { sel: ".scramble", scramble: true, text: false, play: (el, delay, dur, ease) => scramble(el, delay, dur, ease) },
+  { sel: ".scramble-all", scramble: true, text: false, play: (el, delay, dur, ease) => scramble(el, delay, dur, ease) },
+
   // Custom-function animation: counts from the `.spawn-num-N` value (N = the
   // starting number) up to whatever number is in the element (falling back to 0
   // when no `.spawn-num-N` class is present). `play` just wraps a helper from
@@ -114,6 +136,15 @@ export const animations = [
   { sel: ".curtain-horizontal", text: false, from: { clipPath: "inset(0% 50% 0% 50%)" }, play: (el, delay, dur, ease) => curtainHorizontal(el, delay, dur, ease) },
   { sel: ".curtain-vertical", text: false, from: { clipPath: "inset(50% 0% 50% 0%)" }, play: (el, delay, dur, ease) => curtainVertical(el, delay, dur, ease) },
 
+  // Stroke-draw reveals (strokes only — filled SVGs are a separate plan).
+  // The hidden state is a fully undrawn stroke (`drawSVG: "0%"`): that's what
+  // `.scroll-progress` scrubs up from and what leave/scroll reversal returns
+  // to. `.draw` animates its target(s) as one stroke; `.draw-split` first
+  // splits multi-segment paths (paths with multiple "M" commands) into one
+  // <path> per segment and draws them sequentially at constant pen speed.
+  { sel: ".draw", text: false, from: { drawSVG: "0%" }, play: (el, delay, dur, ease) => drawsvg(el, delay, dur, ease) },
+  { sel: ".draw-split", text: false, from: { drawSVG: "0%" }, play: (el, delay, dur, ease) => drawsvgSplit(el, delay, dur, ease) },
+
   
   // --- Loops (build + key). Also usable via hover-<name>/click-<name> ---------
   { sel: ".shake", build: (el, { edelay, amount, etime, ease }) => shake(edelay, el, amount, etime, ease), key: "shakeanim" },
@@ -147,6 +178,7 @@ export function normalize(extra = []) {
       typewriterSplit: a.typewriterSplit,
       text: a.text !== false,
       count: a.count,
+      scramble: a.scramble,
     }))
   const loopConfigs = all
     .filter((a) => a.build)

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, scrambleVars } from './Animations'
 import { customAnims } from './CustomAnims'
 import { defaults, normalize } from './Config'
 import { TextPlugin, ScrollTrigger, SplitText } from 'gsap/all'
@@ -30,6 +30,69 @@ export function resolveHandler(name) {
     return null
 }
 
+// --- .randomize-<prop>-[min]-[max] randomization -----------------------------
+// Adds function-based values (e.g. rotation: () => gsap.utils.random(-90, 90))
+// to the FROM state of spawn tweens, so each element enters from its own pose.
+// GSAP evaluates function values on tween BUILD, and the engine always kills +
+// rebuilds tweens on replay (.scroll re-enter, .appear re-insert), so every
+// replay re-rolls automatically — no invalidate/repeatRefresh bookkeeping.
+//
+// The class is the guard: hasRandom() is a cheap className probe and nothing
+// below allocates or patches anything unless it passes, so elements without
+// .randomize-* run exactly the pre-feature code path.
+//
+// Notes:
+//   • randomize OVERRIDES the base spawn's value for that prop (a
+//     randomize-rotation on .spawn-cw replaces the spin).
+//   • A matching END value is derived per prop (scale* -> 1, opacity -> 1,
+//     transforms -> 0, ...) unless the config's own `to` already animates the
+//     prop, so a randomized prop on a spawn that doesn't natively use it still
+//     tweens back to rest instead of sticking at the rolled value.
+//   • Timeline-mediated builders (count/scramble/draw-split) construct via
+//     Timeline methods, not the exported gsap.fromTo, so they sit outside the
+//     injection — irrelevant in practice, since their props aren't randomize
+//     targets.
+const RANDOMIZE_RE = /^randomize-(\w+)-\[(-?[\d.]+)\]-\[(-?[\d.]+)\]$/
+const hasRandom = (el) => typeof el.className === "string" && /\brandomize-/.test(el.className)
+const randomVars = (el) => {
+    const rnd = {}
+    for (const c of el.classList) {
+        const m = c.match(RANDOMIZE_RE)
+        if (m) rnd[m[1]] = () => gsap.utils.random(Number(m[2]), Number(m[3]))
+    }
+    return rnd
+}
+// Resting end-state for a randomized prop (mirrors computeTo's rules).
+const randomEnds = (keys) => Object.fromEntries(keys.map((k) => [
+    k,
+    k === "opacity" ? 1
+        : k === "filter" ? "blur(0px)"
+        : k === "clipPath" ? "inset(0% 0% 0% 0%)"
+        : k === "drawSVG" ? "100%"
+        : k.startsWith("scale") ? 1
+        : 0,
+]))
+// Runs a spawn config's play(), injecting the element's .randomize-* function
+// values into every from-state the config builds. Config helpers hardcode
+// their from literals inside Animations.js, so the injection hooks the only
+// interception point available: play() builds its tweens SYNCHRONOUSLY, which
+// makes a scoped gsap.fromTo swap safe — patch, let the config construct,
+// restore in finally{}. Without .randomize-* this is a bare passthrough.
+const invokePlay = (config, el, delay, dur, ease) => {
+    if (!hasRandom(el)) return config.play(el, delay, dur, ease)
+    const rnd = randomVars(el)
+    const keys = Object.keys(rnd)
+    if (!keys.length) return config.play(el, delay, dur, ease)
+    const ends = randomEnds(keys)
+    const origFromTo = gsap.fromTo
+    gsap.fromTo = (t, from, to) => origFromTo(t, { ...from, ...rnd }, { ...ends, ...to })
+    try {
+        return config.play(el, delay, dur, ease)
+    } finally {
+        gsap.fromTo = origFromTo
+    }
+}
+
 export default function initListeners() {
     gsap.registerPlugin(TextPlugin, ScrollTrigger, SplitText)
 
@@ -57,19 +120,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
@@ -317,7 +398,7 @@ export default function initListeners() {
             const delay = readClassNumber(el, "complete-delay-", 0)
             const dur = readClassNumber(el, "complete-time-", 1)
             const tween = entry.play
-                ? entry.play(el, delay, dur, getEase(el))
+                ? invokePlay(entry, el, delay, dur, getEase(el))
                 : entry.build(el, readLoopCtx(el))
             if (!tween) return
             if (!entry.play) tween.delay(delay)
@@ -337,12 +418,16 @@ export default function initListeners() {
         }
 
         const scrollTriggers = []
+        // Derives the fully-visible twin of a spawn's `from` state. drawSVG is
+        // inverted relative to the numeric default: its HIDDEN value is 0%, so
+        // the drawn end state is the full stroke.
         const computeTo = (from) => {
             const to = {}
             for (const [key] of Object.entries(from)) {
                 if (key === "opacity") to[key] = 1
                 else if (key === "filter") to[key] = "blur(0px)"
                 else if (key === "clipPath") to[key] = "inset(0% 0% 0% 0%)"
+                else if (key === "drawSVG") to[key] = "100%"
                 else to[key] = key.startsWith("scale") ? 1 : 0
             }
             return to
@@ -471,12 +556,50 @@ export default function initListeners() {
             },
         })
 
+        // Flex targets can't be split directly: the split parts would become
+        // flex ITEMS, so justify-content/gap would apply per letter, whitespace-
+        // only text nodes stop rendering (spaces vanish) and line grouping reads
+        // garbage. Loose text runs are therefore pre-wrapped in plain block
+        // divs — real boxes with normal inline flow inside — and the wrappers
+        // are undone whenever the split reverts. Non-text children (icons etc.)
+        // stay put, keeping their own flex-item status and the gaps around them.
+        const wrapFlexTarget = (el) => {
+            if (!/^(inline-)?flex$/.test(getComputedStyle(el).display)) return null
+            const wrappers = []
+            let run = []
+            const flush = () => {
+                if (!run.length) return
+                const w = document.createElement("div")
+                el.insertBefore(w, run[0])
+                run.forEach((n) => w.appendChild(n))
+                wrappers.push(w)
+                run = []
+            }
+            ;[...el.childNodes].forEach((n) => {
+                if (n.nodeType === 3 && n.textContent.trim()) run.push(n)
+                else flush()
+            })
+            flush()
+            if (!wrappers.length) return null
+            return () => wrappers.forEach((w) => {
+                while (w.firstChild) el.insertBefore(w.firstChild, w)
+                w.remove()
+            })
+        }
+
+        // Revert a SplitText instance AND undo any flex pre-wrapping made for
+        // it. Every revert path funnels through here so wrappers can't leak.
+        const revertSplitInstance = (s) => {
+            s.revert()
+            s._gcFlexUnwrap?.()
+        }
+
         const getSplit = (el, gran) => {
             let s = splitCache.get(el)
             const rtlChars = gran === "chars" && isRTLText(el)
             const key = rtlChars ? "rtl-chars" : gran
             if (!s || s.granularity !== key) {
-                s?.revert()
+                if (s) revertSplitInstance(s)
                 s = rtlChars
                     ? getRTLCharSplit(el)
                     : new SplitText(el, {
@@ -485,6 +608,7 @@ export default function initListeners() {
                         wordsClass: "gsap-word",
                         charsClass: "gsap-char",
                     })
+                s._gcFlexUnwrap = wrapFlexTarget(el)
                 s.granularity = key
                 splitCache.set(el, s)
                 textSplits.push(s)
@@ -514,7 +638,7 @@ export default function initListeners() {
             splitCache.delete(el)
             const idx = textSplits.indexOf(s)
             if (idx !== -1) textSplits.splice(idx, 1)
-            s.revert()
+            revertSplitInstance(s)
         }
         // The whole point of `.time-X` on a `.spawn-text-X` element is that the
         // FULL reveal (first part starting to last part finishing) takes X
@@ -545,8 +669,17 @@ export default function initListeners() {
                 duration = Math.min(dur, Math.max(dur / 3, defaults.minTextPartDuration))
                 stagger = parts.length > 1 ? (dur - duration) / (parts.length - 1) : 0
             }
-            return gsap.fromTo(parts, { ...from }, {
-                ...computeTo(from), ease, duration, delay, stagger,
+            // .randomize-*: per-PART roll (function values evaluate once per
+            // target, so every char/word/line lands on its own pose); end
+            // states recompute from the merged keys so new props tween to rest.
+            let rnd = null
+            if (hasRandom(el)) {
+                rnd = randomVars(el)
+                if (!Object.keys(rnd).length) rnd = null
+            }
+            const effFrom = { ...from, ...rnd }
+            return gsap.fromTo(parts, effFrom, {
+                ...computeTo(effFrom), ease, duration, delay, stagger,
                 onComplete: () => {
                     if (el.classList.contains("leave")) refreshLeaveRect(el)
                     revertSplit(el)
@@ -699,7 +832,17 @@ 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)
+
+        // Scroller resolution: a `.scroll`/`.scroll-progress` element inside a
+        // `.scroll-frame` container binds its trigger to THAT box instead of the
+        // window. Innermost frame wins (`closest` walks up); no frame ancestor
+        // keeps the default window scroller. The frame must be a real scroller
+        // (fixed height + overflow auto/scroll) or its triggers never fire.
+        const getScroller = (el) => {
+            const frame = el.closest?.(".scroll-frame")
+            return frame && frame !== el ? frame : undefined
+        }
 
         // `.scroll`/`.scroll-progress` entrance animation, driven by ScrollTrigger.
         // Split out into a helper so DYNAMICALLY-added elements (e.g. pagination
@@ -724,8 +867,9 @@ 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 if (key === "drawSVG") to[key] = "100%"
                     else to[key] = key.startsWith("scale") ? 1 : 0
                 }
 
@@ -736,10 +880,16 @@ export default function initListeners() {
                 // GSAP's ScrollTrigger ignores a `reversed` config; swap from/to so
                 // the scrub maps in the opposite direction instead.
                 const reverse = el.classList.contains("progress-reverse")
+                // .randomize-* applies to the HIDDEN start only (non-reverse):
+                // a scrub's resting end must stay deterministic or the element
+                // would sit permanently off-pose after being scrolled through.
+                const rnd = !reverse && hasRandom(el) ? randomVars(el) : null
+                const rndEnds = rnd ? randomEnds(Object.keys(rnd)) : null
 
                 const tl = gsap.timeline({
                     scrollTrigger: {
                         trigger: el,
+                        scroller: getScroller(el),
                         start: startClass != null ? `top ${clamp(100 - startClass)}%` : defaults.progressStart,
                         end: endClass != null ? `top ${clamp(100 - endClass)}%` : defaults.progressEnd,
                         scrub: true,
@@ -751,11 +901,32 @@ export default function initListeners() {
                     const { start, end, decimals } = countTargetVars(el)
                     const obj = { n: reverse ? end : start }
                     tl.fromTo(obj, { n: reverse ? end : start }, { n: reverse ? start : end, ease, onUpdate: () => { el.textContent = obj.n.toFixed(decimals) } }, 0)
+                } else if (config.scramble) {
+                    // Scramble driven by scroll progress: each top-level text
+                    // run scrubs through garbage states (.progress-reverse
+                    // swaps the endpoints). The generic from/to scrub can't
+                    // express this (it only knows the numeric `from` keys),
+                    // which is why the entry carries the scramble flag.
+                    // .scramble-all has no empty state: its tween runs between
+                    // identical endpoints so the scrub just drives the sweep.
+                    // Same ease rule as play(): linear unless .ease-* present.
+                    const { segs, chars, speed, revealDelay, rtl } = scrambleVars(el)
+                    const all = el.classList.contains("scramble-all")
+                    segs.forEach(({ t, text }) => {
+                        if (all) {
+                            tl.to(t,
+                                { scrambleText: { text, chars, speed, revealDelay, rightToLeft: rtl }, ease }, 0)
+                        } else {
+                            tl.fromTo(t,
+                                { scrambleText: { text: reverse ? text : "", chars } },
+                                { scrambleText: { text: reverse ? "" : text, chars, speed, revealDelay, rightToLeft: rtl }, ease }, 0)
+                        }
+                    })
                 } else if (typewriterSplit) {
                     const parts = getParts(el, getGranularity(el))
                     if (parts.length) tl.fromTo(parts, { opacity: reverse ? 1 : 0 }, { opacity: reverse ? 0 : 1, ease })
                 } else {
-                    tl.fromTo(el, { ...(reverse ? to : from) }, { ...(reverse ? from : to), ease })
+                    tl.fromTo(el, { ...(reverse ? to : from), ...rnd }, { ...rndEnds, ...(reverse ? from : to), ease })
                 }
                 scrollTriggers.push(tl.scrollTrigger)
                 return
@@ -767,7 +938,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()
@@ -775,7 +946,7 @@ export default function initListeners() {
                     ? (typewriterSplit
                         ? playTypewriterSplit(el, delay, duration, ease)
                         : typewriter(el, fullText, duration, delay, ease))
-                    : play(el, delay, duration, ease)
+                    : invokePlay(config, el, delay, duration, ease)
                 el._scrollTween.eventCallback("onComplete", () => fireOnComplete(el, "spawn"))
             }
             const reverseToStart = () => {
@@ -802,6 +973,7 @@ export default function initListeners() {
 
             const st = ScrollTrigger.create({
                 trigger: el,
+                scroller: getScroller(el),
                 start: "top bottom",
                 end: "bottom top",
                 onEnter: enter,
@@ -834,6 +1006,7 @@ export default function initListeners() {
                 }
                 scrollTriggers.push(ScrollTrigger.create({
                     trigger: el,
+                    scroller: getScroller(el),
                     start: "top bottom",
                     end: "top top",
                     onEnter: enter,
@@ -855,14 +1028,19 @@ export default function initListeners() {
                 const tl = gsap.timeline({
                     scrollTrigger: {
                         trigger: el,
+                        scroller: getScroller(el),
                         start: startClass != null ? `top ${clamp(100 - startClass)}%` : defaults.progressStart,
                         end: endClass != null ? `top ${clamp(100 - endClass)}%` : defaults.progressEnd,
                         scrub: true,
                     },
                 })
                 // `.progress-reverse` runs the split scrub in reverse; swap from/to.
+                // Randomize applies to the hidden (non-reverse) start only, same
+                // rule as the element-level scrub above.
                 const reverse = el.classList.contains("progress-reverse")
-                tl.fromTo(parts, { ...(reverse ? to : from) }, { ...(reverse ? from : to), ease })
+                const rnd = !reverse && hasRandom(el) ? randomVars(el) : null
+                tl.fromTo(parts, { ...(reverse ? to : from), ...rnd },
+                    { ...(rnd ? randomEnds(Object.keys(rnd)) : null), ...(reverse ? from : to), ease })
                 scrollTriggers.push(tl.scrollTrigger)
             })
         })
@@ -889,7 +1067,8 @@ export default function initListeners() {
         setTimeout(scheduleRefresh, 400)
         setTimeout(scheduleRefresh, 1200)
 
-        spawnConfigs.forEach(({ sel, typewriter: isTypewriter, typewriterSplit, play }) => {
+        spawnConfigs.forEach((config) => {
+            const { sel, typewriter: isTypewriter, typewriterSplit } = config
             gsap.utils.toArray(sel).forEach((el) => {
                 if (el.classList.contains("scroll") || el.classList.contains("scroll-progress")) return
                 if (isPreserved(el)) return
@@ -902,10 +1081,10 @@ 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))
+                    el._spawnTween = invokePlay(config, el, delay, duration, getEase(el))
                     el._spawnTween.eventCallback("onComplete", () => {
                         if (el.classList.contains("leave")) refreshLeaveRect(el)
                         if (el.classList.contains("flip")) captureFlip(el)
@@ -915,6 +1094,7 @@ export default function initListeners() {
                     })
                 }
                 markPreserved(el)
+                el.dataset.gsapWired = "1"
             })
         })
 
@@ -931,6 +1111,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 +1258,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"))
                 }
@@ -1361,9 +1545,9 @@ export default function initListeners() {
                 const elEase = easeClass ? easeClass.split("-")[1] : "none"
                 el._spawnTween = config.typewriterSplit
                     ? playTypewriterSplit(el, delay, duration, elEase)
-                    : config.play(el, delay, duration, elEase)
+                    : invokePlay(config, el, delay, duration, elEase)
             } else {
-                el._spawnTween = config.play(el, delay, duration, ease)
+                el._spawnTween = invokePlay(config, el, delay, duration, ease)
                 el._spawnTween.eventCallback("onComplete", () => {
                     if (el.classList.contains("leave")) refreshLeaveRect(el)
                     if (el.classList.contains("flip")) captureFlip(el)
@@ -1442,19 +1626,65 @@ 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/scramble entrance at its end state
+            // BEFORE killing: stranded partial/garbled text would otherwise be read as
+            // settled content by the next run's stash.
+            const cls = t.trigger.classList
+            if (tw && !tw.reversed() && (cls?.contains("typewriter") || cls?.contains("scramble"))) 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, .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
+            // stash would read it.
+            const keep = el.isConnected && underPreservedRoot(el)
+            const tw = el.typewriter || el._spawnTween || el._scrollTween
+            if (!keep && tw && !tw.reversed()) tw.progress(1)
+            tw?.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))
+                revertSplitInstance(s)
+            }
+        })
         textSplits.length = 0
         onCompleteTweens.forEach((t) => t?.kill())
         onCompleteTweens.length = 0

package/README.md

@@ -4,6 +4,10 @@ A Tailwind-style utility layer on top of GSAP which I started developing for fun
 
 Framework-agnostic: works in vanilla JS, React, Vue, Svelte, or any bundler.
 
+## Live demo
+
+https://saturn-sepehr.github.io/GClass/
+
 ## Installation
 
 ```

package/index.d.ts

@@ -64,6 +64,10 @@ export interface AnimationConfig {
   typewriter?: boolean
   /** Marks a per-part (SplitText) typewriter entry. */
   typewriterSplit?: boolean
+  /** Marks a numeric counter entry (counts from `.spawn-num-N` to the element's number). */
+  count?: boolean
+  /** Marks a ScrambleText entry (text resolves out of garbage characters). */
+  scramble?: boolean
   /** Set false to skip generating a `.spawn-text-<name>` variant. Default true. */
   text?: boolean
   /** Set false to keep `build` but skip the always-on repeat. Default true. */
@@ -79,6 +83,8 @@ export interface SpawnConfig {
   play: (el: HTMLElement, delay: number, dur: number, ease: string) => any
   typewriter?: boolean
   typewriterSplit?: boolean
+  count?: boolean
+  scramble?: boolean
   text: boolean
 }
 
@@ -115,6 +121,8 @@ export interface Defaults {
   textStagger: number
   typewriterSplitCharDuration: number
   minTextPartDuration: number
+  revealDelay: number
+  characterlist: string
 }
 
 /** Global timing / ease defaults (edit to tweak global behaviour). */
@@ -162,6 +170,40 @@ export function expandDown(target: TweenTarget, delay: number, dur: number, ease
 export function countUp(target: TweenTarget, delay: number, dur: number, ease: string): any
 /** Reads a count element's start (`.spawn-num-N`, else 0), target number, and decimals. */
 export function countTargetVars(target: TweenTarget): { start: number; end: number; decimals: number }
+/**
+ * Reads a scramble element's modifiers against the package defaults:
+ * `.amount-N` -> speed (default 1), `.reveal-delay-N` -> revealDelay
+ * (default `defaults.revealDelay`), `.chars-[...]` -> character pool verbatim
+ * (default `defaults.characterlist`). Also segments the element: only
+ * top-level text runs are scrambled (each wrapped in its own span); nested
+ * elements are preserved untouched.
+ */
+export function scrambleVars(target: TweenTarget): {
+  segs: { t: any; text: string }[]
+  chars: string
+  speed: number
+  revealDelay: number
+  rtl: boolean
+}
+/**
+ * Scramble spawn: the text starts empty and resolves into its real content
+ * through garbage characters (ScrambleTextPlugin). No opacity change; nested
+ * elements are preserved. Defaults to a linear ease so `.time-N` is the true
+ * total reveal time — an explicit `.ease-*` class overrides. Modifiers read
+ * from the element: .reveal-delay-N, .chars-[...], .amount-N, .scramble-all
+ * (whole-string scramble-and-sweep, no empty-start typing), .scramble-rtl.
+ */
+export function scramble(target: TweenTarget, delay: number, dur: number, ease: string): any
+/** Progressively draws the target's SVG stroke from 0% to 100% (strokes only). */
+export function drawsvg(target: TweenTarget, delay: number, dur: number, ease: string): any
+/**
+ * Splits multi-segment `<path>` elements (multiple "M" commands) into one
+ * single-segment `<path>` per segment. Destructive: source paths are replaced.
+ * Results are cached on the original element for engine re-inits.
+ */
+export function splitPaths(paths: any): any[]
+/** DrawSVG variant that splits multi-segment paths first, then draws each segment sequentially at constant speed. Returns a timeline. */
+export function drawsvgSplit(target: TweenTarget, delay: number, dur: number, ease: string): any
 export function verticalmove(target: TweenTarget, amount: number, dur: number, ease: string): any
 export function expandmove(target: TweenTarget, amount: number, dur: number, ease: string): any
 export function magnet(target: TweenTarget, x: number, y: number, scale: number, dur: number, ease: string): any

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gclass-anims",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.11",
   "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",
@@ -22,7 +22,8 @@
     "Config.js",
     "CustomAnims.js",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "CHANGELOG.md"
   ],
   "keywords": [
     "gsap",
@@ -39,7 +40,7 @@
     "url": "git+https://github.com/Saturn-sepehr/GClass.git",
     "directory": "/"
   },
-  "homepage": "https://github.com/Saturn-sepehr/GClass#readme",
+  "homepage": "https://saturn-sepehr.github.io/GClass/",
   "dependencies": {
     "gsap": "^3.15.0"
   },