gclass-anims 1.0.0-beta.22 → 1.0.0-beta.22.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to `gclass-anims` will be documented in this file.
 
+## [1.0.0-beta.22.2] - 2026-09-06
+- Fixed `m:order` (and any `bp:order` / `bp:priority-*` / `bp:ease-*` / `bp:time-*`) disabling the entire `scroll` animation on smaller screens — `Listeners.js:1200,1232,1262` previously wrapped `setupScroll` / `playText` scroll variants in generic `runWithBreakpoint(el, ...)` which gated on *any* `bp:*` class on the element (so `m:order` gated `scroll`). Now uses per-animation `qAllAllVariants` + `runWithBreakpointForSel` (`".scroll"`, `".scroll-progress"`, `tSel`) so only a true `m:scroll` / `m:spawn-*` gates its own animation; unrelated modifiers like `m:order` only affect `hasGClass("order")` / `readTiming` (stagger) and `spawn-*` + `scroll` still play on all sizes (without stagger on <m). Keeps live `gsap.matchMedia` handling for true breakpoint-gated scroll. Reverts `HowWorkSection.jsx` workaround from `m:order` back to plain `order` for the default staggered landing.
+
+## [1.0.0-beta.22.1] - 2026-09-06
+- Fixed `.order` stagger grouping bug — `Listeners.js:76` `wrapQAll` now preserves DOM order via `body *` filter + `elementMatchesSel` (was `Set([...spawn-up], [...spawn-down])` grouping by type, now top-to-bottom as `qAll` does). Fixes `doc` `spawn` and landing `order` appearing all over.
+- No API change from `beta.22`.
+
 ## [1.0.0-beta.22] - 2026-09-06
 - Added responsive breakpoints — `Config.js:75` `defaults.breakpoints {xs:475,s:640,m:768,l:1024,xl:1280}` (single-letter `s/m/l` avoids Tailwind `sm/md/lg` collision). Usage `m:spawn-up`, `l:float`, `xs:spawn-up`. Gating is live via `gsap.matchMedia` (`Listeners.js:26,202`).
 - Added breakpoint-aware modifiers — `m:amount-20`, `m:time-2`, `m:ease-bounce`, `m:priority-3`, `m:chars-[...]`, `m:spawn-num-10` etc. Mobile-first largest active wins (`Listeners.js:237` `getActivePrefixedClass`, `Animations.js:13` lazy helpers). Covers `amount-`, `time-`, `priority-`, `edelay-`, `etime-`, `stagger-`, `fill-time-`, `reveal-delay-`, `spawn-num-`, `progress-start-`, etc.
@@ -9,6 +16,7 @@ All notable changes to `gclass-anims` will be documented in this file.
 - Added ESM + CJS dual build — `vite.lib.config.js` (Vite lib) builds `dist/gclass.esm.js` + `dist/gclass.cjs` (`gsap` external); `package.json:4` bumped to `beta.22`, `main/module` point to `dist/`, `exports: {import, require}`, `sideEffects:false`, `prepublishOnly: build`.
 - Fixed CJS `gsap` interop — `Animations.js:2`/`Listeners.js:1`/`AnimToggle.js:3`/`CustomAnims.js:1` now `import {gsap} from 'gsap'` (named import) for correct `require('gsap').gsap` interop.
 - Added `dev-react-strict` test harness — `vitest` + `jsdom` + `src/__tests__/breakpoints.test.jsx` (14 tests: gating, modifiers, Tailwind coexistence, StrictMode) + `BreakpointHarness.jsx` visual; `vite.config.js` test config.
+- Documented breakpoints — `doc/src/app/documentation/responsive-design/page.js` (was duplicate `optimization`).
 
 ## [1.0.0-beta.21] - 2026-9-3
 - Added a `gclassOpts()` function that controls the animation fps and observer throttling

package/Listeners.js

@@ -73,32 +73,17 @@ const qAllBp = (sel, qAll) => {
     })())
 }
 // For generic qAll(sel) calls that should be breakpoint-aware, use this wrapper.
+// Preserves DOM order (critical for .order stagger) and respects root scoping (boot screen).
 const wrapQAll = (qAll) => (sel) => {
-    // if sel is a comma list (orderSelector), split and union
-    if (sel.includes(',')) {
-        const parts = sel.split(',').map(s => s.trim()).filter(Boolean)
-        const set = new Set()
-        parts.forEach(p => wrapQAll(qAll)(p).forEach(e => set.add(e)))
-        return [...set]
-    }
-    // "body *" passthrough
     if (sel === "body *") return qAll(sel)
-    const hasBpInSel = bpNames.some(bp => sel.includes(`${bp}:`))
-    if (hasBpInSel) {
-        // sel already contains bp: variant - filter by active
-        return qAll("body *").filter(el => sel.split(',').some(s => elementMatchesSel(el, s.trim())))
-    }
-    // normal sel - include base + active variants
-    try {
-        const baseEls = qAll(sel)
-        // also scan for active variants that wouldn't be found by qAll(sel)
-        const variantEls = qAll("body *").filter(el => {
-            for (const bp of bpNames) if (el.classList.contains(`${bp}:${sel.slice(1)}`) && isBreakpointActive(bp)) return true
-            return false
-        })
-        const set = new Set([...baseEls, ...variantEls])
-        return [...set]
-    } catch { return qAll(sel) }
+    const parts = sel.split(',').map(s => s.trim()).filter(Boolean)
+    // Filter all candidates in DOM order, matching base or active bp: variant via elementMatchesSel
+    // This keeps .order sequence top-to-bottom instead of grouping by sel type.
+    return qAll("body *").filter(el => parts.some(p => {
+        // p is like ".spawn-up" or ".spawn-text-spawn-up"
+        // elementMatchesSel handles both base and bp:base when active
+        try { return elementMatchesSel(el, p) } catch { return false }
+    }))
 }
 
 // --- Named onComplete handler registry -------------------------------------
@@ -1212,7 +1197,18 @@ export default function initListeners(root = document, throttlePerFrame) {
             })
             scrollTriggers.push(st)
         }
-        qAll("body *").filter(el => hasGClass(el, "scroll") || hasGClass(el, "scroll-progress")).forEach(el => runWithBreakpoint(el, () => setupScroll(el)))
+        // scroll / scroll-progress are breakpoint-gated per-animation, not per-element generic
+        // (m:order must not disable a plain `scroll` + `spawn-*` on <m)
+        const scrollSel = ".scroll"
+        const progressSel = ".scroll-progress"
+        qAllAllVariants(scrollSel).forEach(el => runWithBreakpointForSel(el, scrollSel, () => {
+            if (!hasGClass(el, "scroll")) return
+            setupScroll(el)
+        }))
+        qAllAllVariants(progressSel).forEach(el => runWithBreakpointForSel(el, progressSel, () => {
+            if (!hasGClass(el, "scroll-progress")) return
+            setupScroll(el)
+        }))
 
         // SplitText scroll variants: `.spawn-text-<spawn>.scroll` plays the per-part
         // tween when the element enters the viewport and reverses on exit.
@@ -1220,8 +1216,9 @@ export default function initListeners(root = document, throttlePerFrame) {
             if (isTypewriter || text === false) return
             const tSel = "." + TEXT_PREFIX + sel.slice(1)
 
-            qAll("body *").filter(el => elementMatchesSel(el, tSel) && hasGClass(el, "scroll") && !hasGClass(el, "scroll-progress")).forEach((el) => {
+            qAllAllVariants(tSel).filter(el => hasGClass(el, "scroll") && !hasGClass(el, "scroll-progress")).forEach((el) => {
                 const run = () => {
+                if (!elementMatchesSel(el, tSel)) return
                 if (isReduced(el)) return
                 const { delay, duration } = readTiming(el)
                 const ease = getEase(el)
@@ -1244,10 +1241,10 @@ export default function initListeners(root = document, throttlePerFrame) {
                     onLeave: reverseToStart,
                     onLeaveBack: reverseToStart,
                 }))
-                }; runWithBreakpoint(el, run)
+                }; runWithBreakpointForSel(el, tSel, run)
             })
 
-            qAll("body *").filter(el => elementMatchesSel(el, tSel) && hasGClass(el, "scroll-progress")).forEach((el) => {
+            qAllAllVariants(tSel).filter(el => hasGClass(el, "scroll-progress")).forEach((el) => {
                 const run = () => {
                 if (isReduced(el)) return
                 const ease = getEase(el)
@@ -1274,7 +1271,7 @@ export default function initListeners(root = document, throttlePerFrame) {
                 tl.fromTo(parts, { ...(reverse ? to : from), ...rnd },
                     { ...(rnd ? randomEnds(Object.keys(rnd)) : null), ...(reverse ? from : to), ease })
                 scrollTriggers.push(tl.scrollTrigger)
-                }; runWithBreakpoint(el, run)
+                }; runWithBreakpointForSel(el, tSel, run)
             })
         })
         ScrollTrigger.refresh()

package/dist/gclass.cjs

@@ -1325,24 +1325,15 @@ var hasGClass = (el, name) => {
 	return false;
 };
 var wrapQAll = (qAll) => (sel) => {
-	if (sel.includes(",")) {
-		const parts = sel.split(",").map((s) => s.trim()).filter(Boolean);
-		const set = /* @__PURE__ */ new Set();
-		parts.forEach((p) => wrapQAll(qAll)(p).forEach((e) => set.add(e)));
-		return [...set];
-	}
 	if (sel === "body *") return qAll(sel);
-	if (bpNames.some((bp) => sel.includes(`${bp}:`))) return qAll("body *").filter((el) => sel.split(",").some((s) => elementMatchesSel(el, s.trim())));
-	try {
-		const baseEls = qAll(sel);
-		const variantEls = qAll("body *").filter((el) => {
-			for (const bp of bpNames) if (el.classList.contains(`${bp}:${sel.slice(1)}`) && isBreakpointActive(bp)) return true;
+	const parts = sel.split(",").map((s) => s.trim()).filter(Boolean);
+	return qAll("body *").filter((el) => parts.some((p) => {
+		try {
+			return elementMatchesSel(el, p);
+		} catch {
 			return false;
-		});
-		return [.../* @__PURE__ */ new Set([...baseEls, ...variantEls])];
-	} catch {
-		return qAll(sel);
-	}
+		}
+	}));
 };
 var completeHandlers = /* @__PURE__ */ new Map();
 function registerComplete(name, fn) {
@@ -1411,23 +1402,6 @@ function initListeners(root = document, throttlePerFrame) {
 		for (const bp of bpNames) if (el.classList.contains(`${bp}:${base}`)) return bp;
 		return null;
 	};
-	const getElGateBp = (el) => {
-		for (const c of el.classList) {
-			const m = c.match(bpPrefixRE);
-			if (m) return m[1];
-		}
-		return null;
-	};
-	const runWithBreakpoint = (el, fn) => {
-		const bp = getElGateBp(el);
-		if (!bp) {
-			fn();
-			return;
-		}
-		const mq = mqForBp(bp);
-		const ret = mm.add(mq, fn);
-		breakpointContexts.push(ret);
-	};
 	const runWithBreakpointForSel = (el, sel, fn) => {
 		const bp = getGateBpForSel(el, sel);
 		if (!bp) {
@@ -2205,12 +2179,22 @@ function initListeners(root = document, throttlePerFrame) {
 		});
 		scrollTriggers.push(st);
 	};
-	qAll("body *").filter((el) => hasGClass(el, "scroll") || hasGClass(el, "scroll-progress")).forEach((el) => runWithBreakpoint(el, () => setupScroll(el)));
+	const scrollSel = ".scroll";
+	const progressSel = ".scroll-progress";
+	qAllAllVariants(scrollSel).forEach((el) => runWithBreakpointForSel(el, scrollSel, () => {
+		if (!hasGClass(el, "scroll")) return;
+		setupScroll(el);
+	}));
+	qAllAllVariants(progressSel).forEach((el) => runWithBreakpointForSel(el, progressSel, () => {
+		if (!hasGClass(el, "scroll-progress")) return;
+		setupScroll(el);
+	}));
 	spawnConfigs.forEach(({ sel, from, typewriter: isTypewriter, text }) => {
 		if (isTypewriter || text === false) return;
 		const tSel = ".spawn-text-" + sel.slice(1);
-		qAll("body *").filter((el) => elementMatchesSel(el, tSel) && hasGClass(el, "scroll") && !hasGClass(el, "scroll-progress")).forEach((el) => {
+		qAllAllVariants(tSel).filter((el) => hasGClass(el, "scroll") && !hasGClass(el, "scroll-progress")).forEach((el) => {
 			const run = () => {
+				if (!elementMatchesSel(el, tSel)) return;
 				if (isReduced(el)) return;
 				const { delay, duration } = readTiming(el);
 				const ease = getEase(el);
@@ -2238,9 +2222,9 @@ function initListeners(root = document, throttlePerFrame) {
 					onLeaveBack: reverseToStart
 				}));
 			};
-			runWithBreakpoint(el, run);
+			runWithBreakpointForSel(el, tSel, run);
 		});
-		qAll("body *").filter((el) => elementMatchesSel(el, tSel) && hasGClass(el, "scroll-progress")).forEach((el) => {
+		qAllAllVariants(tSel).filter((el) => hasGClass(el, "scroll-progress")).forEach((el) => {
 			const run = () => {
 				if (isReduced(el)) return;
 				const ease = getEase(el);
@@ -2269,7 +2253,7 @@ function initListeners(root = document, throttlePerFrame) {
 				});
 				scrollTriggers.push(tl.scrollTrigger);
 			};
-			runWithBreakpoint(el, run);
+			runWithBreakpointForSel(el, tSel, run);
 		});
 	});
 	gsap_all.ScrollTrigger.refresh();

package/dist/gclass.esm.js

@@ -1324,24 +1324,15 @@ var hasGClass = (el, name) => {
 	return false;
 };
 var wrapQAll = (qAll) => (sel) => {
-	if (sel.includes(",")) {
-		const parts = sel.split(",").map((s) => s.trim()).filter(Boolean);
-		const set = /* @__PURE__ */ new Set();
-		parts.forEach((p) => wrapQAll(qAll)(p).forEach((e) => set.add(e)));
-		return [...set];
-	}
 	if (sel === "body *") return qAll(sel);
-	if (bpNames.some((bp) => sel.includes(`${bp}:`))) return qAll("body *").filter((el) => sel.split(",").some((s) => elementMatchesSel(el, s.trim())));
-	try {
-		const baseEls = qAll(sel);
-		const variantEls = qAll("body *").filter((el) => {
-			for (const bp of bpNames) if (el.classList.contains(`${bp}:${sel.slice(1)}`) && isBreakpointActive(bp)) return true;
+	const parts = sel.split(",").map((s) => s.trim()).filter(Boolean);
+	return qAll("body *").filter((el) => parts.some((p) => {
+		try {
+			return elementMatchesSel(el, p);
+		} catch {
 			return false;
-		});
-		return [.../* @__PURE__ */ new Set([...baseEls, ...variantEls])];
-	} catch {
-		return qAll(sel);
-	}
+		}
+	}));
 };
 var completeHandlers = /* @__PURE__ */ new Map();
 function registerComplete(name, fn) {
@@ -1410,23 +1401,6 @@ function initListeners(root = document, throttlePerFrame) {
 		for (const bp of bpNames) if (el.classList.contains(`${bp}:${base}`)) return bp;
 		return null;
 	};
-	const getElGateBp = (el) => {
-		for (const c of el.classList) {
-			const m = c.match(bpPrefixRE);
-			if (m) return m[1];
-		}
-		return null;
-	};
-	const runWithBreakpoint = (el, fn) => {
-		const bp = getElGateBp(el);
-		if (!bp) {
-			fn();
-			return;
-		}
-		const mq = mqForBp(bp);
-		const ret = mm.add(mq, fn);
-		breakpointContexts.push(ret);
-	};
 	const runWithBreakpointForSel = (el, sel, fn) => {
 		const bp = getGateBpForSel(el, sel);
 		if (!bp) {
@@ -2204,12 +2178,22 @@ function initListeners(root = document, throttlePerFrame) {
 		});
 		scrollTriggers.push(st);
 	};
-	qAll("body *").filter((el) => hasGClass(el, "scroll") || hasGClass(el, "scroll-progress")).forEach((el) => runWithBreakpoint(el, () => setupScroll(el)));
+	const scrollSel = ".scroll";
+	const progressSel = ".scroll-progress";
+	qAllAllVariants(scrollSel).forEach((el) => runWithBreakpointForSel(el, scrollSel, () => {
+		if (!hasGClass(el, "scroll")) return;
+		setupScroll(el);
+	}));
+	qAllAllVariants(progressSel).forEach((el) => runWithBreakpointForSel(el, progressSel, () => {
+		if (!hasGClass(el, "scroll-progress")) return;
+		setupScroll(el);
+	}));
 	spawnConfigs.forEach(({ sel, from, typewriter: isTypewriter, text }) => {
 		if (isTypewriter || text === false) return;
 		const tSel = ".spawn-text-" + sel.slice(1);
-		qAll("body *").filter((el) => elementMatchesSel(el, tSel) && hasGClass(el, "scroll") && !hasGClass(el, "scroll-progress")).forEach((el) => {
+		qAllAllVariants(tSel).filter((el) => hasGClass(el, "scroll") && !hasGClass(el, "scroll-progress")).forEach((el) => {
 			const run = () => {
+				if (!elementMatchesSel(el, tSel)) return;
 				if (isReduced(el)) return;
 				const { delay, duration } = readTiming(el);
 				const ease = getEase(el);
@@ -2237,9 +2221,9 @@ function initListeners(root = document, throttlePerFrame) {
 					onLeaveBack: reverseToStart
 				}));
 			};
-			runWithBreakpoint(el, run);
+			runWithBreakpointForSel(el, tSel, run);
 		});
-		qAll("body *").filter((el) => elementMatchesSel(el, tSel) && hasGClass(el, "scroll-progress")).forEach((el) => {
+		qAllAllVariants(tSel).filter((el) => hasGClass(el, "scroll-progress")).forEach((el) => {
 			const run = () => {
 				if (isReduced(el)) return;
 				const ease = getEase(el);
@@ -2268,7 +2252,7 @@ function initListeners(root = document, throttlePerFrame) {
 				});
 				scrollTriggers.push(tl.scrollTrigger);
 			};
-			runWithBreakpoint(el, run);
+			runWithBreakpointForSel(el, tSel, run);
 		});
 	});
 	ScrollTrigger.refresh();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gclass-anims",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.22.2",
   "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": "./dist/gclass.cjs",