Learn Intersection Observer In 15 Minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 ก.พ. 2025

ความคิดเห็น • 312

  • @aram5642
    @aram5642 3 ปีที่แล้ว +137

    One of the best tuts on this topic. No bs, great pace. Respect!

    • @LennWeltmeister
      @LennWeltmeister 2 ปีที่แล้ว +2

      Ikr, I finally learned how to handle Int Observers

  • @Elenthiriel
    @Elenthiriel 2 ปีที่แล้ว +19

    There are 2 things that are absolutely true about your channel and you
    1 - You really simplify the web for US
    2 - You really helps us build our dream project sooner
    You are awesome, love ya ❤

    • @Dubik_Ks
      @Dubik_Ks 5 หลายเดือนก่อน +2

      да не только для США, но и для всего мира!

  • @JordanAF808
    @JordanAF808 ปีที่แล้ว +1

    Whenever I'm stuck, I can bet money that this channel will have a clear, informative video to help me out. Thanks!

  • @christiansaborio410
    @christiansaborio410 2 ปีที่แล้ว +2

    4:53 into the video, paused it, and with what you explained I was able to make a shopping cart fixed button appear after the logo of website was scrolled out of sight - great explanation!

  • @stevenox3383
    @stevenox3383 ปีที่แล้ว +2

    I feel like such an idiot....I wrote a little virtualization component that does this very thing having no idea this video existed!
    This really helped solidify some of these concepts, many of which I just spent the last few hours learning via api docs.
    Great stuff!

  • @mwdcodeninja
    @mwdcodeninja 3 ปีที่แล้ว +15

    I love your content. No fluff, through, and with practical use cases. Love it!

  • @NirajKumarSingh-b2x
    @NirajKumarSingh-b2x ปีที่แล้ว

    Your blog on this topic of "Intersection Observer API" is phenomenal. NOBODY would have ANY Doubt after calmly reading through that blog... Thank you

  • @sanjitselvan5348
    @sanjitselvan5348 2 ปีที่แล้ว +1

    Man! I searched a lot on this topic, but hadn't found a satisfactory explanation. I understood this concept thoroughly after watching this video. Thanks a ton!

    • @Hafsa0526
      @Hafsa0526 2 ปีที่แล้ว

      Hey Sanjit. Seems like you are clear with your concepts. Are you open to internship/job opportunities in web development?

  • @EmaCovers95
    @EmaCovers95 2 ปีที่แล้ว

    Another day avoiding being fired thanks to tutorials. I love you man, thank you ^^

  • @DarkSomaX
    @DarkSomaX 2 ปีที่แล้ว +2

    Man, this is the second time one of your videos clarified the concepts of JS, the first being the difference between nodes and elements with your cheatsheet, thank you for these videos, they are of great help for someone learning JS from 0 to advanced!

  • @yinonelbaz5309
    @yinonelbaz5309 3 ปีที่แล้ว +4

    What an amazing feature
    I was generally looking for a solution to another problem but it's going to make it easier for me in so many situations
    Thank you so much bro for the great explanations and quality content you upload

  • @ashy7198
    @ashy7198 3 ปีที่แล้ว +1

    Great tutorial was really easy to follow! I forgot to add the align-items:flex-start to my own follow-along of this, and it had me scratching my head as to why it didnt work, on the plus side, I googled hard and now have an even better understanding than before! Cheers! :D

  • @mangojc8977
    @mangojc8977 2 ปีที่แล้ว +2

    Very practical. Reminds me of how google images, facebook, twitter, pinterest... loads images the further you scroll

  • @MarshallBanananana
    @MarshallBanananana 2 ปีที่แล้ว

    This is the fifth video on Intersection Observer I watched and it's the first one, where I'm starting to grasp the concept. Thank you!

  • @fenrirlokison537
    @fenrirlokison537 ปีที่แล้ว

    Again, looking for a specific topic and finding a tutorial from good old kyle. Man I like your tutorials. One time watched===understood

  • @fabio_0
    @fabio_0 3 หลายเดือนก่อน

    your channel is underrated man, your teaching is top class!

  • @murolem
    @murolem 3 ปีที่แล้ว +9

    wow never heard about this 🙉
    this is totally gonna be useful for loading and unloading for big amount of elements

  • @diogosoares1309
    @diogosoares1309 2 ปีที่แล้ว +10

    Hey Kyle, I just went through the MDN documentation and came to your video only after to consolidate the knowledge. I must say you've put a masterclass on display! Keep up the great work, I love your channel.

  • @piyushyadav8691
    @piyushyadav8691 3 ปีที่แล้ว +7

    Been looking for this explanation for a while!
    I've already used this in production but didn't quite have the understanding that I felt like I should have. Had to frankenstein my way from different tutorials, articles and documentation.

    • @albedesigns
      @albedesigns 10 หลายเดือนก่อน

      I was doing the same thing!

  • @royhyde8842
    @royhyde8842 2 ปีที่แล้ว

    Man this is a life saver for lazy loading and infinite scrolling. woow Thanks man.

  • @michaelanteneh2862
    @michaelanteneh2862 ปีที่แล้ว

    Your content is just 🔥🔥🔥 Keep it up bro

  • @hermannrudas
    @hermannrudas 3 ปีที่แล้ว +4

    I've passed 4 days trying to get into this topic using different sources once here, Mr Kyle in less than 15 min not only solved all my doubts but i've also learned how to add infinite images using I-Observer.. Thank You very much

  • @SridTech
    @SridTech 3 ปีที่แล้ว

    Video with a great pace. You actually painted my grey on how those fancy websites do that animation on scroll. Thank you kyle.

  • @wordinarius1950
    @wordinarius1950 2 ปีที่แล้ว

    This guy is my favourite teacher:) the best tutorial on this topic so far! He is teaching only the necessary things and keeps the videos as short as possible👏 very practical!

  • @dienazty8820
    @dienazty8820 ปีที่แล้ว +3

    Just came across this! The entire video is gold, but the lazy loading and infinite scrolling that you cover starting at 11:31 is absolutely dynamite.

  • @FabianAmran
    @FabianAmran 3 ปีที่แล้ว

    Great videos man. Keep this format. I like how you don't waste my time with intros and nonsense

  • @FacePlat3
    @FacePlat3 3 ปีที่แล้ว +1

    Soon as I see a JS feature I don't know I clicked 😄. It really helps that you keep focusing on JS specific tutorials becuase it makes me love JS more.

  • @Hamid-ej4ol
    @Hamid-ej4ol 10 หลายเดือนก่อน

    Thanks man, although i'm a beginner, with your tutorial I learned the Intersection Observer so well.

  • @NamNguyen-oz8uj
    @NamNguyen-oz8uj 3 ปีที่แล้ว +2

    I'm doing my project that needs intersectionObserver for animation. I learned a lot from your video, really helpful. Thank you very much! 🙏🎉

  • @Siegfried-q3y
    @Siegfried-q3y ปีที่แล้ว

    Kyle, thank you so much, you are the best web dev instructor ever. I bought your JS and React courses, the content is amazing, and I don t know how you do this, but every time I ask a question in the course, I get a full answer in the next 24hours. I m progressing a lot and that s thanks to you. and now, I m looking forward for your Next.js course. ) Thanks++++++++

  • @funnylifestyle8174
    @funnylifestyle8174 3 ปีที่แล้ว +1

    I love how you explain complex staff in a nutshell👏👏👏

    • @sicfxmusic
      @sicfxmusic 3 ปีที่แล้ว

      Read his channel name 😁

  • @Agha1
    @Agha1 2 ปีที่แล้ว

    Truly simplified. A big thank you from Syria ❤

  • @74Gee
    @74Gee 10 หลายเดือนก่อน

    Nice tutorial, perfect speed and level of detail, I would also add a function to remove some of the old cards to avoid a tiny scroll bar.

  • @fifthscholar
    @fifthscholar ปีที่แล้ว

    Thankyou Kyle now I understand intersection observer, Now I fixed my bug on my scrollspy active nav with fix navbar with the help of threshold adjustments

  • @minkhantsaw0428
    @minkhantsaw0428 2 ปีที่แล้ว +1

    My fav programing channel

  • @pratikprakash3353
    @pratikprakash3353 4 หลายเดือนก่อน

    Nice one mate. Thank you for such a simple explanation

  • @paulhorowitz3340
    @paulhorowitz3340 2 ปีที่แล้ว

    Thanks

  • @mirkol6076
    @mirkol6076 2 ปีที่แล้ว

    Great explanation, finally someone explain with normal language what this API really does...

  • @Marcox385
    @Marcox385 3 ปีที่แล้ว +3

    I got a 7 in my web application class, but that'll never stop me from becoming a web developer, professor Shaggy, I'll watch 10 times each and every one of these videos in order to achieve it.
    I don't even care that the project required JWT but that was never teached to us, because all I need is here

  • @iamjustine1
    @iamjustine1 2 ปีที่แล้ว

    Best tutorial, simple and easy to understand.

  • @jakeave
    @jakeave 3 ปีที่แล้ว

    I'm just glad this is now supported in all the browsers. I've had to write fallbacks for Safari as recent as last year I think.

  • @frankiii9165
    @frankiii9165 ปีที่แล้ว

    Thank you so much for this amazing tutorial. I couldn't understand and get to work the foreach method so I used for-of instead. Just a few lines and there's an amazing effect.

    • @end4567
      @end4567 ปีที่แล้ว

      Pretty much, forEach is another way of looping through arrays. The first argument inside the callback is always the current element, regardless of what you type inside. Second argument is the index of the current element. Third argument is the entire array you're looping through.
      array.forEach(function(curElem, i, arr) {})
      I hope this helps

  • @said-magomeddzhabrailov7911
    @said-magomeddzhabrailov7911 ปีที่แล้ว

    This video helped me fully understand this API. Thanks

  • @DannyRoyJenuil
    @DannyRoyJenuil ปีที่แล้ว

    Thank you so much for this tutorial. Really helped me to understand the Intersection Observer API!

  • @hzaharr
    @hzaharr 3 ปีที่แล้ว

    I was just now thinking about adding some animations to my portfolio website and boom... There your video is! :D

  • @thisisfabrics
    @thisisfabrics 2 ปีที่แล้ว

    Thank you so much!!! It's very amazing that I spent two hours trying to write "treshold" instead of threshold💀

  • @OldManBears
    @OldManBears ปีที่แล้ว

    Thank you so much Kyle, you sir, are a rockstar. This was incredibly helpful!

  • @hussainmusthaq5567
    @hussainmusthaq5567 2 ปีที่แล้ว

    Highly appreciate your contents. They help me on the daily.

    • @Hafsa0526
      @Hafsa0526 2 ปีที่แล้ว

      Hey Hussain. Have you created projects in React/Node js? Would you be interested in exploring job opportunities in software development?

  • @mg-programming
    @mg-programming 2 ปีที่แล้ว

    One of the biggest fans.
    You are a legend

  • @lauralegerofficial
    @lauralegerofficial 3 ปีที่แล้ว +1

    This is great! I was making a game, and this is just what I needed.

  • @gmaitechnologies
    @gmaitechnologies ปีที่แล้ว

    Thanks for this. The clarity and preciseness is just what I was looking for.

  • @krishgarg2806
    @krishgarg2806 3 ปีที่แล้ว

    Thank you! I knew about this but was always confused on how to practically use it. Thanks

  • @surench862
    @surench862 3 ปีที่แล้ว

    You makes life much easier. Thank you so much for your effort. Your all tutorial much clearer, simpler and precise.

  • @piusvictor8780
    @piusvictor8780 ปีที่แล้ว

    Amazing Tutorial, everything is clear and on point, Great Job Kyle

  • @baolee4622
    @baolee4622 3 ปีที่แล้ว

    this was incredible. I work as a FE developer for a year but even know this trick

  • @steveh7922
    @steveh7922 3 ปีที่แล้ว

    Thank you! I'm 100% using this as soon as I get back to work

  • @kennedya7848
    @kennedya7848 3 ปีที่แล้ว +11

    wow this is a new topic for me

  • @damjan4375
    @damjan4375 ปีที่แล้ว

    Best explanation I found. Great work as always!

  • @spreadItWide
    @spreadItWide 3 ปีที่แล้ว

    YES!!!! Code God strikes again! I have a few ideas I put on the back burner that need this! Never knew about this!

  • @jvfr-
    @jvfr- 2 ปีที่แล้ว

    this is crazyyy, didn't even knew js has a api to watch if element is visible, i always did a trick calculating the scroll lol

  • @Amine-yx5vc
    @Amine-yx5vc ปีที่แล้ว +1

    Respect ❤👌

  • @danilaFro
    @danilaFro 2 ปีที่แล้ว

    Cool, thank you! I was looking for a good lazy loading explanation for a long time

  • @ashkanpower
    @ashkanpower 3 ปีที่แล้ว

    This is totally random, but just today I was doing this by checking elements positions! 😂
    Thx and subscribed.

  • @tumon001
    @tumon001 2 ปีที่แล้ว +1

    Super Detailed Explanation

  • @onthecodeagain
    @onthecodeagain 3 ปีที่แล้ว +1

    I really really dig the pace of this channel as well as how the content is covered. Thanks for the video :)

  • @anshrusia1347
    @anshrusia1347 ปีที่แล้ว

    Great explanation at a perfect pace. 🙏

  • @mohammadalaaelghamry8010
    @mohammadalaaelghamry8010 ปีที่แล้ว

    Amazig video. And amazing way of explaining the subject. Thank you that was very clear and useful.

  • @robertrynard7397
    @robertrynard7397 3 ปีที่แล้ว

    Wow I searched your channel for this exact video yesterday! Your videos have been a huge help thank you so much!

  • @rcarias78
    @rcarias78 3 ปีที่แล้ว +20

    Really enjoyed watching this tut (and your others). Very clear and concise! Hopefully you release the next ones for Mutation and Resize. Question, do you have one on Tailwind design system (or your thoughts on good design systems)? Also, what software do you use (recommend) to record your tuts? Thank you and keep providing the Knowledge for us all !!!

  • @longyuanchuan
    @longyuanchuan ปีที่แล้ว

    This channel is magic

  • @sarbajitbhattacharjee6652
    @sarbajitbhattacharjee6652 3 ปีที่แล้ว

    Your videos are truely simplified. Hats off👌👌

  • @technologyguy2325
    @technologyguy2325 3 ปีที่แล้ว

    This is what I was wondering about. Thanks kiel !

  • @christopher7540
    @christopher7540 3 ปีที่แล้ว

    fantastic video, i was just came across to a website with similar animation and thought how this is possible and after a few hours this video popped out. thanks

  • @GnomePuntTrainerYT
    @GnomePuntTrainerYT 3 ปีที่แล้ว +1

    I see a lot of tutorials on the IntersectionObserver, but they mostly focus on animations other logic focused on the DOM. Meanwhile I find it's most basic and helpful use to be when using it to update the url if you have a vertical site with several anchor tags for different sections.

  • @carlos9484
    @carlos9484 ปีที่แล้ว

    thanks bro. i've benn following your tutorials and you helped me a lot🙏

  • @dragonboy99
    @dragonboy99 3 ปีที่แล้ว

    Oh wow! This is definitely new animation/scrolling knowledge for me. The video was well constructed too. 👍

  • @MrJettann
    @MrJettann 3 ปีที่แล้ว

    I was looking for it so long, so accessible and understandable! Thank you so much!
    Now I look forward to continuing!

  • @vanluutran726
    @vanluutran726 ปีที่แล้ว

    Your video is so good, it's helped me a lot. Many thanks.

  • @ShauryaKumar_1031
    @ShauryaKumar_1031 2 ปีที่แล้ว

    Kevin Powell: CSS and HTML
    Kyle: JS
    this is just the best combo to learn web development, most of my features in my website come from these channels!

    • @Hafsa0526
      @Hafsa0526 2 ปีที่แล้ว

      Hey Shaurya. Good to see you utilize the platform for learning. Have you built projects in JavaScript frameworks?
      Would you like to explore opportunities in software development?

  • @PhilMinecraft
    @PhilMinecraft 3 ปีที่แล้ว

    this is what I need for months!!

  • @yahayaoyinkansola8258
    @yahayaoyinkansola8258 ปีที่แล้ว

    Thank you so much for clarifiying this API for me. i totally get it now!

  • @JamesJansson
    @JamesJansson 2 ปีที่แล้ว

    This was really concise. Excellent tutorial.

  • @Powerful-Manifestor-
    @Powerful-Manifestor- 2 ปีที่แล้ว

    Explained so clearly and truly simplified it :)

  • @danieldbird
    @danieldbird 2 ปีที่แล้ว

    Very thorough. Thanks Kyle.

  • @smothie96
    @smothie96 2 ปีที่แล้ว

    Hello I was wondering how to understand intersection obeservative and found your video. It was very helpful and easy to understand! Thank you ☺️

  • @razzasizer
    @razzasizer 3 ปีที่แล้ว

    this is an excellent video on intersection observer.. thank you kyle!

  • @sanghvian
    @sanghvian 3 ปีที่แล้ว

    You're a friggin rockstar man !

  • @kirankothandan5529
    @kirankothandan5529 ปีที่แล้ว

    This is really wonderful explanation.Thank you ❤

  • @aparnaiyer5873
    @aparnaiyer5873 3 ปีที่แล้ว

    I loved the api I achieved lazy loading images in angular through this!

    • @Hafsa0526
      @Hafsa0526 2 ปีที่แล้ว

      Hi Aparna. Have you done projects on Reactjs? Are you a fresher and looking for opportunities in software development?

  • @Llamanarte
    @Llamanarte 3 ปีที่แล้ว

    I was just looking for something like this. That you very much!

  • @謝鎮宇-i2b
    @謝鎮宇-i2b 3 ปีที่แล้ว

    Thank you for making this video! Im actually looking the way of doing this effect on my project!

  • @alexeleave4551
    @alexeleave4551 3 ปีที่แล้ว

    Wow! What a cool thing, thanks for sharing us. Gonna try that. No longer have to subscribe for the scroll events on window, haha.

  • @bernarmay1950
    @bernarmay1950 2 ปีที่แล้ว

    This is a beautiful explanation👍. I love it

  • @nikhil6842
    @nikhil6842 2 ปีที่แล้ว

    Thanks Kyle, for such an informative video

  • @thegreatprogrammer5937
    @thegreatprogrammer5937 3 ปีที่แล้ว

    Oh
    Have been a js / ts dev for about 2 yrs now but never new about this!

  • @kanhaiyakumar2685
    @kanhaiyakumar2685 3 ปีที่แล้ว

    U solved my doubt.. Thanks ☺️☺️!!

  • @ryanthen1047
    @ryanthen1047 3 ปีที่แล้ว +1

    Great hairline dude. You're blessed. Good tut as well

  • @SZOKE19940321
    @SZOKE19940321 2 ปีที่แล้ว

    exactly the video I need, u 're the best man : D

  • @Shaheer-xs5os
    @Shaheer-xs5os ปีที่แล้ว

    That was Full of knowledge 🎁

  • @Miguel-sg7zh
    @Miguel-sg7zh 7 หลายเดือนก่อน

    Thank you very much, you have helped me a lot ❤