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
spacejelly.dev/posts/how-to-t...
💾 Code
github.com/colbyfayock/my-scr...
🔔 Subscribe for more tech and developer videos
ru-vid.com?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: github.com/sponsors/colbyfayock
Other: hello@colbyfayock.com
👨🚀 Brought to by colbyfayock.com
www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
www.colbyfayock.com/uses
🧰 More Resources
Demo Landing Starter
github.com/colbyfayock/demo-l...
Intersection Observer
developer.mozilla.org/en-US/d...
React Intersection Observer
github.com/thebuilder/react-i...
🎼 Music
Music from Uppbeat (free for Creators!):
uppbeat.io/t/eric-haley/lone-...
License code: LBXM57TITUFTCUND
#colbyfayock #intersectionobserver #reactjs #react #reactjstutorial #nextjs #javascript #webdevelopment
18 июн 2024
