Yesterday i created a mini portfolio using AOS library (which offers nice animations) but i felt like with Intersection Observer i had more control over the threshold, since i already had some familiarity with Intersection Observer in vanilla JS, i felt curious about the way it would look in React.
Yesterday's Project
The Intersection Observer API allows for asynchronous checking of the ratio of the intersection of an element with a viewport and will only fire a callback when the predefined threshold(s) are met. This has opened up many user experiences that were difficult to implement in a performant way, such as infinite scrolling, lazy load images, or delaying animations until visible..
https://medium.com/the-non-traditional-developer/how-to-use-an-intersectionobserver-in-a-react-hook-9fb061ac6cb5 - Read More! Link
The Intersection Observer API is a browser API which can be used to track the position of HTML elements in context to the actual viewport of the browser. The official documentation says: "The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport."
https://www.robinwieruch.de/react-intersection-observer-api - Read More! Link
npm i react
npm i react-dom
npm i react-scripts
npm i node-sass --save
npm i autoprefixer@9.8.0
npm i gh-pages --save-dev
npm i react-router-dom
npm i react-use
npm i gsap