Customizing a component.
Every component is tuned with a consistent set of data-anm-* attributes, or with the matching props in React and Vue. One naming system, everywhere.
One attribute, one purpose
A component is switched on by a single selector attribute on its root, named after the component. You tune it by adding shared configuration attributes alongside it. Nothing is hidden in JavaScript.
How attributes are named
The naming is consistent across the whole library, so once you have tuned one component you can tune any of them.
data-anm-{component}- the selector on the root that turns the component on, e.g.data-anm-text-reveal.data-anm-duration,data-anm-ease,data-anm-stagger- shared configuration attributes that mean the same thing on every component.data-anm-{abbr}-{part}- marks an inner element a component needs to find, e.g.data-anm-mldm-panelon a drawer menu.
Each component lists its own attributes.
Props instead of attributes
In React and Vue the same controls are exposed as props, with the same names minus the data-anm- prefix. Attributes and props are two views of one system.
Editing the timeline directly
Attributes cover the common cases. When you want choreography the attributes don't expose, the component is plain GSAP. Open the source and edit the timeline. The code you copied is the whole component, not a wrapper around a black box.
- Animate only GPU-friendly properties: x, y, scale, rotation, opacity, clip-path.
- expo.out is the house default for UI. Reach for another ease when you have a reason.
- Keep the structure - the copied component already handles cleanup and reduced motion.
