Composables
useScrollReveal
Intersection Observer composable that adds is-visible to animation target elements when they enter the viewport.
useScrollReveal
Initializes an IntersectionObserver that watches all [data-reveal], .xFadeUp, .xFadeIn, .xFadeLeft, .xFadeRight, .xScale, and .xFadeUp-stagger elements. When any target enters the viewport the class is-visible is added, triggering the corresponding CSS animation. Called automatically by the marketing.client.ts plugin — use directly for fine-grained control.
The composable registers lifecycle hooks automatically, so it must be called inside a component setup. Calling it outside a component instance returns a no-op stub for safe imports in shared modules.
Usage
// Called automatically by the global plugin on mount.
// Call directly when you need manual control:
useScrollReveal()
// With custom options:
useScrollReveal({ threshold: 0.2, rootMargin: '0px 0px -80px 0px', once: false })
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
options | object | {} | Observer + behavior options. Supports threshold, rootMargin, once. |
options.threshold | number | 0.15 | Forwarded to IntersectionObserver. Fraction of element that must be visible to trigger. |
options.rootMargin | string | '0px 0px -80px 0px' | Forwarded to IntersectionObserver. Negative bottom inset fires earlier as the element scrolls into view. |
options.once | boolean | true | If true (default), the observer stops watching an element after it has appeared once. If false, the class is removed when the element scrolls out of view and re-added on re-entry. |
Returns
| Key | Type | Description |
|---|---|---|
initScrollReveal | () => void | Manually initialize the observer (e.g. after dynamic DOM changes). The plugin calls this for you on mount. |
cleanup | () => void | Disconnect the observer and release DOM references. Called automatically on unmount. |
Observed Selectors
| Selector | Effect |
|---|---|
[data-reveal] | Any element with data-reveal attribute is watched. |
.xFadeUp | Fade-up animation targets. |
.xFadeIn | Fade-in animation targets. |
.xFadeLeft | Fade-left animation targets. |
.xFadeRight | Fade-right animation targets. |
.xScale | Scale animation targets. |
.xFadeUp-stagger | Stagger container targets. |
When a target intersects the viewport, the class is-visible is applied.
Example
<script setup>
// Fine-grained control — observe with a tighter threshold
useScrollReveal({ threshold: 0.3 })
</script>
<template>
<section>
<h2 class="xFadeUp">Revealed on scroll</h2>
<p data-reveal>This paragraph fades in when visible.</p>
</section>
</template>
Re-initializing after dynamic DOM changes:
<script setup>
const { initScrollReveal, cleanup } = useScrollReveal()
async function reload() {
// ... fetch and inject new content
cleanup()
await nextTick()
initScrollReveal()
}
</script>
AI Context
composable: useScrollReveal
package: "@xenterprises/nuxt-x-marketing"
use-when: >
Adding scroll-triggered CSS animations to any element. The plugin calls this
automatically on app mount — only call it directly when you need custom
IntersectionObserver options (threshold, rootMargin, once) or want to
re-initialize after dynamic DOM changes. Pairs with xFadeUp, xFadeIn,
xFadeLeft, xFadeRight, xScale, and xFadeUp-stagger CSS classes from
x-marketing.css.