Wisdom Aigbotsuawisdomsyx.hashnode.dev·Nov 27, 2023A Guide to JavaScript's Intersection Observer APIIn JavaScript, tracking the visibility and intersection of an element on a webpage relative to another element has always been challenging. Traditional methods used to monitor the visibility of elements on a page become resource-intensive when a webp...Discuss·43 readsJavaScript
Joel Adewoleblog.wolzcodelife.com·Oct 23, 2023Build a Custom TikTok Autoplay React Hook With Intersection ObserverHave you ever wondered how social media applications like TikTok, Instagram, or Twitter detect a particular video post that is in the viewport, autoplay it, and then stop it immediately after it goes out of view? In this article, I will explain how I...Discuss·10 likes·108 readsTutorialsJavaScript
Chirag Guptachirag-gupta.hashnode.dev·Oct 14, 2023Using Intersection Observer API in ReactThis article is about using the Intersection Observer API to enhance the visual experience of web applications. We will see the usage of this API in both HTML/CSS projects and React applications. What is Intersection Observer API? (with a working exa...Discuss·2 likes·281 readsReact
Dantuffstuff9.hashnode.dev·Sep 6, 2023Intuitive Scrolling for Chatbot Message StreamingHow do we make a chat interface auto-scroll to the latest message while still allowing users to scroll up to view previous messages without interruption? Without a proper solution, either new messages can get buried, or the user can become frustrated...Discuss·10 likes·288 readsReact
Bassey Oliverolitex.hashnode.dev·Jul 30, 2023Implementing Sticky Navigation Using Javascript’s Intersection Observer API.You must have visited websites whose navigation becomes fixed on scrolling down to other pages, making it possible to navigate the website. If you observed, most of them have no background on the homepage but automatically get one or some slight chan...Discuss·10 likes·52 readsFrontend Development
Emmanuel Olokeemmanueloloke.hashnode.dev·May 23, 2023Using Intersection Observer API in ReactIntroduction There are different reasons to perform some functionalities or animation effects when a user scrolls on a web page. Examples of this could be to toggle a class, to conditionally render different components based on scroll or a certain el...Discuss·17 likes·142 readsJavaScript
Aksharmeet Singhaksharmeet.hashnode.dev·Apr 25, 2023Intersection Observer Hook in ReactEver felt the need to lazy-load images, implement infinite scrolling, and decide whether or not to perform an animation based on what the user will view? Intersection Observer API provides us with a way to do all this. To understand intersection obse...Discuss·33 readsReact
David Jajadaiveedjay.hashnode.dev·Mar 30, 2023How to Implement Reveal on Scroll in React using the Intersection Observer APIAre you looking for an elegant way to reveal content on your React website as users scroll down the page? Look no further than the Intersection Observer API. In this article, you’ll learn how to implement the reveal on scroll effect in React using In...Discuss·372 readsJavaScript
Vishal GosainforViGovishugosain.hashnode.dev·Jan 30, 2023How to Track Element Visibility Using IntersectionObserver in Angular - Step by Step GuideGreetings everyone !! As front-end developers, we often encounter the need to track when an element becomes visible within the viewport. However, this can be a challenging task without a reliable solution. From MDN, Historically, detecting the visib...Discuss·2 likes·605 readsJavaScript
Sandip ShresthaforJoBins Engineeringblog.jobins.jp·Jan 26, 2023Build an exceptional Infinite Scroller using Intersection Observer in Vue3Intersection Observer is an API in JavaScript that allows you to detect when an element enters or leaves a viewport. This can be useful for things like lazy loading images or triggering animations. In this blog post, we will walk through the process ...Discuss·12 likes·352 readsVue.js
