This demo showcases the new velocity-based scroll trigger that automatically plays animations while scrolling and pauses when scrolling stops.
🚀 What's New
This page now uses the enhanced scroll trigger system built into the Rive component. No manual scroll event handling required!
<script>
function onScroll() {
if (riveInstance) riveInstance.play();
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (riveInstance) riveInstance.pause();
}, 200);
}
window.addEventListener('scroll', onScroll);
</script>
<div class="rive"
data-component="RiveAnimation"
data-file="/vehicles.riv"
data-scroll-trigger="velocity"
data-velocity-threshold="100"
data-scroll-reverse="true">
<canvas></canvas>
</div>
âš¡ Velocity-Based Triggers
The animation above uses a velocity threshold of 100px/s with reverse playback. This means:
- Animation plays forward when scrolling down above 100px/s
- Animation plays in reverse when scrolling up above 100px/s
- Animation pauses when scroll velocity drops below the threshold
- Direction-aware animation creates intuitive scroll-sync behavior
Debug Mode: Notice the debug overlay in the top-right showing real-time scroll data including velocity, direction, and trigger state.
🎯 Other Available Triggers
The enhanced scroll trigger system supports multiple trigger types:
- Viewport:
data-scroll-trigger="viewport"- Play when element enters viewport - Scrub:
data-scroll-trigger="scrub"- Sync animation progress to scroll position - Parallax:
data-scroll-trigger="parallax"- Create parallax scroll effects - Velocity:
data-scroll-trigger="velocity"- Trigger based on scroll speed (used above) - Sequence:
data-scroll-trigger="sequence"- Chain multiple actions at different scroll points
See rive-scroll-trigger-enhanced.html for comprehensive examples of all trigger types.