Composables
useStaggerReveal
Adds incremental transition-delay values to [data-reveal] children of a selector for staggered scroll animations.
useStaggerReveal
Queries the DOM for all elements matching selector, then iterates over their [data-reveal] children and assigns incrementally increasing transition-delay values. This creates a stagger effect where each child animates in slightly after the previous one when useScrollReveal adds is-visible.
Usage
useStaggerReveal('.feature-grid')
// With custom per-step delay:
useStaggerReveal('.feature-grid', 150)
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | string | — | CSS selector for the parent container(s) whose [data-reveal] children will be staggered. |
delay | number | 100 | Milliseconds added per child step. Child 0 = 0ms, child 1 = delayms, child 2 = 2 * delayms, etc. |
Returns
This composable returns void. It applies transition-delay inline styles as a side effect on mount.
| Effect | Description |
|---|---|
Queries selector | Finds all matching parent containers. |
Sets transition-delay | Each [data-reveal] child gets an inline style.transitionDelay value. |
Example
<script setup>
onMounted(() => {
useStaggerReveal('.features-list', 120)
})
</script>
<template>
<ul class="features-list">
<li data-reveal>First feature</li>
<li data-reveal>Second feature — 120ms later</li>
<li data-reveal>Third feature — 240ms later</li>
</ul>
</template>
AI Context
composable: useStaggerReveal
package: "@xenterprises/nuxt-x-marketing"
use-when: >
Creating staggered entrance animations for a list or grid of items. Call on
or after mount so the DOM is populated before querying. Works in combination
with useScrollReveal — useStaggerReveal sets the delays, useScrollReveal
triggers the animations by adding is-visible. Use xFadeUp-stagger CSS class
as an alternative for automatic staggering without calling this composable directly.