Composables
useScrollReveal
Intersection Observer composable that adds is-visible to animation target elements when they enter the viewport.
useScrollReveal
Initializes an Intersection Observer 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.
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' })
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
options | IntersectionObserverInit | {} | Options forwarded to IntersectionObserver. Supports threshold, root, rootMargin. |
Returns
This composable returns void. It registers the observer as a side effect and automatically disconnects it when the component is unmounted.
| Effect | Description |
|---|---|
Observes [data-reveal] | Any element with data-reveal attribute is watched. |
Observes .xFadeUp | Fade-up animation targets. |
Observes .xFadeIn | Fade-in animation targets. |
Observes .xFadeLeft | Fade-left animation targets. |
Observes .xFadeRight | Fade-right animation targets. |
Observes .xScale | Scale animation targets. |
Observes .xFadeUp-stagger | Stagger container targets. |
Adds is-visible | Applied to each target when it intersects the viewport. |
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>
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) 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.