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

package/AnimToggle.js

@@ -1,7 +1,8 @@
   import initListeners from './Listeners.js'
   import { defaults, animations } from './Config.js'
   import { gsap } from 'gsap'
-
+import { GSDevTools } from 'gsap/all'
+gsap.registerPlugin(GSDevTools)
 // localStorage key controlling whether the GSAP animation system is mounted.
 const STORAGE_KEY = 'gclass-animations-enabled'
 // localStorage key for a forced reduced-motion override (see
@@ -181,6 +182,43 @@ const readBootTime = (els, fallback) => {
   return max ?? fallback
 }
 
+/**
+ * Create GSDevTools UI styled like doc/ (Header.jsx:8 slate-800/50 ring + layout.js:85 slate-950).
+ * Accepts: gclassDev() | gclassDev("width:50%; bottom:30px") | gclassDev({width:"50%"}) | gclassDev({css:{}, minimal:true, animation:tl})
+ */
+export function gclassDev(cssOrOpts){
+  const docCss = {
+    backgroundColor: "rgba(15,23,42,0.96)", // slate-900 ~ doc bg-slate-950/900
+    border: "1px solid rgba(51,65,85,0.8)", // ring-slate-700 Header.jsx:8
+    borderRadius: "12px", // rounded-xl
+    boxShadow: "0 0 0 1px rgba(51,65,85,0.5), 0 8px 32px rgba(0,0,0,0.45)",
+    backdropFilter: "blur(8px)",
+    color: "#e2e8f0", // slate-200
+    bottom: "16px",
+    width: "92%",
+    maxWidth: "860px",
+    left: "50%",
+    transform: "translateX(-50%)",
+  }
+  let opts = {}
+  let css = docCss
+  if (typeof cssOrOpts === "string") {
+    css = cssOrOpts // verbatim string: "width:50%; bottom:30px"
+  } else if (cssOrOpts && typeof cssOrOpts === "object") {
+    // {width:"50%", bottom:"30px"} shorthand OR {css:{}, animation, minimal,...} full opts
+    const hasFullOpts = "css" in cssOrOpts || "animation" in cssOrOpts || "container" in cssOrOpts || "minimal" in cssOrOpts || "id" in cssOrOpts
+    if (hasFullOpts) {
+      const { css: userCss, ...rest } = cssOrOpts
+      opts = rest
+      if (typeof userCss === "string") css = userCss
+      else if (userCss && typeof userCss === "object") css = { ...docCss, ...userCss }
+    } else {
+      css = { ...docCss, ...cssOrOpts }
+    }
+  }
+  return GSDevTools.create({ css, ...opts })
+}
+
 // Boots the GSAP animation system unless animations are disabled (stored "off"
 // or reduced-motion fallback with no explicit choice). Idempotent: calling it
 // again tears down any previous run first.

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to `gclass-anims` will be documented in this file.
 
+## [1.0.0-beta.23] - 2026-09-09
+- Added `gclassDev()` helper — `AnimToggle.js:185` `gclassDev(cssOrOpts)` wraps `GSDevTools.create()` with doc-styled defaults (`slate-900` `rgba(15,23,42,0.96)`, `slate-700` border, `rounded-xl`, `backdrop-blur`). Accepts `gclassDev()` (defaults), `gclassDev("width:50%; bottom:30px")` (CSS string), `gclassDev({width:"50%"})` (style object shorthand), or `gclassDev({css, animation, minimal, ...})` (full `GSDevTools` opts). Registers `GSDevTools` via `gsap.registerPlugin(GSDevTools)` (`AnimToggle.js:4`), re-exported from `index.js:1` and typed in `index.d.ts:35`.
+
+## [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();
@@ -2954,6 +2947,7 @@ function initListeners(root = document, throttlePerFrame) {
 }
 //#endregion
 //#region AnimToggle.js
+gsap.gsap.registerPlugin(gsap_all.GSDevTools);
 var STORAGE_KEY = "gclass-animations-enabled";
 var REDUCED_KEY = "gclass-reduced-motion";
 var reducedMotionQuery = typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
@@ -3086,6 +3080,46 @@ var readBootTime = (els, fallback) => {
 	}
 	return max ?? fallback;
 };
+/**
+* Create GSDevTools UI styled like doc/ (Header.jsx:8 slate-800/50 ring + layout.js:85 slate-950).
+* Accepts: gclassDev() | gclassDev("width:50%; bottom:30px") | gclassDev({width:"50%"}) | gclassDev({css:{}, minimal:true, animation:tl})
+*/
+function gclassDev(cssOrOpts) {
+	const docCss = {
+		backgroundColor: "rgba(15,23,42,0.96)",
+		border: "1px solid rgba(51,65,85,0.8)",
+		borderRadius: "12px",
+		boxShadow: "0 0 0 1px rgba(51,65,85,0.5), 0 8px 32px rgba(0,0,0,0.45)",
+		backdropFilter: "blur(8px)",
+		color: "#e2e8f0",
+		bottom: "16px",
+		width: "92%",
+		maxWidth: "860px",
+		left: "50%",
+		transform: "translateX(-50%)"
+	};
+	let opts = {};
+	let css = docCss;
+	if (typeof cssOrOpts === "string") css = cssOrOpts;
+	else if (cssOrOpts && typeof cssOrOpts === "object") {
+		if ("css" in cssOrOpts || "animation" in cssOrOpts || "container" in cssOrOpts || "minimal" in cssOrOpts || "id" in cssOrOpts) {
+			const { css: userCss, ...rest } = cssOrOpts;
+			opts = rest;
+			if (typeof userCss === "string") css = userCss;
+			else if (userCss && typeof userCss === "object") css = {
+				...docCss,
+				...userCss
+			};
+		} else css = {
+			...docCss,
+			...cssOrOpts
+		};
+	}
+	return gsap_all.GSDevTools.create({
+		css,
+		...opts
+	});
+}
 function initAnimations(throttlePerFrame, fps) {
 	let effThrottle = currentThrottle;
 	let effFps = currentFps;
@@ -3223,6 +3257,7 @@ exports.expandV = expandV;
 exports.expandmove = expandmove;
 exports.finalOpacity = finalOpacity;
 exports.flip = flip;
+exports.gclassDev = gclassDev;
 exports.gclassOpts = gclassOpts;
 exports.getGClassConfig = getGClassConfig;
 exports.hover = hover;

package/dist/gclass.esm.js

@@ -1,5 +1,5 @@
 import { gsap } from "gsap";
-import { DrawSVGPlugin, Flip, MotionPathPlugin, ScrambleTextPlugin, ScrollTrigger, SplitText, TextPlugin } from "gsap/all";
+import { DrawSVGPlugin, Flip, GSDevTools, MotionPathPlugin, ScrambleTextPlugin, ScrollTrigger, SplitText, TextPlugin } from "gsap/all";
 //#region Config.js
 var defaults = {
 	orderDivide: 5,
@@ -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();
@@ -2953,6 +2946,7 @@ function initListeners(root = document, throttlePerFrame) {
 }
 //#endregion
 //#region AnimToggle.js
+gsap.registerPlugin(GSDevTools);
 var STORAGE_KEY = "gclass-animations-enabled";
 var REDUCED_KEY = "gclass-reduced-motion";
 var reducedMotionQuery = typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
@@ -3085,6 +3079,46 @@ var readBootTime = (els, fallback) => {
 	}
 	return max ?? fallback;
 };
+/**
+* Create GSDevTools UI styled like doc/ (Header.jsx:8 slate-800/50 ring + layout.js:85 slate-950).
+* Accepts: gclassDev() | gclassDev("width:50%; bottom:30px") | gclassDev({width:"50%"}) | gclassDev({css:{}, minimal:true, animation:tl})
+*/
+function gclassDev(cssOrOpts) {
+	const docCss = {
+		backgroundColor: "rgba(15,23,42,0.96)",
+		border: "1px solid rgba(51,65,85,0.8)",
+		borderRadius: "12px",
+		boxShadow: "0 0 0 1px rgba(51,65,85,0.5), 0 8px 32px rgba(0,0,0,0.45)",
+		backdropFilter: "blur(8px)",
+		color: "#e2e8f0",
+		bottom: "16px",
+		width: "92%",
+		maxWidth: "860px",
+		left: "50%",
+		transform: "translateX(-50%)"
+	};
+	let opts = {};
+	let css = docCss;
+	if (typeof cssOrOpts === "string") css = cssOrOpts;
+	else if (cssOrOpts && typeof cssOrOpts === "object") {
+		if ("css" in cssOrOpts || "animation" in cssOrOpts || "container" in cssOrOpts || "minimal" in cssOrOpts || "id" in cssOrOpts) {
+			const { css: userCss, ...rest } = cssOrOpts;
+			opts = rest;
+			if (typeof userCss === "string") css = userCss;
+			else if (userCss && typeof userCss === "object") css = {
+				...docCss,
+				...userCss
+			};
+		} else css = {
+			...docCss,
+			...cssOrOpts
+		};
+	}
+	return GSDevTools.create({
+		css,
+		...opts
+	});
+}
 function initAnimations(throttlePerFrame, fps) {
 	let effThrottle = currentThrottle;
 	let effFps = currentFps;
@@ -3196,4 +3230,4 @@ function initAnimations(throttlePerFrame, fps) {
 	cleanup = initListeners(document, effThrottle);
 }
 //#endregion
-export { SpawnH, SpawnV, animatecss, animations, bell, bounce, countTargetVars, countUp, curtainHorizontal, curtainVertical, customAnims, defaults, disableReducedMotion, drawsvg, drawsvgSplit, enableReducedMotion, expandA, expandDown, expandH, expandLeft, expandRight, expandUp, expandV, expandmove, finalOpacity, flip, gclassOpts, getGClassConfig, hover, initAnimations, initListeners, magnet, magnet3d, marquee, normalize, pulse, radiate, registerComplete, reset, scramble, scrambleSegments, scrambleVars, shake, spawnBlur, spawnClipReveal, spawnFade, spawnSpinCCW, spawnSpinCW, spawnXDown, spawnXUp, spawnYLeft, spawnYRight, spinCCW, spinCW, splitPaths, stashText, subscribeGClassConfig, toggleAnimations, typewriter, verticalmove };
+export { SpawnH, SpawnV, animatecss, animations, bell, bounce, countTargetVars, countUp, curtainHorizontal, curtainVertical, customAnims, defaults, disableReducedMotion, drawsvg, drawsvgSplit, enableReducedMotion, expandA, expandDown, expandH, expandLeft, expandRight, expandUp, expandV, expandmove, finalOpacity, flip, gclassDev, gclassOpts, getGClassConfig, hover, initAnimations, initListeners, magnet, magnet3d, marquee, normalize, pulse, radiate, registerComplete, reset, scramble, scrambleSegments, scrambleVars, shake, spawnBlur, spawnClipReveal, spawnFade, spawnSpinCCW, spawnSpinCW, spawnXDown, spawnXUp, spawnYLeft, spawnYRight, spinCCW, spinCW, splitPaths, stashText, subscribeGClassConfig, toggleAnimations, typewriter, verticalmove };

package/index.d.ts

@@ -32,6 +32,11 @@ export function toggleAnimations(): void
 export function enableReducedMotion(): void
 /** Clear the forced reduced-motion override and reload. */
 export function disableReducedMotion(): void
+/**
+ * Create GSDevTools UI styled like doc/ (slate-900 / slate-800 ring).
+ * Accepts: gclassDev() | gclassDev("width:50%; bottom:30px") | gclassDev({width:"50%"}) | gclassDev({css, animation, minimal, ...GSDevTools opts})
+ */
+export function gclassDev(cssOrOpts?: string | Record<string, string> | Record<string, any>): any
 
 // --- Listeners -------------------------------------------------------------
 

package/index.js

@@ -1,4 +1,4 @@
-export { initAnimations, gclassOpts, getGClassConfig, subscribeGClassConfig, toggleAnimations, enableReducedMotion, disableReducedMotion } from './AnimToggle.js'
+export { initAnimations, gclassOpts, getGClassConfig, subscribeGClassConfig, toggleAnimations, enableReducedMotion, disableReducedMotion , gclassDev} from './AnimToggle.js'
 export { default as initListeners, registerComplete } from './Listeners.js'
 export { customAnims } from './CustomAnims.js'
 export { defaults, animations, normalize } from './Config.js'

package/package.json

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