Learn how to trigger functionality whenever someone scrolls to an HTML element in React with the browser's Intersection Observer API. We'll walk through using the useRef hook to access a DOM node, using the Intersection Observer to detect if that element is visible inside of the useEffect hook, storing it's visibility in useState, using a hook library, and triggering CSS animations when scrolling down a page. 🧐 What's Inside 00:00 - Intro 00:13 - What tools we'll use like Intersection Observer and React 01:33 - Creating a new React app using a Next.js demo starter 03:01 - Using the useRef hook to access a reference to an HTML DOM node 03:38 - Accessing a Ref in React with useEffect 04:35 - Detecting HTML element visibility with Intersection Observer 06:24 - Storing element visibility state with the useState hook 07:57 - Installing React Intersection Observer hook to simplify code 09:23 - Triggering a CSS animation when scrolling to an element 11:59 - Outro 🗒️ Read More https://spacejelly.dev/posts/how-to-trigger-a-function-when-scrolling-to-an-element-in-react-intersection-observer/ 💾 Code https://github.com/colbyfayock/my-scrolly-event 🔔 Subscribe for more tech and developer videos null 🐦 Get updates straight to your Twitter @colbyfayock https://twitter.com/colbyfayock 📸 Catch the next stream live on Twitch @colbyfayock https://twitch.tv/colbyfayock ✉️ Or a newsletter right to your inbox! https://www.colbyfayock.com/newsletter/ 💝 Sponsor me for more free content like this! GitHub: https://github.com/sponsors/colbyfayock Other: hello@colbyfayock.com 👨‍🚀 Brought to by colbyfayock.com https://www.colbyfayock.com/ 🎥 Want to know what A/V equipment I use? https://www.colbyfayock.com/uses 🧰 More Resources Demo Landing Starter https://github.com/colbyfayock/demo-landing-starter Intersection Observer https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API React Intersection Observer https://github.com/thebuilder/react-intersection-observer 🎼 Music Music from Uppbeat (free for Creators!): https://uppbeat.io/t/eric-haley/lone-wolf License code: LBXM57TITUFTCUND #colbyfayock #intersectionobserver #reactjs #react #reactjstutorial #nextjs #javascript #webdevelopment