React Scroll Triggered: Viewport-Based Triggers & Scrub Animations
React scroll triggered animations are essential for landing pages, case studies, and storytelling web experiences that reveal information sequentially as the user scrolls. Unlike continuous scroll-linked scrubbing, scroll-triggered components fire discrete state transitions once a specified viewport intersection threshold is breached. ExodeUI provides built-in trigger observers that coordinate entrance staggers, fire particle bursts, or start interactive state machines the moment an element enters the visible screen area.
Interactive scene parameters dynamically update via the ExodeUICanvas component runtime.
Runnable ExodeUI React Code Example
Production ReadyImport the ExodeUICanvas component directly into your React application tree. Wire states, triggers, and parameters declaratively:
import React from 'react';
import { ExodeUICanvas } from 'exodeui';
export function ViewportTriggeredCard() {
return (
<div className="trigger-box">
<ExodeUICanvas
src="/scenes/feature-reveal.json"
stateMachine="TriggerMachine"
triggerOnView={{
threshold: 0.3,
once: true
}}
/>
</div>
);
}Frequently Asked Questions about react scroll triggered
What is the difference between scroll-triggered and scroll-linked animations?
Scroll-triggered animations play automatically when an element crosses a viewport threshold, while scroll-linked animations tie the playhead directly to scroll position.
Can a scroll trigger fire multiple times as the user scrolls back up?
Yes. You can configure triggers to repeat on enter/leave or lock them to fire once using the once: true parameter.
How do threshold offsets work in ExodeUI scroll triggers?
Offsets allow you to specify exact pixel or percentage margins (e.g. 100px before viewport center) before the state transition fires.