How it works
When an element becomes visible in the viewport (on scroll or on initial page load),
the watcher adds the class --watcher-view.
When the element leaves the viewport, the class is removed — unless “once” mode is enabled.
Basic usage
To start observing an element, add the attribute data-anim-watcher.
<div data-anim-watcher class="block">...</div>Then you can target the state class in CSS/SCSS:
.block {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.block.--watcher-view {
opacity: 1;
transform: translateY(0);
}Additional options
The watcher supports a few extra attributes that map directly to observer configuration.
data-anim-watcher-root
Selector of the “root” element used as viewport for the observer.
Default is <body> / browser viewport.
Example: data-anim-watcher-root=".scroll-area"
data-anim-watcher-margin
Root margin (offset) as px or %.
Useful when you want to trigger earlier/later.
Example: data-anim-watcher-margin="100px"
data-anim-watcher-threshold
How much of the element must be visible to trigger.
1 means 100% visible.
Default is 0.
You can pass a comma-separated list.
Example: data-anim-watcher-threshold="0.25,0.5,0.75"
data-anim-watcher-once
Observe only once. The class --watcher-view will be added one time and
won’t be removed when the element leaves the viewport.
<div
data-anim-watcher
data-anim-watcher-threshold="0.5"
data-anim-watcher-once
class="block"
>...</div>Events
After each watcher trigger, an event watcherCallback is dispatched.
You can listen for it anywhere in your code.
document.addEventListener("watcherCallback", function (e) {
// Full observer entry data:
const entry = e.detail.entry;
// Observed element:
const targetElement = entry.target;
});Download
Build scroll animations, active navigation, and visibility-based effects without wiring observers manually. Download the template and get the Watcher component out of the box.