Glaze for WP (and for BricksBuilder)

Tailwind-styleHere GSAPis animationscomprehensive for WordPress, driven entirely by HTML data attributes. This plugin wraps the tiny GlazeJS syntax layer around GSAP, and gives you a dark, flat-file-based admin UI to configure libraries, presets, breakpoints, global defaults and automatic class mappings — with first-class supportdocumentation for the Bricks builder.

---

1. What This Plugin Does

Lets you animate any element by adding an attribute like data-animate="from:opacity-0|y-50|duration-1". Loads GSAP + GlazeJS from a CDN, from a local /lib copy, or reuses a global window.gsap provided by another plugin. Provides reusable, categorized presets (preset-fadeIn) editable from the admin. Supports responsive breakpoints, global defaults, and ScrollTrigger. Can auto-attach animations to elements by CSS class/selector, without editing markup (handy for Bricks-generated wrappers). Stores everything in flat files (/config/settings.json) — no database options, no custom tables, and a clean uninstall.

---

2. Requirements & Compatibility

Requirement Notes WordPress Standard modern install (uses wp_remote_get, wp_json_encode, etc.). PHP 7.x+ (uses array_replace_recursive, arrow-free class code). Browser ES module support required (runtime uses dynamic import()). GSAP GSAP has its own license — verify commercial compliance. GlazeJS itself is MIT. Bricks Optional. Detected via bricks_is_builder(); not required.

---

3. Installation

Copy the glaze-wp-bricks folder into wp-content/plugins/. Activate Glaze for WP / Bricks fromplugin (v 1.1.0).

Glaze for WP / Bricks — Complete Documentation

Overview

Glaze for WP / Bricks is a WordPress plugin that brings Tailwind-style, declarative GSAP animations to any WordPress site, with first-class support for the PluginsBricks screen.page

Onbuilder. activationInstead of writing JavaScript animation code, you describe animations directly in HTML using data-animate attributes (or CSS classes), and the plugin's runtime translates those strings into GSAP calls via the lightweight ~3kb GlazeJS library.

Everything the plugin needs — settings, presets, breakpoints, and downloaded libraries — is stored in flat files inside the plugin directory (glaze_wpb_activate()/config and /lib). No custom database tables, options, transients, or custom post types are created, and every trace is removed cleanly on uninstall.

The plugin is authored by art10m (with Claude Opus 4.8) and licensed MIT. Note that GSAP itself carries its own license, which you should review for commercial use.

---

Core Concept

A Glaze animation is expressed as a pipe-separated string in an HTML attribute:

<div data-animate="from:opacity-0|y-50|duration-1"></div>

This is parsed into the equivalent GSAP call:

gsap.from(element, { opacity: 0, y: 50, duration: 1 });

The animation string follows the anatomy [breakpoint][selector]:state:properties, where:

State is from:, to:, or both (mapping to gsap.from, gsap.to, and gsap.fromTo). Properties are separated by pipes |, split on the dash - into name/value pairs. Breakpoints are prefixed with @name: (e.g. @tablet:from:opacity-0). Child selectors use bracket notation [&>div]: where & is the element itself. Presets are referenced with preset-name and expand into their full string.

The full syntax is documented in the bundled glaze-opus-docs-2.0.md "skill" file, which also serves as an AI-readable reference for generating presets via "Vibe Coding."

---

Installation & Activation

Upload the glaze-wp-bricks-ff2 folder to /wp-content/plugins/. Activate the plugin from the WordPress Plugins screen.

On activation (glaze_wpb_activate in glaze-wp-bricks.php), the plugin:

• Creates the /config and /lib folders.directories if missing.
• Drops ana silent index.php ("<?php // Silence is golden"golden.) into each to prevent directory listing.
• Writes a .htaccess (Deny from all) into /config to keepso the settings JSON private.is not publicly served.
• Seeds /config/settings.json with the defaults from Glaze_WPB_Settings::defaults(). if it doesn't already exist.

A

Opennew thetop-level Glaze menu item (superhero dashicon) appears in wp-the WordPress admin.

---

4. Quick Start

Go to Glaze → Libraries, keep CDN mode (zero setup).

Add an attribute to any element on the front end:

<div data-animate="from:opacity-0|y-50|duration-0.8">Hello</div>

In Bricks, add data-animate as a custom attribute on any element, or add a class like glaze-preset-fadeIn (class-based syntax).

Load the front end — the element animates in.

To preview inside the Bricks builder canvas, enable General → Run inside Bricks builder.

---

5. Writing Animations (Glaze Syntax)

Full details live in glaze-opus-docs-2.0.md. The essentials:

Anatomy: [breakpoint][selector]:state:properties

@lg:[&>div]:from:opacity-0|y-50|stagger-0.1|duration-0.5|ease-power2.out

Token Purpose from: / to: State (use both for fromTo). Every animation needs one. | Separates properties. - Splits property name / value (duration-1). . Nested property (scale.x-2). [-50] Negative / literal value. [0_0_50px_red] Value with spaces (underscores → spaces). @bp: Breakpoint prefix (e.g. @tablet:). [&>sel]: Child selector (& = the element itself). tl / tl/name Timeline container / named timeline. preset-name Expand a preset string. scrollTrigger.* Any GSAP ScrollTrigger option via dot notation. [&] "This element" (e.g. scrollTrigger.trigger-[&]).

Two input modes (configurable in General):

<!-- Data-attribute mode (default) -->
<div data-animate="from:opacity-0|duration-1"></div>

<!-- Class mode (prefix = "glaze" by default) -->
<div class="glaze-from:opacity-0|duration-1"></div>
<div class="glaze-preset-fadeIn"></div>

---

6. The Admin UIInterface

The adminsettings appscreen is a singleself-contained dark-themedsingle-page SPAapp rendered by Glaze_WPB_Admin::render(). (emptyThe panels)PHP outputs only a skeleton — a header with Reset and populated entirely by assets/admin.js. Strings are decoupled into assets/admin-strings.js under window.GlazeWPBStrings, and initial data is injected via wp_localize_script as window.GlazeWPBAdmin.

Two global actions in the header:

Save changes —buttons, serializesa thetab wholebar, formfive (empty collect()<section>) panels, and postsa ittoast tocontainer. All panel content is generated client-side by glaze_wpb_saveadmin.js., which reads two localized globals:

window.GlazeWPBAdmin — AJAX URL, nonce, current config, and library states. Resetwindow.GlazeWPBStrings — confirms,all thenUI postslabels and hint text (from glaze_wpb_resetadmin-strings.js), tokeeping restorecopy defaults.separate from logic.

FeedbackThe interface is shownstyled throughby admin.css in a bottom-rightdark toasttheme scoped under .glaze-wpb, using CSS custom properties for colors, radius, and accents. It also darkens the surrounding WordPress chrome (#gwpb-toast#wpwrap, #wpbody-content).

The five tabs are:

6.11. Libraries Tab

Controls how GSAP +and GlazeGlazeJS are loaded.loaded:

• Library mode
• CDN — CDN (loads from jsDelivr / esm.sh.sh, Fastestzero tosetup) setor up, relies on a third-party request.

Local (/lib) — serves copies stored infrom the plugin's /lib folder from your own origin. You must Download each library first. folder). Use existing global GSAP — ifwhen anotherenabled, plugin/themethe alreadyplugin loadsdoes GSAP,not enableload thisits own GSAP and Glazeinstead reuses an existing window.gsap (noe.g. from a dedicated GSAP WordPress plugin), avoiding duplicate scripts).scripts and version conflicts. A Local libraries list —card lists each registered library (GSAPgsap, core,scrolltrigger, ScrollTrigger,glaze) GlazeJSwith ESM)a has:badge showing whether a local copy exists, plus Download/Refresh and Remove buttons.

Library operations are handled by AJAX (glaze_wpb_lib) and delegated to Glaze_WPB_Libs (see Technical Processes below).

2. General

• DownloadAttributes — fetchthe adata freshattribute localname copy.(data-animate) Glaze scans, and the class prefix (glaze) for the optional class-based syntax. Change these only to avoid conflicts.
• RefreshBehavior toggles:
• Enable ScrollTrigger — re-downloadregisters anGSAP's existingScrollTrigger copyplugin for scroll-based animations.

Force GPU (afterforce3D) an— update)forces hardware-accelerated transforms. Watch DOM & re-animate — enables a Firefox-safe MutationObserver for dynamically added content (see below), with a configurable debounce (ms). RemoveRun inside Bricks builder — deleteallows animations to run live inside the localBricks copy;editing fallscanvas. backVerbose toconsole CDN.logging — logs parsing and GSAP calls for debugging.

6.2 General Tab

Data attribute — the HTML attribute Glaze scans (default data-animate). Class prefix — prefix for class-based syntax (default glaze). Enable ScrollTrigger — registers the ScrollTrigger plugin. Force GPU (force3D) — forces hardware transforms; smoother, occasionally blurs thin text. Watch DOM & re-animate — see the Firefox note; this flag is currently ignored by the runtime in favor of a safer observer. Watch debounce (ms) — delay before re-scan (only meaningful with watch). Run inside Bricks builder — allow Glaze to run in the builder canvas. Verbose console logging — logs parsed strings and GSAP calls.

6.33. Breakpoints & Defaults Tab

• Breakpoints — name/media-query pairs.pairs that power responsive prefixes like @tablet:. The name is what you reference in strings (@tablet:from:opacity-0); the special default name appliesis used when no @breakpoint:breakpoint prefix is given.
• Global defaults
  —
• Elementelement defaults —(applied as a fallback applied to every animated elementelement, (e.g. duration-0.6|ease-power2.out). Per-elementand propstl override these.

Timelinetimeline defaults — (applied to every timelineinternal (and every element is internally wrapped in one),timeline, e.g. defaults:ease-power2.out).

6.44. Presets Tab

Reusable animation strings referencedorganized viainto preset-namenamed categories (Fades, Scale, Slide, Zoom, Bounce, SVG Draw, Stagger, etc.). Categories areexist purelyonly forto organizingorganize the admin UI — they dohave notno affect the front front-end (alleffect presetsand are flattened into a single map by flatten_presets() before enqueue).delivery. Preset names must be unique across all categories.

TheYou defaultsreference shipa preset with a large library: Fades, Scale, Slide, Zoom, Bounce, Elastic, Attention Seekers, Rotate & Flip, Blur, Skew, Scroll, Stagger, and several SVG categoriespreset-name (Draw,or Fill,glaze-preset-name Transform,in Stagger,class Lines)mode).

6.55. Mappings Tab

AutomaticallyAutomatic class mappings attach an animation to every element matching a CSS classclass/selector orwithout editing each element's markup — useful for markup you don't control (e.g. Bricks-generated icon wrappers). Each row pairs a selector — no data-animate needed. Each row:

CSS class or selector — (e.g. .fv-a-icon or bare fv-a-icon.) Animationwith an animation string or preset-name — e.g. glaze-preset-svgStaggerFadeIn.

The runtime adds the given classes to matched elements before Glaze runs, and re-applies on dynamically added nodes.

---

7.Saving, ArchitectureResetting, &and TechnicalData InternalsFlow

7.1

When Fileyou /click ClassSave Mapchanges,

admin.js's collect() walks Filethe Responsibilityrendered DOM, rebuilds a config object (validating and defaulting empty fields), and POSTs it as JSON to the glaze-wp-bricks.phpglaze_wpb_save Bootstrap:AJAX constants,action. activationOn hook,the requires,server, instantiatesGlaze_WPB_Admin::ajax_save(): Admin

Runs the guard() check (capability + Frontendnonce). onDecodes the JSON payload. Merges it onto the defaults with plugins_loadedarray_replace_recursive(). so the includes/class-glaze-settings.phpstructure Defaults,always load/merge/savestays ofintact and new keys survive. Persists it via settings.jsonGlaze_WPB_Settings::save(), presetwhich flattening.writes pretty-printed JSON includes/class-glaze-libs.php Library registry, CDN/local URL resolution, download/refresh/delete, ESM import rewriting. includes/class-glaze-admin.php Admin menu, asset enqueue, localization, three AJAX endpoints, panel markup. includes/class-glaze-frontend.php Front-end enqueue of GSAP/ScrollTrigger/runtime + inline config payload. uninstall.php Recursively deletes /config and /lib. assets/admin.js Admin SPA (render + collect + AJAX). assets/admin-strings.js All admin UI copy. assets/admin.css Dark admin theme. assets/runtime.js Front-end orchestrator that waits for GSAP, loads Glaze, applies mappings, prepares SVGs, and observes the DOM. glaze-opus-docs-2.0.md Glaze syntax cheat sheet (the AI "skill" reference).

7.2 Data Storage (Flat Files)

No database usage. All configuration lives into /config/settings.json. as pretty-printed JSON

Reset (JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODEglaze_wpb_reset).

Downloaded libraries live in /lib. Both folders are protected by an index.php stub; /config also gets a .htaccess Deny from all.

7.3 Settings Lifecycle

defaults()  ──►  save(defaults)  ──►  settings.json (on activation)

get():
  settings.json ──► json_decode ──► array_replace_recursive(defaults(), data)
                                     └─ guarantees new keys always exist

save($data):
  wp_mkdir_p(config) ──► wp_json_encode ──► file_put_contents(settings.json)

ajax_save:
  wp_unslash($_POST['config']) ──► json_decode ──►
  array_replace_recursive(defaults(), data) ──► save()

array_replace_recursive on both read and save is deliberate: it keeps the structure forward-compatible when new default keys are introduced in updates.

7.4 Library Management (CDN vs Local)

Glaze_WPB_Libs::registry() defines three libraries, each with a cdn URL (used at runtime), a download URL (fetched for the local copy), a local file name, and a type (script or module).

url($key, $mode) returns the local /lib URL only if mode === 'local' andrewrites the file physicallywith exists;defaults() otherwiseand re-renders the UI.

Glaze_WPB_Settings::get() always reads the file and merges it returnsonto the CDNdefaults, URL.so Thisa meanscorrupt localor modepartial gracefullyfile degradessafely falls back to CDN for any not-yet-downloaded lib.

download($key) uses wp_remote_get (30s timeout, 5 redirects), validates the HTTP 200 and non-empty body, then writes to /lib.

ESM import rewriting (important): esm.sh often returns a thin ES module "shim" whose specifiers are root-relative, e.g.:defaults.

export
* from "/glazejs@2.0.1/es2020/glazejs.bundle.mjs";

That only resolves against the CDN's own origin. Since we serve the saved file from the WordPress origin, absolutize_root_relative_imports() rewrites any from "/..." / import "/..." / import("/...") specifier into a fully qualified URL pointing back at the original CDN origin, so the locally served module keeps working.

7.5

The Front-endEnd Enqueue Pipeline

Runtime

Glaze_WPB_Frontend::enqueue() (hookedruns aton wp_enqueue_scripts, (priority 20): and orchestrates loading:

1. It

   Loadsreads configthe viamerged config. If Glaze_WPB_Settings::get()loadInBuilder.

is off

Bailsand the code is running inside the Bricks builder unless loadInBuilder is on (bricks_is_builder()).

, it bails out entirely.

IfUnless useExternalGsap is false,set, it enqueues glaze-gsapGSAP (and glaze-scrolltriggerScrollTrigger, whenif enabled) from the URL resolved CDN/local URL. Ifby trueGlaze_WPB_Libs::url() for the active mode.

It enqueues runtime.js, it loads nothing — relyingdepending on the globalGSAP gsap. scripts. It

Enqueuesinjects a assets/runtime.jswindow.GlazeWPBricks withpayload (via wp_add_inline_script(..., 'before')) containing the collectedGlaze GSAPmodule deps.

Injects the runtime config as an inline before script:

window.GlazeWPBricks = { glazeUrl,URL, settings, breakpoints, defaults, presets, animationMappings };

Note presets is the flattened mappresets, (categoriesand dropped).

animation mappings.

7.6 The Runtime (

runtime.js)

Anthen asyncexecutes IIFEthis that orchestrates everything on the front end:flow:

Reads window.GlazeWPBricks; sets up log/warn gated by debug. Waits for DOMContentLoaded, if needed. waitForGSAP()then polls (viafor requestAnimationFramegsap, (up to a 5s timeout) until window.gsap exists — this is what makes external GSAP and async CDN loads work reliably.. AppliesOptionally applies force3D config and registers ScrollTrigger if enabled and present.ScrollTrigger. Runs applyAnimationMappings(document)) — injectsfor mappingeach classesmapping, intoit queries matching elements.elements and appends the animation class(es). Runs prepareSVGs(document)) — for SVGs flagged as "draw" animations, it measures each strokeable child's total length via getTotalLength() and sets upstrokeDasharray/strokeDashoffset stroke-drawso SVGs.line-drawing effects work. Dynamically import()simports the Glaze ESM module from glazeUrl (CDN or local). Builds glazeConfig and calls glaze(...)glazeConfig), guardedpassing byGSAP acore, runningthe flagdata toattribute, preventclass re-entrancy.name, breakpoints, defaults, and presets. Installs a childList MutationObserver for dynamic content. DispatchesFires a glazeReady window event withexposing {glaze, glaze,gsap, gsap,the config, and a reinit }function so other scriptsintegrations can hookre-run inGlaze /after re-init.their own AJAX loads.

7.7 The Firefox "Watch"looping" Problemsafeguard

A key technical detail: Glaze's built-inown native watch mode usesis andeliberately never enabled. Its internal observer that also reacts to attribute mutations.mutations, Becauseand since GSAP rewrites inline styles on every tick, native watch would re-triggerstrigger Glaze on its own output →— a mutate → re-init → mutate loop that Firefox renders as endlessly restarting animations.

ThereforeInstead, the runtimeWatch deliberatelyDOM ignores& watchEnabled.re-animate Iftoggle it's turned on in the admin, the runtime logsdrives a warningcustom, andFirefox-safe insteadMutationObserver handlesthat dynamiclistens contentfor withchildList achanges childList-only MutationObserver(never on document.body (subtree: true)attributes). When anew relevantnodes nodeappear, isit addedchecks (anwhether <svg>,they anare elementSVGs withor match any mapping, and if so schedules a glazedebounced class, or one matching a mapping), it debouncesre-init (300ms) then re-preparespreparing SVGs, re-runsrunning Glaze, and refreshesrefreshing ScrollTrigger.

ScrollTrigger).

Practical takeaway:When the "Watchtoggle DOM"is toggleoff, no observer is attached at all. Either way, scheduleReinit remains exposed through the glazeReady event for manual re-runs.

---

Technical Processes in the admin is effectively a no-op; dynamic content is always covered by the safe childList observer.

Detail

7.8Library SVGmanagement Preparation(Glaze_WPB_Libs)

ForA stroke-drawstatic animations,registry() andefines SVG'each library's pathsruntime needCDN URL, download URL, local filename, and type (script vs stroke-dasharraymodule / stroke-dashoffset set to their measured length. runtime.js):

• prepareSVGs()gsap finds→ candidate SVGs (by class/data-animategsap.min.js hints)from and, if isStrokeDrawSVG() matches (/draw/i or strokeDashoffset), walks each strokeable child (path, line, polyline, polygon, circle, ellipse, rect).jsDelivr.
• prepareStrokeElement(scrolltrigger → ScrollTrigger.min.js from jsDelivr.

glaze → glaze.module.js, downloaded from esm.sh/glazejs?bundle&target=es2020.

url($key, $mode) returns the local /lib URL when mode is local and a local copy exists, otherwise the CDN URL. is_local() callssimply checks whether the local file exists.

download($key) fetches the source via getTotalLength(wp_remote_get() (30s timeout, following redirects), setsvalidates dasharray/offsetthe HTTP status and non-empty body, and writes it into /lib.

ESM import rewriting — a notable subtlety: esm.sh often returns a thin ESM shim whose specifiers are root-relative (e.g. export * from "/glazejs@2.0.1/es2020/glazejs.bundle.mjs";). Those only resolve against the CDN's origin. Since the plugin serves the file from your own WordPress domain, absolutize_root_relative_imports() uses a regex to rewrite from/import specifiers that length,begin defaultswith stroke/ tointo fully-qualified URLs pointing back at the CDN origin, so the locally-served module still resolves its dependencies correctly.

delete($key) unlinks the local file (returning currentColortrue if none,it andwas storesalready absent).

Preset flattening

dataset.pathLengthGlaze_WPB_Settings::flatten_presets() so it never re-processescollapses the samecategorized element.preset structure (category → { name → string }) into a single flat name → string map, which is what Glaze actually consumes at runtime. This is why preset names must be globally unique.

7.9 Automatic Class MappingsSecurity

• A mapping is { class, animation } (legacy { selector } also honored via getMappingSelector()).

addAnimationClasses() splits the animation string on spaces and adds each as a class (idempotently), returning how many were newly added. applyAnimationMappings() runs once at init over the document; invalid selectors are caught and warned. checkAndApplyMappings() runs per added node in the observer so dynamically injected elements (e.g. Bricks output) also get mapped.

7.10All AJAX &handlers Security Model

Three endpoints, all wp_ajax_* (logged-in only):

Action Method glaze_wpb_save ajax_save() glaze_wpb_lib ajax_lib() (op: download / delete) glaze_wpb_reset ajax_reset()

Every handler callscall guard(), which requires:

requires

Capabilitythe manage_options, capability and a valid glaze_wpb_nonce, returning a 403 JSON error otherwise. AThe valid/config noncefolder is protected with .htaccess and an index.php silence file. In admin.js, all stored, user-editable values (breakpoint media queries, preset strings, selectors, names) are passed through glaze_wpb_nonceescHtml() / escAttr() helpers before being injected via check_ajax_refererinnerHTML., preventing broken markup and stored XSS. Toggle labels, hints, and attribute values are all escaped at their injection points.

Failure → wp_send_json_error(..., 403). Library op/key are sanitized with sanitize_key(). The save payload is wp_unslash-ed, JSON-decoded, validated as an array, and merged onto defaults before writing.

7.11 Uninstall Behavior

uninstall.php (guarded byruns WP_UNINSTALL_PLUGINglaze_wpb_rrmdir()) to recursively removesdelete boththe /config and /lib. Sincedirectories and everything inside them. Because the plugin storesnever notouches options,the CPTs,options table, transients, or transients,custom uninstallingpost leavestypes, nothing behind.else needs cleanup — the removal is complete.

---

8.Writing VibeAnimations: CodingQuick (Editing JSON Directly)Reference

YouOnce canconfigured, bypassadd theanimations UIdirectly in your markup or Bricks elements:

<!-- Simple fade up -->
<div data-animate="from:opacity-0|y-30|duration-0.6"></div>

<!-- Using a preset -->
<div data-animate="preset-fadeInUp"></div>

<!-- Responsive: only on tablet and editup -->
<div data-animate="@tablet:from:opacity-0|scale-0.9"></div>

<!-- Staggered children -->
<div data-animate="[&>*]:from:opacity-0|y-20|stagger-0.1|duration-0.5">
  <div>One</div><div>Two</div><div>Three</div>
</div>

<!-- Scroll-triggered -->
<div data-animate="from:opacity-0|y-40|scrollTrigger.trigger-[&]|scrollTrigger.start-[top_85%]"></div>

<!-- SVG line-drawing -->
<svg class="glaze-preset-svgDrawIn"> ... </svg>

Syntax notes: use /config/settings.json[-50] directlyfor negative/literal values, underscores for values with spaces (or[top_center]), havedots for nested props (scale.x-2), and tl to make an AIelement doa it)timeline tocontainer. addConsult many presets at once. Thethe bundled glaze-opus-docs-2.0.md isfor the canonicalexhaustive syntax referencereference.

---

Bricks-Specific Notes

Bricks-generated markup (thelike AIicon "skill").wrappers) Aftercan editing,be theanimated next front-end load picks up the changes; the admin also reflects them because get() merges the file over defaults.

Because .htaccess denies public web access to /config, editing is doneglobally via the fileMappings systemtab /without SFTP,editing notindividual overelements.

HTTP.Enable Run inside Bricks builder only if you want to preview animations live in the canvas; leaving it off avoids distracting replays on every edit. The runtime's childList observer specifically watches for components Bricks injects dynamically, applying mappings and re-initializing Glaze as they appear (when Watch DOM is enabled).

---

9. Extending the PluginTroubleshooting

• AddAnimations adon't libraryrun: —confirm addGSAP anis entry to Glaze_WPB_Libs::registry() with label, cdn, download, file, type. It automatically appears in the Libraries tab and gets download/refresh/remove buttons.

Change defaults — edit Glaze_WPB_Settings::defaults(). Existing installs gain the new keys automatically thanks to array_replace_recursive. Hook glazeReady — listen on window for glazeReady to access { glaze, gsap, config, reinit }; call detail.reinit() after your own DOM injections.

window.addEventListener('glazeReady',loading ({ detail }) => {
  console.log('Glaze up with', detail.gsap.version);
  // detail.reinit(); // after injecting new animated markup
});

---

10. Troubleshooting

Symptom Likely cause / fix Nothing animates Check the front end actually loads GSAP. With Use external GSAP on, ensure a global gsap exists. Enable debug and watchcheck the console for [Glaze]. GSAP not found. in console 5s timeout elapsed — GSAP never loaded. Verify CDN reachabilitydetected), or downloadthat localuseExternalGsap copies.matches your actual Animationssetup. loopEnable endlesslyVerbose inconsole Firefox Expected with Glaze's native watch; the runtime already disables it. Don't attemptlogging to re-enablesee watch.parsed strings and GSAP calls. Local mode stillnot hitsworking: theensure CDNyou Theclicked Download for each library wasn't downloaded yet —first; url() falls back to CDN until thea filelocal existscopy inexists. /lib.Settings Locally served Glaze module fails to import Re-download it; the plugin rewrites root-relative ESM specifiers on download (absolutize_root_relative_imports). Nothing shows in the Bricks builder Enable General → Run inside Bricks builder. SVG draw effect doesn'won't run Ensure the SVG class/data-animate contains a draw / strokeDashoffset hint so prepareSVGs targets it. Can't save settings /config not writable —save: the error toast reports"Could not write /config/settings.json" indicates a file-permission issuesproblem on the settings.json/config folder. Scroll animations inert: verify Enable ScrollTrigger is on and your preset includes scrollTrigger.trigger-[&]. Dynamic/AJAX content not

---

11. Configuration Reference

Top-level keys of settings.json (see Glaze_WPB_Settings::defaults()):

Key Type Meaning libraryMode "cdn" | "local" Source of GSAP/Glaze at runtime. useExternalGsap bool Reuse a global gsap instead of enqueuing our own. settings.dataAttribute string Attribute Glaze scans (default data-animate). settings.className string Class-mode prefix (default glaze). settings.enableScrollTrigger bool Enqueue + register ScrollTrigger. settings.force3D bool GSAP config({force3D}). settings.watchEnabled bool Ignored by runtimeanimating: (seeenable §7.7).Watch DOM & settings.watchDebouncere-animate, intor Debouncelisten ms (only meaningful with watch). settings.loadInBuilder bool Run insidefor the BricksglazeReady builder.event and call settings.debug bool Verboseits [Glaze]reinit consoleafter logging.your own content breakpointsloads. object name → media query; default is the fallback. defaults.element string Fallback props for every element. defaults.tl string Defaults applied to every timeline. animationMappings array { class, animation } auto-attach rules. presets object Category → { name → string } (flattened at enqueue).

---

Author: art10m (Claude Opus 4.8) · License: MIT (GlazeJS). GSAP is licensed separately — verify commercial compliance.