Scroll Triggered Blend

Learn how to change blend modes dynamically based on scroll position for engaging scroll effects.

Key Concepts

• Dynamic blend mode changes with scroll
• Calculating scroll progress
• Creating scroll-based animations

Technical Details

const [scrollProgress, setScrollProgress] = useState(0);

useEffect(() => {
  const handleScroll = () => {
    const progress = window.scrollY / documentHeight;
    setScrollProgress(progress);
  };
  window.addEventListener('scroll', handleScroll);
}, []);

<div style={{ mixBlendMode: blendModes[progress] }} />