> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/reference/utilities/effects.md). # Effect utilities Utilities for visual effects: enter/exit animations, staggering, attention animations, text shimmer and stroke, gradient borders, and gradient masks. Utilities for visual effects: enter/exit animations, staggering, attention animations, text shimmer and stroke, gradient borders, and gradient masks. | Class | What it does | | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `animate-in` / `animate-out` | Runs the enter / exit animations composed by the classes below. Based on `tailwindcss-animate` | | `fade-in-{opacity}` / `fade-out-{opacity}` | Animate opacity from / to the value (default `0`) | | `slide-in-from-{top\|bottom\|left\|right}-{distance}` | Animate translate in from the side (default `100%`; corners like `-top-left` also exist) | | `slide-out-to-{side}-{distance}` | Animate translate out to the side | | `scale-in-{scale}` / `scale-out-{scale}` | Animate scale from / to the value (default `0`; `-x` / `-y` for one axis) | | `spin-in-{angle}` / `spin-out-{angle}` | Animate rotation from / to the angle (default `30deg`) | | `blur-in-{blur}` / `blur-out-{blur}` | Animate a blur filter from / to the value | | `draw-in-{n}` / `draw-out-{n}` | Animate an SVG stroke with dash offset `n` (0–100) | | `animate-duration-{ms}` / `animate-delay-{ms}` | Animation duration / delay, values from the duration scale | | `animate-ease-{in-out\|in-out-sharp\|linear}` | Animation timing function | | `fill-mode-{none\|forwards\|backwards\|both}` | `animation-fill-mode` | | `direction-{normal\|reverse\|alternate\|alternate-reverse}` | `animation-direction` | | `repeat-{0\|1\|infinite}` | `animation-iteration-count` | | `running` / `paused` | `animation-play-state` | | `stagger-{offset}` | Sets `--stagger-offset` only | | `stagger-animation-{offset}` / `stagger-transition-{offset}` | Delay the animation / transition by `--stagger-offset` × `--stagger-order` | | `auto-stagger-animations-{offset}` / `auto-stagger-transitions-{offset}` | Assign stagger order automatically to the first 10 children | | `auto-set-stagger-order` | Sets `--stagger-order` on the first 10 children without applying a delay | | `animate-spin` | Spin with `--spin-duration` (default 700ms) | | `animate-wiggle` | A 0.8s horizontal shake | | `animate-bounce` | Repeating bounce. `bounce-x` / `bounce-y` pick the axis, `bounce-duration-{ms}` / `bounce-delay-{ms}` tune the timer, `--bounce-multiplier` scales the distance | | `animate-pulse` | A repeating scale-and-fade ripple. `pulse-duration-{ms}` / `pulse-delay-{ms}` tune it, `--pulse-initial-scale` / `--pulse-final-scale` set the range | | `animate-loader-stroke` | Cycles an SVG stroke dash offset for spinners | | `text-shimmer-{color}` + `animate-text-shimmer` | Clip the text to a shimmer gradient over the color, then sweep the highlight across it | | `text-shimmer-at-{position}` / `text-shimmer-highlight-{color}` | Position / recolor the static highlight | | `text-stroke` / `text-stroke-{0\|1\|2\|3\|none}` | Outlined text: transparent fill with a stroke of the given width | | `text-stroke-{color}` / `text-stroke-fill-{color}` | Set the stroke color / the fill color | | `border-gradient` / `border-gradient-{width}` | A conic-gradient border drawn on a masked `::before` overlay (default 1px) | | `border-gradient-from-{color}` / `border-gradient-to-{color}` | The gradient's start and end colors (`--border-gradient-spread` sets the angle between them, default `45deg`) | | `border-gradient-angle-{10–180}` | Rotates the gradient (steps: 10, 15, 20, 25, 30, 45, 60, 90, 120, 135, 180) | | `mask-border-{width}` | Masks the element down to a border-shaped ring of the given width (default 1px), following the inherited border radius | | `edge-mask` | The base edge mask. Composes the four per-edge gradients into one `mask-image`, all edges fully opaque until an `edge-mask-{side}` class turns one on | | `edge-mask-{t\|r\|b\|l\|x\|y}` | Fades the content to transparent at that edge over the default distance (10%) | | `edge-mask-{t\|r\|b\|l\|x\|y}-{distance}` | Same, with an explicit fade distance | | `edge-mask-none` | Turns every edge fade back off | | `edge-mask-transition` / `edge-mask-duration-{ms}` | Animates edge fades in and out (default 50ms) | | `edge-mask-transition-ease-{in-out\|in-out-sharp\|linear}` | The fade's timing function | | `bg-mask` + `bg-mask-to-{t\|r\|b\|l}` | Masks the whole element to one linear gradient fading toward that side | | `bg-mask-to-{t\|r\|b\|l}-{distance}` | Sets the gradient with an explicit fade distance | | `bg-mask-start-opacity-{n}` / `bg-mask-end-opacity-{n}` | The mask opacity at the gradient's start / end | | `bg-mask-none` | Removes the gradient | | `bg-mask-transition` / `bg-mask-duration-{ms}` / `bg-mask-transition-ease-{fn}` | Same transition controls as the edge equivalents | Enter and exit animations compose: stack one class per property on the same element as `animate-in` or `animate-out`, and they run together as one animation. Distance, scale, and duration values follow the standard Tailwind scales; spacing-valued utilities also take any `r1–r15` step. See [Spacing](/reference/utilities/spacing.md). Mask distances take spacing values plus the fractions `1/10`, `1/2`, `9/10`, and `full`. The mask opacities are registered as typed `@property` values, so the transition utilities can animate them. ## Examples ### A basic enter animation Use `animate-in` with `fade-in` to fade content in when it renders: ```html
{{ megamenu_content }}
``` ### Combining animations Use several `*-in` classes on one element to run them as a single animation, including inside `x-transition`: ```html
{{ submenu }}
``` The header dropdown pairs `fade-in` with `slide-in-from-top-[5px]` the same way. ### Staggered entrances Use `auto-stagger-animations-{offset}` on children to delay each one a little more than the last: ```html
{{ cards }}
``` Automatic staggering covers the first 10 children. Past that, set `--stagger-order` yourself and use `stagger-animation-{offset}`. ### Drawing attention Use `animate-wiggle` behind a state variant to shake an element when something needs attention: ```html
{{ add_to_cart_button }}
``` The add-to-cart button wiggles when the form has an invalid field, and the cart's terms checkbox does the same with `has-[:user-invalid]:animate-wiggle`. ### Text shimmer Use `text-shimmer-{color}` with `animate-text-shimmer` for a loading shimmer that sweeps across the text: ```html {{ 'other.loading' | t }} ``` Without `animate-text-shimmer` the highlight sits still at `text-shimmer-at-{position}`. ### A gradient border Use `border-gradient` with `from` and `to` colors for a border drawn as a conic gradient: ```html
…
``` The gradient lives on a masked `::before` overlay, so it follows the element's border radius and never blocks clicks. ### Fading scrollable edges Use `edge-mask` with per-edge classes to fade content where a scroll area overflows: ```html ``` The custom select and the thumbnail picker toggle the edges from the `x-overflow` plugin's `$overflow` magic, so a fade appears only on the side that has more content. The collection filter tags add `edge-mask-duration-200` because the edges toggle while the shopper scrolls, and an instant fade would flicker. ### Masking a rolling digit Use `edge-mask edge-mask-y` on a fixed-size window so content entering and leaving it fades at the top and bottom: ```html {{ digit_stack }} ``` The callout blocks roll each counter digit inside a `1ch` window this way. ## Customizing Durations and delays come from the `transitionDuration` and `transitionDelay` scales in `tailwind.config.ts`; the animation utilities reuse them. The enter/exit system is based on tailwindcss-animate: The mask utilities come from assembly-ui's `mask-image` plugin, adapted from tailwind-edge-mask-image: