Verified identifiers

How to use this page

Copy from here. Do not reconstruct from memory, and do not “correct” a name that looks misspelled. Several of these read like typos and are not: fs-mirrorinput-element, toc-subitems, aria-label="Breadcrumb". Attribute selectors are case-sensitive, and a wrong identifier does not throw an error — the script simply never finds the element, so the reader gets silence and no way to debug it.

If an identifier is not on this page, say so. Do not supply a plausible-looking substitute.

Names marked presence only take no value: the attribute’s existence is the signal.

Script-driven components (fc-*)

These are the highest-risk names on the page, because they are the contract between markup you write and a script you don’t read.

fc-image-scrubbing — canvas image sequence on scroll

Provenance: apple-style-image-sequence-webflow · cloneable

fc-disintegration — scatter-into-fragments on scroll

Note the end default differs from fc-image-scrubbing: bottom top, not bottom bottom.

Provenance: gsap-disintegration-effect-webflow · cloneable

fc-draggable-card — throwable card stack

wrapper goes on the drag-zone div, component on each card, reset on the reset button.

Provenance: build-gsap-draggable-cards-webflow · cloneable

Presence-only markers

Both are found with document.querySelectorAll('[fc-…-button]'), so the class name is irrelevant — that is the point of them.

fc-gsap-staggered — no-code staggered reveal

The exception to the naming pattern: only the marker is prefixed. Every option is a bare attribute name. Do not “complete” them into fc-gsap-staggered-each and friends — that is wrong.

each and amount are mutually exclusive: if amount is set, each is ignored.

offset-y, not offsetY — the lesson prose has the camelCase form, which is wrong. HTML lower-cases attribute names, so offsetY arrives as offsety and never matches. This is a real identifier error, caught 2026-07-27; the cloneable is authoritative.

Provenance: no-code-gsap-staggered-animations-webflow · cloneable · names confirmed by the corpus author, since the lesson carries no attribute table.

Interaction-targeting attributes

Used with the target/filter/reference composition, never with a class. See Target filters — resolving a target relative to the trigger.

data-animate carries different value vocabularies in different builds. It is a convention, not a global contract — check the lesson before assuming a value.

Class names

Every class a set action adds or removes must stay applied to something in your style guide. Otherwise Webflow flags it as unused and a style cleanup deletes it — publishing keeps it, a tidy-up does not. This applies to overflow-hidden, in-view, dark-mode, theme-transition, is-sticky and on-hover. See A style cleanup deletes the classes your interactions toggle.

Variables

Webflow variables (you create these; the name is yours to match)

Webflow-generated CSS variable names

--_cards---number-of-columns is Webflow’s generated name for the number-of-columns variable in the cards collection. Three dashes in the middle, two at the start. This form is generated, not chosen — read it out of the Designer’s Copy CSS rather than deriving it.

Custom CSS variables in the embeds

Configuration knobs, meant to be tuned:

Internal, computed — do not hand-edit:

• --index, --linear-part, --expo-part, --final-curve — master-webflow-staggered-scroll-animations
• --i, --x, --y, --shift-x, --shift-y — how-to-build-cms-scatter-animations-webflow
• --move-factor, --columns, --rows — the CSS-side names, which must match the Webflow variable names above

CMS field names — 3D cube gallery

order (integer, max 6) · origin-x, origin-y (labelled Origin Left / Origin Top) · move-x, move-y, move-z · rotate-x, rotate-y, rotate-z.

Rotate fields are integers, move fields are decimals. Positioning faces in 3D needs that precision; small errors read as visibly misaligned faces. Provenance: build-3d-cms-cubic-gallery-webflow.

SVG ids and selectors

The prism script selects its filter primitives by their in values — feOffset[in=red], feOffset[in=green], feOffset[in=blue]. Rename red/green/blue in the filter and the selectors stop matching.

Runtime handles from the glass build: window.__glassNodes, window.__glassMapHref, the glass:filters-ready custom event, and MAP_URL at the top of the loader script.

Webflow platform identifiers

ARIA and semantic attributes

Script event names used for keyboard parity in the prism and glass builds: pointerenter, pointerleave, focus, blur — never mouseenter alone, or keyboard users lose the effect.

Script constants

Tunable, and named exactly like this in the cloneables:

• Prism: DX_RED, DY_RED, DX_GREEN, DY_GREEN, DX_BLUE, DY_BLUE, DURATION, EASE
• Glass: HOVER_SCALE, HOVER_TRANSF_SCALE, HOVER_BLUR, DURATION, EASE, MAP_URL

Why this page exists — the documented failure

Every identifier above was copied from a cloneable, because reconstructing them from video transcripts provably produces wrong names. The Academy code-gap pass (D44) caught nine of them across the wider corpus. Only one falls inside this KB’s scope, but the failure modes generalise, and they are what to guard against:

Rows one to seven come from Academy lessons outside this KB’s GSAP scope and are listed as evidence of the failure class. The last three are in scope. Row eight: webflow-glassy-button-svg-gsap, where primitiveUnits="objectBoundingBox" makes every value a fraction of the button’s own box — which is why stdDeviation: 0.02 and scale: 0.8 are correct and the plausible “1–5” and “20+” ranges were wrong. Rows nine and ten: no-code-gsap-staggered-animations-webflow, both found on 2026-07-27 — the first is an error in the lesson prose, the second is an error this KB nearly made, by reasoning from the naming convention every other component follows. The convention is real; this component just doesn’t follow it.

Not one of these throws an error. Every one produces an element that is never found, a variable that resolves to nothing, or a filter tuned by three orders of magnitude — and a reader with no way to tell why.