React Architecture Concept • Core Motion Model
Scroll Trigger: Declarative Viewport Scrubbing & Pinning in React
Scroll trigger architectures are the gold standard for high-converting marketing landing pages, interactive storytelling, and product deep dives. Historically, implementing robust scroll triggers required importing heavy commercial script libraries like GSAP ScrollTrigger or wrestling with low-level IntersectionObserver calculations that drift out of sync with trackpad inertia. With ExodeUI, scroll progress can drive an input in an animation file, so the scroll-linked motion is designed visually and played by the runtime instead of written as timeline code. Test performance on the devices you support.
ExodeUI decouples the scroll observer loop from the React component render lifecycle. Instead of re-rendering JSX on every scroll event, scroll progress is passed to the animation as an input and the runtime redraws the canvas.
Runnable ExodeUI React Implementation
Production ReadyMount the ExodeUICanvas component and bind parameters declaratively without imperative lifecycle hooks:
import React, { useEffect, useRef } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function PinnedScrollHero() {
const canvasRef = useRef(null);
useEffect(() => {
// ExodeUI handles normalized scroll triggers natively
const handleScroll = () => {
const scrollY = window.scrollY;
const maxScroll = window.innerHeight * 1.5;
const progress = Math.min(Math.max(scrollY / maxScroll, 0), 1);
if (canvasRef.current) {
canvasRef.current.setInputValue('scrollProgress', progress);
}
};
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<div className="pinned-stage-container" style={{ height: '250vh' }}>
<div className="sticky top-0 h-screen w-full flex items-center justify-center">
<ExodeUICanvas
ref={canvasRef}
src="/scenes/scroll-trigger-hero.json"
inputs={{ "scrollProgress": 0 }}
/>
</div>
</div>
);
}Frequently Asked Questions about scroll trigger
How does ExodeUI scroll trigger compare to GSAP ScrollTrigger?
GSAP relies on imperative JavaScript timeline manipulation that requires complex cleanup hooks (useGSAP) to prevent memory leaks. With ExodeUI, scroll progress is passed to the animation as an input, and the runtime draws the result on a canvas. GSAP remains the better choice for animating existing DOM elements.
Can I pin elements to the screen while scrolling through a sequence?
Yes. ExodeUI supports sticky container pinning combined with scene progress scrub, allowing multi-stage narrative scenes to scrub while the viewport remains locked.
Is scroll progress normalized across mobile touch and desktop trackpads?
Yes. ExodeUI provides built-in delta smoothing that normalizes disparate input hardware—from high-precision Mac trackpads to steppy Windows scroll wheels—into a clean 0.0 to 1.0 progress curve.