Trigger a Function when Scrolling to an Element in React with Intersection Observer

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@loop8836]

Man it’s 12:30am and I am figuring that shit from 11am from previous day And this is best video which explained perfectly

[@colbyfayock]

Really glad to hear it helped!

[@hamzaeshoul]

Very well explained. Thank you for your effort and your pedagogy. I particularly liked the smooth transition you made between using the intersection observer API and the react-intersection-observer package.

[@colbyfayock]

thanks for the kind words!! glad it was helpful

[@KingPacavision]

If i knew about this hook before it could have saved me so much heartache thank you for explaining this in a concise way.

[@colbyfayock]

no problem! glad you were able to eventually find it :)

[@John-eq5cd]

Very clear, as with all of your videos, thanks. I don't have a favourite use for Intersection Observer, but had been trying to apply it to infinite scrolling. Your video helped me to make the final step. Using a hidden tag, such as a span, placed at the end of an array.map output, when the user scrolls down and reaches the span, inView becomes true and triggers a call to the database to retrieve additional array elements which are then displayed on the page.

[@colbyfayock]

thanks John! that sounds like a good solution. an infinite scroll video could be good 🤔😁

[@JamesQQuick]

So cool and so easy!

[@colbyfayock]

thanks James! 🙌

[@marktheunknown1829]

This is what I needed for a sticky header changing style whilst scrolling. Thanks a lot

[@colbyfayock]

No problem!

[@silenux7419]

This was great. Thanks for doing it the manual way first, sometimes we have restrictions on using third party packages so it's great to know how it works under the hood.

[@colbyfayock]

thanks, no problem, definitely great to see both ways to have the option

[@ivan4486]

Thank you so much! I had trudged through a bunch of very similar videos with people using scroll evenlisteners in react🤦‍♂before finding this one!

[@colbyfayock]

no problem! glad you eventually found it :)

[@zohabali7130]

wow!!! It was really smooth. Was looking for a solution like this for almost a day. You explained it in a perfect way. Thanks for providing so much value

[@colbyfayock]

Thanks glad to hear that!

[@JatinS-yt]

Man I can't thank you much, i have been stuck with the using intersection observer for weeks. That's a blessing man, Love you!

[@colbyfayock]

glad to hear it helped!! 🙌

[@ashimxtha6407]

thanks for this video mate helps many people who had no idea about such observer hope your channel grows good .

[@colbyfayock]

Thanks. 😁

[@cvetanstojanovski559]

Finally, I've understood what is useRef. Thanks a lot!

[@colbyfayock]

yay no problem!

[@good_hunter7724]

Spend a couple of hours before have find the answer in this video. Thanks!

[@colbyfayock]

wish you found it sooner :) but glad to hear that it helped!

[@simple_user000]

Seriously bro, this is what i've been struggling for many days! Thanks a lot colby!!!

[@colbyfayock]

No problem 🙌

[@havefun5519]

I knew this NPM today, really coool~ it's good tut that you write the code first and then tried to use the NPM package to implement the same functionality.🚀🚀

[@colbyfayock]

thanks glad you found it helpful!

[@faustozambrano4901]

Thanks a lot for this great video, brother...Imma get my pages wiggling so hard now

[@colbyfayock]

Wiggle wiggle wiggle

[@lostsunrises7495]

Great video Colby! Super striaghtforward and easy to follow! This saved me from a big headache 🙌

[@colbyfayock]

really glad to hear that!

[@Marlorouse109]

Thank you for taking the time to explain this functionality. and triggering concept. It really helps me to understand how to approach certain scrolling use cases in React.🙂👏

[@colbyfayock]

you're welcome!

[@fidelisitor8953]

Thanks for the video mate! Been struggling with this for a while now but this has helped me out a lot. Your explanation's really simple and easy to follow.

[@colbyfayock]

happy to hear this helped!

[@totfosk]

Perfect video and explanation. I tried to do that on my own and was getting crazy getting undefineds everywhere XD. Cheers master

[@colbyfayock]

Thanks! Glad it helped

[@eleah2665]

Team! Thanks Colby. Always glad to see some npm package that does most of the work for me.

[@colbyfayock]

definitely a useful one :)

[@8koi245]

no way!! TYSM ❤️ btw mixing this whit framer-motion is just *chef kiss* btw btw no way you actually talked about it!!

[@colbyfayock]

😂 similar minds! glad you enjoyed this :)

[@ajjo5513]

Thank you so much. Always wanted to know how to use intersection observer in react and how such animations worked in react without reaching for a library like framer motion.

[@colbyfayock]

no problem! Framer is an awesome library but there's a lot you can do before jumping on it

[@athmanbakari9724]

Great video, was really helpful It was nice how you explained each line with enough detail to grasp the concept

[@colbyfayock]

thank you! glad to hear that :D

[@atulyakr.2003]

thank you very much. Bohot time bachaya h is trick ne mera🙏

[@colbyfayock]

No problem!

[@fabianpetersen2452]

Thanks alot, i tried getting the window.scrollY to work with React and it is not as simple as the vanilla JS version. Your explanation was easy to follow, subscribed 👍

[@colbyfayock]

thanks, glad to hear that!

[@inspriongaming4992]

Thanks bro you explain much better and even saved my time

[@colbyfayock]

Glad to hear it helped!

[@anthonyiu]

That's brilliant! Thanks for the tutorial. That custom hook saved me a lot of time😊

[@colbyfayock]

Awesome! Thank you 😁

[@colbyfayock]

What's your favorite use case of scroll-based triggers? Reply 👇 Make sure to subscribe for more! kzbin.info

[@somerandomchannel382]

is it possible to trigger many items with an classname instead of ref?

[@colbyfayock]

@@somerandomchannel382 sure is! check out this example: developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#javascript

[@mordicai4296]

This is exactly what I was looking for, thank you!

[@colbyfayock]

np, glad it helped!

[@CryptoMarketSummary]

All of your videos have great little nuggets of "hey this is how useRef works" or other quirky functions/hooks/etc. Loving your videos.

[@colbyfayock]

thanks! never thought about that perspective, but generally i like to give context around things to not make an assumption people know certain things :D

[@CryptoMarketSummary]

@@colbyfayock yeah man super appreciated. I feel like part of it is the fact that you explain even the "basic" stuff along the way. I.E., verbally saying "destructuring this import" while typing import { somethingCool } from 'superCool'

[@vighneshs416]

Amazing explanation Colby, you just earned a new sub. Thanks

[@colbyfayock]

thank you!

[@Madmann16]

Just wow, i found another gem to the community thank you

[@colbyfayock]

[@RizaHariati]

Thank you! Your explanation is very simple and clear. And the hooks helps alot

[@colbyfayock]

No problem 🙌 glad to hear that

[@trevorbryant2006]

after many videos I have arrived to the one I need! Thanks for the awesome video man

[@colbyfayock]

no problem :)

[@madsudan9227]

Thanks for the superb explanation..keep teaching..

[@colbyfayock]

No problem 😁🙌

[@rorymaguire145]

Great tutorial thank you Colby, helped me out a lot

[@colbyfayock]

No problem!

[@manoj-k]

Learn something whenever I come here❤

[@colbyfayock]

awesome happy to hear that! 🙌

[@nocturno7887]

Thank you man. I managed to implement your solution successfully

[@colbyfayock]

awesome! glad it worked out 💪

[@w2ytube]

Nice vid as usual. Very clear and very didactic 👏Thanks a lot Colby!

[@colbyfayock]

no problem! 🙌

[@rodrigomenezes22]

Thank you man! This is awesome! I will start using it today! :)

[@colbyfayock]

no prblem! happy to hear it was helpful

[@pouyabh]

Thanks alooootttttttt For both ways that u said Love the session 🔥🔥🔥🔥🔥🔥❤️❤️❤️❤️❤️❤️

[@colbyfayock]

Glad it helped!

[@growagencymx]

Thanks Colby, just what I was trying to do. Suscribed!

[@colbyfayock]

Thank you!

[@thelyricsguy3094]

Your explanation is very much clear and easy to understand 😃 +1 subscriber

[@colbyfayock]

Thank you!!

[@YanParoni]

you are amazing colby, thanks so much

[@colbyfayock]

You got it!!

[@adityatiwari7337]

Thanks Colby! This was huge help!

[@colbyfayock]

glad to hear that!! 🙌

[@albinsjolin649]

Thank you my dude, was using some hack with onScroll and trying different hegihts and pixels.... THIS saved me

[@colbyfayock]

glad to hear that! 🙌

[@ranatrinchada]

I just check it out! thank you so much for explaning this! 😎

[@colbyfayock]

no problem!

[@mdkhorshed2043]

Many many thanks sir. Your tutorial really helps us :)

[@colbyfayock]

You're welcome!

[@umairkhalid8204]

Thank you so much man! Just what I was looking for ❤

[@colbyfayock]

no problem!

[@appwala3728]

Learned too much from this thank you

[@colbyfayock]

no problem!

[@Fishamble]

Greta teaching style and wonderful presentation. Thanks.

[@colbyfayock]

thanks and your welcome!

[@M1szS]

thanks dude, this was rlly helpful

[@colbyfayock]

no problem!

[@lucianalbuquerque]

Perfect video, so clear! THANK YOU !

[@colbyfayock]

yay no problem!

[@bikabas]

Super useful stuff Colby. Thanks a ton. Btw, what's the VS code theme ur using ? Looks awesome ...

[@colbyfayock]

no problem! I'm using Night Owl there marketplace.visualstudio.com/items?itemName=sdras.night-owl

[@sayedpritom]

Helped a lot! Thank you so much.

[@colbyfayock]

no problem!

[@NotBeHaris]

Thanks for sharing great knowledge.

[@colbyfayock]

no problem! 🙌

[@CaliburPANDAs]

What about libraries with built-in scroll features that uses the intersection observer APi such as React-Spring, Framer-motion, AOS? 👀

[@colbyfayock]

hey not quite sure, what's the question?

[@artem_egamediev]

Framer motion easy to use

[@RomanHumennyi-z4k]

NIce! This is what I was looking for! Thank you

[@colbyfayock]

glad you found it! 🙌

[@aSTr0NeRF0999]

I like the way you teach ! Great contents ! Thanks for sharing ! It's sooooo helpful ! +++

[@colbyfayock]

Thank you! No problem at all 🙌

[@fullgames926]

x2

[@emersonvisuals]

Great video Colby! 😃 - I was just wondering if you knew there was a way to have multiple ref triggers using the react-intersection-observer NPM plugin without duplicating the same code and changing the variable names? I had a look at their documentation but couldn't seem to find much information about it. Thanks once again!

[@colbyfayock]

im seeing pretty much the same thing, the only option might be to use the InView component with children if im reading that right

[@emersonvisuals]

@@colbyfayock Thanks for the help Colby! Much appreciated 😄

[@AjvarRelish]

Thank you for this! It's exactly what I've been looking for! One question on the css, why do you type styles. Before tha actual class you're using? Im a front end student and have not seen that before and would love to understand it

[@colbyfayock]

hey can you let me know which part you're referring to?

[@laous]

Thank you very much Colby!

[@colbyfayock]

no problem!

[@juanortegaa6916]

Hey Colby, just discovered your channel, but I know you from Major League Hackaton, Thanks for all these great content From Southamerica regards !!!

[@colbyfayock]

hey Juan thats awesome, thanks for checking out my channel!

[@abhishekkumar-kt3uk]

Amazing, thanks buddy 🙏

[@colbyfayock]

No problem 🙌

[@reyreyalldayday5708]

Colby yous the goat. Thanks for the vids dude

[@colbyfayock]

thank you 🙏

[@bancroftberlin]

I'm just getting into UI animations, thanks for the tutorial. I noticed that the current Apple product pages are staying away from animations. Maybe that got bad feedback, too annoying? Dosing them the right way is part of my learning UI animations.

[@colbyfayock]

no problem! definitely don't want to overdo them, but the right amount can be delightful

[@kunaldhuria3935]

What an amazing video thank you so much🙏

[@colbyfayock]

no problem :D

[@nitinarora4315]

was a life-saver. Thanks a lot.

[@colbyfayock]

No problem 🙌

[@johny962]

I learned something new. Thanks : )

[@colbyfayock]

no problem!

[@davediaz25]

Man, you are a life saver!

[@colbyfayock]

i got you!

[@thedevmarc5634]

Wow, this was so easy! Thank you!

[@colbyfayock]

No problem 🙌

[@deathdefier45]

Top knotch content brother helped a lot at work thanks!

[@colbyfayock]

thank you!

[@felipespena1124]

Great video, super clear! thanks

[@colbyfayock]

thank you!

[@mohammadalaaelghamry8010]

Great video. Very useful thank you.

[@colbyfayock]

You're welcome!

[@КоляЯрчук-ж2з]

great example, thanks a lot

[@colbyfayock]

no problem!

[@kirakira160]

Thank you Colby

[@colbyfayock]

you're quite welcome! :)

[@mubashirwaheed474]

Thank you so much Colby

[@colbyfayock]

no problem!

[@ankanbasu7381]

thanks for the tutorial. and shouldn't we use useEffect cleanup to remove the intersection observer?

[@colbyfayock]

yes! absolutely. great point!

[@emirdior]

Great explanation, thanks

[@colbyfayock]

No problem! 🙌

[@alexmir9878]

Great video and article, ty for it 🚀

[@colbyfayock]

no problem!

[@sunithab2704]

Thank you so much for this!!

[@colbyfayock]

no problem!

[@w3mw]

So cool, the way apple had in the beggining of the video, where all items smoothly goes away with opacity how is that possible in scroll?

[@colbyfayock]

There are different ways to handle this but it's definitely possible they use this technique! I like using the css animation but you could do it all in JS for instance

[@マサヒロ-m8f]

really understandble,thanks bro.

[@colbyfayock]

no problem!

[@edsonlucas4758]

Very good video, helped me a lot!

[@colbyfayock]

thanks! glad to hear that

[@lauraneves9362]

Thanks!!! That was just what I needed!!

[@colbyfayock]

No problem 🙌

[@milkadeneva2943]

Great video! :) May I ask, how do you make the side scrollbar disappear when you aren't scrolling?

[@colbyfayock]

hey thanks! i think it's just a Mac thing 👀 Appearance > Scroll Bar Behavior > Show Scrollbar

[@biplabsharma5344]

Subscribed mate amazing content

[@leonardocitton4627]

Great content as ever!

[@colbyfayock]

thanks :D

[@something9030]

Thanks! It's a very helpful and easy to follow tutorial. Subscribed 😊 Is there a way to trigger the function/animation only one time? Instead of repeating the animation if I, for example, scroll back up the page.

[@colbyfayock]

looks like you can use the `disconnect` method developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/disconnect

[@lightninginmyhands4878]

for the react-intersection-observer package, you can pass in the `option` object with the `triggerOnce` key set to `true`

[@stathisrenieris1226]

Very nice explanation Colby, as always! Thanx. Now i have a question. Here, for time's sake, you used intersection from the same component that includes the reference. But what if i want to change my main top navigation style based on user scroll, or on a specific section intersecting viewport? Where so i put that logic? Nav resides in a Layout component wrapping the _app.tsx and the targeted section resides in the index.tsx page. What approach should i use here? Should i include this code in the section component and update a redux store and then get the Nav be informed of the change by useSelector? Some other approach?

[@colbyfayock]

Redux might work, but you don't need redux unless you're already using it. you can use React Context to do this, where you could initialize that context in Layout or at the top level of the application App where any child components in that tree can access that state

[@stathisrenieris1226]

@@colbyfayock Thanx for the reply. I ended up using a custom hook to listen if the user scrolls on top of the page, because then is when Navbar has to change. I don't know if this is efficient though.

[@sujoydutta920]

YOu are right the possibilities are endless 😲

[@colbyfayock]

💯🙌

[@thiagoleite3255]

thx friend, you're a friend.

[@colbyfayock]

nada 😁

[@naimurrahman9979]

As usual, great content, but about intersection observer, I am thinking something about it from many days. Is it possible to make it like a library to use it as a animation on scroll library? Because I don't like the usual AOS libraries out there.

[@colbyfayock]

For sure you can create your own custom hook to contain your logic

[@developedbyvarun]

Fantastic! You earned your subscription.

[@colbyfayock]

thank you!!

[@developedbyvarun]

@@colbyfayock btw do you mind telling me where to buy this T-shirt you are wearing?

[@colbyfayock]

@@developedbyvarun i got it on the GitHub Shop though im not seeing it: thegithubshop.com/

[@developedbyvarun]

Sad!

[@keshavakumar9828]

hi colby ,love the content could you do a video on how to work with LOCOMOTIVE SCROLL in next.js . also covering topics like dynamic importing etc. thanks colby

[@colbyfayock]

thanks and appreciate the topic ideas! adding to my list :)

[@GabrielMartinez-ez9ue]

Again, nice tutorial. Although I think you forgot to disconnect the observer in the cleanup function.

[@colbyfayock]

Thanks 😁

[@ebertorresmacedo3667]

this video helped me alot!

[@colbyfayock]

awesome to hear!

[@srichara3092]

Hi, great content, can you please suggest for Table -> infinite vertical scroll, sticky dynamic 1st row and 1st column header , horizontal scroll and buttons at each cell

[@colbyfayock]

thanks for the suggestion, ill mark it down