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

package/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 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`.

package/Listeners.js

@@ -1197,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.
@@ -1205,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)
@@ -1229,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)
@@ -1259,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

@@ -1402,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) {
@@ -2196,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);
@@ -2229,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);
@@ -2260,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

@@ -1401,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) {
@@ -2195,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);
@@ -2228,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);
@@ -2259,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.1",
+  "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",