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. ExodeUI brings native, hardware-accelerated scroll trigger capabilities to React. By calculating normalized scroll progress and driving WebGL GPU playheads off the main browser thread, ExodeUI guarantees butter-smooth 60fps and 120fps scrolling without stutter, paint bottlenecks, or complex lifecycle teardown logic.
ExodeUI decouples the scroll observer loop from the React component render lifecycle. Instead of re-rendering JSX tree nodes on every scroll pixel, scroll updates stream into the scene input buffer, updating GPU uniform registers directly.
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. ExodeUI compiles scroll triggers into declarative canvas inputs that run on GPU shaders with zero React DOM re-renders.
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.