gclass-anims 1.0.0-beta.12 → 1.0.0-beta.13

package/Animations.js

@@ -222,14 +222,43 @@ 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)
 }
 
+// Helpers for the `fill-svg` draw-modifier. When an element carries both
+// `.draw`/`.draw-split` and `.fill-svg`, the stroke is drawn first and then
+// the interior fills. `fill-time-N` / `fill-ease-NAME` override the fill
+// phase; otherwise the fill takes half of `dur` and reuses the draw ease.
+const fillTimeOf = (el , fallback) => {
+    const m = [...el.classList].find(c => c.startsWith("fill-time-"))
+    return m ? Number(m.slice("fill-time-".length)) : fallback * 0.5
+}
+const fillEaseOf = (el , fallbackEase) => {
+    const m = [...el.classList].find(c => c.startsWith("fill-ease-"))
+    return m ? m.slice("fill-ease-".length) : fallbackEase
+}
+
 // 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.
+// into them. When the target also carries `.fill-svg`, the interior is filled
+// after the stroke finishes (draw → fill sequential timeline).
 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%"})
+    const first = gsap.utils.toArray(target)[0]
+    const hasFill = !!first?.classList?.contains("fill-svg")
+    if (!hasFill) {
+        return gsap.fromTo(target , {drawSVG:"0%"} , {ease:e , duration:dur , delay:delay , drawSVG:"100%"})
+    }
+    const fillDur = fillTimeOf(first , dur)
+    const fillEase = fillEaseOf(first , ease)
+    const fillTargets = gsap.utils.toArray(target).filter(el => el.classList.contains("fill-svg"))
+    const tl = gsap.timeline({ delay })
+    // Keep fill invisible while the stroke draws
+    if (fillTargets.length) gsap.set(fillTargets , { fillOpacity: 0 })
+    tl.fromTo(target , {drawSVG:"0%"} , {ease:e , duration:dur , drawSVG:"100%"})
+    if (fillTargets.length) {
+        tl.fromTo(fillTargets , {fillOpacity:0} , {ease:easeOf(fillEase) , duration:fillDur , fillOpacity:1})
+    }
+    return tl
 }
 
 // Busts a multi-segment <path> (one containing multiple "M" commands) apart
@@ -293,9 +322,15 @@ export function splitPaths (paths){
 // 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.
+// onComplete hooks fire only after the final segment lands. When the source
+// also carries `.fill-svg`, every resulting segment is filled together after
+// the last draw segment lands (draw → fill).
 export function drawsvgSplit (target , delay , dur , ease){
     const e = easeOf(ease)
+    const first = gsap.utils.toArray(target)[0]
+    const hasFill = !!first?.classList?.contains("fill-svg")
+    const fillDur = hasFill ? fillTimeOf(first , dur) : 0
+    const fillEase = hasFill ? fillEaseOf(first , ease) : ease
     const tl = gsap.timeline({ delay })
     const paths = splitPaths(target)
     let distance = 0
@@ -303,11 +338,15 @@ export function drawsvgSplit (target , delay , dur , ease){
     // Nothing drawable (empty selection / zero-length strokes): hand back the
     // inert timeline rather than divide by zero below.
     if (!distance) return tl
+    if (hasFill && paths.length) gsap.set(paths , { fillOpacity: 0 })
     paths.forEach(segment => {
         tl.fromTo(segment ,
             {drawSVG:"0%"} ,
             {ease:e , duration:dur * (segment.getTotalLength() / distance) , drawSVG:"100%"})
     })
+    if (hasFill && paths.length) {
+        tl.fromTo(paths , {fillOpacity:0} , {ease:easeOf(fillEase) , duration:fillDur , fillOpacity:1})
+    }
     return tl
 }
 

package/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 All notable changes to `gclass-anims` will be documented in this file.
 
+## [1.0.0-beta.13] - 2026-08-27
+- Added a new `.fill-svg` modifier for the `.draw` and `.draw-split` classes that fills the SVG after it has been drawn.
+
 ## [1.0.0-beta.12] - 2026-08-26
 
 - Fixed `scramble` with `scroll-progress` throwing `can't convert undefined to object` — `computeTo` (`Listeners.js:424`) and scrub `to` builder (`Listeners.js:867`) now guard `from` (`scramble` has no `from`).

package/Config.js

@@ -142,6 +142,11 @@ export const animations = [
   // 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.
+  // `.fill-svg` is a MODIFIER for both: add it alongside `.draw`/`.draw-split`
+  // to fill the interior after the stroke finishes (draw → fill). Tunables:
+  // `fill-time-N` (fill duration, default = 0.5× draw time) and
+  // `fill-ease-NAME` (default reuses draw ease). Requires a fill color on
+  // the element (`fill` attribute or CSS); the modifier animates `fillOpacity`.
   { 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) },
 

package/Listeners.js

@@ -925,6 +925,24 @@ export default function initListeners() {
                 } 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 if (el.classList.contains("fill-svg") && (el.classList.contains("draw") || el.classList.contains("draw-split"))) {
+                    // fill-svg modifier for draw: stroke first, then fill, sequential scrub.
+                    // For scrub the two phases are sequential tweens so scroll maps
+                    // draw → fill. Reverse swaps order so unfill happens before undraw.
+                    const fillEaseCls = [...el.classList].find(c => c.startsWith("fill-ease-"))
+                    const fillEase = fillEaseCls ? fillEaseCls.slice("fill-ease-".length) : ease
+                    const fillTimeCls = [...el.classList].find(c => c.startsWith("fill-time-"))
+                    const fillDur = fillTimeCls ? Number(fillTimeCls.slice("fill-time-".length)) : 0.5
+                    const drawDur = 1
+                    // Ensure the hidden / revealed fill state is correct before scrub starts
+                    gsap.set(el, { fillOpacity: reverse ? 1 : 0 })
+                    if (!reverse) {
+                        tl.fromTo(el, { drawSVG: "0%" , ...rnd }, { drawSVG: "100%" , ...rndEnds, ease, duration: drawDur })
+                        tl.fromTo(el, { fillOpacity: 0 }, { fillOpacity: 1, ease: fillEase, duration: fillDur })
+                    } else {
+                        tl.fromTo(el, { fillOpacity: 1 }, { fillOpacity: 0, ease: fillEase, duration: fillDur })
+                        tl.fromTo(el, { drawSVG: "100%" , ...rndEnds }, { drawSVG: "0%" , ...rnd, ease, duration: drawDur })
+                    }
                 } else {
                     tl.fromTo(el, { ...(reverse ? to : from), ...rnd }, { ...rndEnds, ...(reverse ? from : to), ease })
                 }

package/package.json

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