Projects in Awesome Lists tagged with intersectionobserver

https://github.com/verlok/vanilla-lazyload

LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.

hacktoberfest iframes images intersectionobserver lazy-loading lazy-sizes lazyload lazyload-iframes lazyload-images lazyload-script lazyload-videos picture picture-tag responsive-images srcset srcset-sizes vanilla-javascript vanilla-js videos webp

Last synced: 12 Dec 2025

https://github.com/thebuilder/react-intersection-observer

React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.

hook hooks intersection-observer intersectionobserver intersectionobserver-api lazy-loading monitor performance react react-hooks reactjs scrolling viewport visibility

Last synced: 12 May 2025

https://github.com/aljullu/react-lazy-load-image-component

React Component to lazy load images and components using a HOC to track window scroll position.

hoc intersection-observer intersectionobserver lazy-loading lazyload lazyload-images react react-component react-lazy react-lazy-load react-lazy-module react-performance reactjs server-side-rendering ssr

Last synced: 14 May 2025

https://github.com/Aljullu/react-lazy-load-image-component

React Component to lazy load images and components using a HOC to track window scroll position.

hoc intersection-observer intersectionobserver lazy-loading lazyload lazyload-images react react-component react-lazy react-lazy-load react-lazy-module react-performance reactjs server-side-rendering ssr

Last synced: 12 Apr 2025

https://github.com/beekai-oss/react-simple-img

🌅 React lazy load images with IntersectionObserver API and Priority Hints

animation hints images-lazy intersectionobserver lazyload lazyload-images placeholder priority responsive-images

Last synced: 16 May 2025

https://github.com/svelte-inview/svelte-inview

A Svelte action that monitors an element enters or leaves the viewport.🔥

hacktoberfest intersection-observer intersectionobserver intersectionobserver-api javascript observer svelte svelte-component svelte-js svelte3 typescript viewport

Last synced: 16 May 2025

https://github.com/scaccogatto/vue-waypoint

trigger functions and events based on the element position on the screen

intersectionobserver triggers vue vue3

Last synced: 08 Apr 2025

https://github.com/heavyy/vue-intersect

A Vue component to add intersection-observer to a Vue component or HTML element.

intersectionobserver vue vue-components

Last synced: 04 May 2025

https://github.com/dockyard/ember-in-viewport

Detect if an Ember View or Component is in the viewport @ 60FPS

ember intersectionobserver viewport

Last synced: 16 May 2025

https://github.com/BKWLD/vue-in-viewport-directive

Vue 2 directive that adds css classes when the element is the viewport

directive intersectionobserver viewport vue

Last synced: 02 Aug 2025

https://github.com/bkwld/vue-in-viewport-directive

Vue 2 directive that adds css classes when the element is the viewport

directive intersectionobserver viewport vue

Last synced: 12 Apr 2025

https://github.com/matheusgrieger/vue-clazy-load

Component-based lazy (CLazy) load images in Vue.js 2

intersectionobserver lazy-load lazy-loading vue vue-components vuejs2

Last synced: 20 Sep 2025

https://github.com/jesusbotella/ngx-lazy-load-images

Image lazy load library for Angular 2+

angular angular10 angular11 angular2 angular4 angular9 angularuniversal images intersection-observer intersectionobserver lazy-load lazy-loading mutationobserver

Last synced: 06 Apr 2025

https://github.com/ljbc1994/blazorintersectionobserver

🔎 Intersection Observer API wrapper for Blazor applications

blazor intersectionobserver intersectionobserver-api typescript

Last synced: 09 Apr 2025

https://github.com/ljbc1994/BlazorIntersectionObserver

🔎 Intersection Observer API wrapper for Blazor applications

blazor intersectionobserver intersectionobserver-api typescript

Last synced: 26 Mar 2025

https://github.com/bkwld/vue-visual

Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.

intersectionobserver lazy-loading loader srcset video-player vue

Last synced: 05 Apr 2025

https://github.com/AvraamMavridis/react-intersection-visible-hook

React Hook to track the visibility of a functional component

hook intersectionobserver react visibility

Last synced: 16 Mar 2025

https://github.com/avraammavridis/react-intersection-visible-hook

React Hook to track the visibility of a functional component

hook intersectionobserver react visibility

Last synced: 19 Mar 2025

https://github.com/rubenspgcavalcante/progressive-image-loading

A live example of progressive image loading strategies

example intersectionobserver progressive-image-loading react webpack

Last synced: 21 Jul 2025

https://github.com/svelte-plugins/viewable

A rule-based approach to tracking element visibility.

advertising-and-tracking beacons events iab impressions instrumentation intersectionobserver javascript lazyload measurement observability observer svelte tracking viewability viewable

Last synced: 24 Apr 2025

https://github.com/biyuqi/vue-intersection-observer

Vue component for the Intersection <Observer /> API

intersection-observer intersectionobserver intersectionobserver-api vue-component vue-intersection-observer vue2

Last synced: 16 Mar 2025

https://github.com/tejasq/react-hook-intersection-observer

A simple React hook that works with the Intersection Observer API.

hooks intersectionobserver react web

Last synced: 15 Apr 2025

https://github.com/freqdec/peekaboo

Know when elements are about to scroll into the viewport

intersectionobserver lazy-loading lazyload-images

Last synced: 14 Apr 2025

https://github.com/sagalbot/breeze

💨 A tiny library to transition your DOM elements as they become visible in the viewport.

animations intersectionobserver tailwindcss transitions

Last synced: 12 Apr 2025

https://github.com/zeusdeux/observe-element-in-viewport

Wrapper around IntersectionObserver to hide away its weirdness and increase ease of usability

intersection-observer intersectionobserver viewport

Last synced: 17 Mar 2025

https://github.com/justinribeiro/stl-part-viewer

A lit-element web component that uses Three.js to display an STL model file.

intersectionobserver litelement polymer stl three webcomponent

Last synced: 27 Aug 2025

https://github.com/phuocng/intersection-observer-examples

Practical, real world examples of Intersection Observer

intersectionobserver intersectionobserver-api react react-hook vanilla-javascript

Last synced: 18 Mar 2025

https://github.com/the-road-to-learn-react/react-intersection-observer-api-example

Showcasing of the Intersection Observer API in React with createRef()

createref intersection-observer intersectionobserver intersectionobserver-api react reactjs

Last synced: 10 Apr 2025

https://github.com/callmecavs/obzerv

A convenient wrapper around IntersectionObserver for tracking element position relative to the viewport.

intersectionobserver

Last synced: 19 Apr 2025

https://github.com/innovatorved/scroll-animation

Acroll Animation using Browser IntersectionObserver API

css html innovatorved intersectionobserver intersectionobserver-api javascript

Last synced: 18 Mar 2025

https://github.com/krutsch/progressive-picture

Native Lazy Loaded Picture Element with Progressive Image Change

dom element image intersectionobserver lazyload mutationobserver picture pictures progressive progressive-image-loading

Last synced: 15 May 2025

https://github.com/jaspero/ng-image-preload

An image preload module for Angular using IntersectionObserver in favour of scroll listener's.

angular image-preloader intersectionobserver lazy-loading

Last synced: 01 Jul 2025

https://github.com/realgeoffrey/vue-observer-directive

DOM展示则触发（Vue@2自定义指令）

intersectionobserver vue vue-directive

Last synced: 16 Mar 2025

https://github.com/5j54d93/dcard-2022-web-frontend-intern-homework

A React app designed like Dcard with Bootstrap that could search a GitHub user's repositories from REST API and list with infinite scroll！

api bootstrap css dcard github hook html infinite-scroll intersectionobserver javascript localstorage react router rwd sessionstorage ui web

Last synced: 22 Mar 2025

https://github.com/codingbygopal/react-movieholms

MovieHolms is a responsive platform that has a huge collection of movies, series, and celebrity content. This platform has been developed using TMDb API, React.js, and Tailwind.

front-end-development frontend intersection-observer intersection-observer-api intersectionobserver intersectionobserver-api lazy-loading lazy-loading-images react reactjs reactplayer reactrouterdom skeleton-loading tailwind tailwindcss tmdb tmdb-api tmdb-movie-search

Last synced: 31 Jul 2025

https://github.com/lostisworld/astro-magneto

Let an element follow the mouse cursor with a graceful and smooth motion.

astro astro-component intersectionobserver magnet movement transform3d typescript

Last synced: 10 Apr 2025

https://github.com/shahnhogan/elm-intersection-observer-example

An example of using Elm with the Intersection Observer API

elm intersectionobserver

Last synced: 12 Apr 2025

https://github.com/schirrel/footer-stick-observable

A helper for bottom position:sticky, to listen when it is stuck or not

css intersection-observer intersectionobserver javascript position

Last synced: 22 Jan 2026

https://github.com/nswdpc/silverstripe-progressive-image

A progressive image loader for Silverstripe 4 (archiving soon)

image intersectionobserver lazy-loading

Last synced: 15 Jul 2025

https://github.com/tflx/content-observer

Watch one or more targets position for when they intersect a defined point in the viewport.

content intersection intersectionobserver javascript menuspy observer vanilla viewport

Last synced: 14 Mar 2025

https://github.com/nechehin/lazyload

Javascript plugin for lazy load images with IntersectionObserver

image-loading images img intersectionobserver javascript javascript-plugin lazyload

Last synced: 16 Jan 2026

https://github.com/prutya/tutorial-image-slider

How to implement a slider element using React, Tailwind.css and Intersection Observer API

intersectionobserver nextjs react tailwind tailwindcss

Last synced: 18 Mar 2025

https://github.com/adoratorio/medusa

A simple utility to easy handle multiple IntersectionObserver

intersectionobserver intersectionobserver-manager lazyload-utils

Last synced: 23 Aug 2025

https://github.com/leo555/lazyload

Lazyload demo

intersectionobserver lazyload

Last synced: 24 Feb 2025

https://github.com/anacoelhovicente/peekaboo-anim

JavaScript helper for viewport based CSS animations

animation css intersectionobserver javascript minimal scroll viewport

Last synced: 18 Jan 2026

https://github.com/mksonkar/portfolio-react-nextjs

A fully responsive portfolio using React, Next.js and TailwindCSS

intersection-observer intersectionobserver next nextjs react react-hooks reactjs tailwind tailwind-css tailwindcss typescript typescript-react

Last synced: 04 Oct 2025

https://github.com/jerosoler/ioaa

Intersection Observer API Animation ⚡ Fast animation Inteserction Observer library

animation animation-css css intersectionobserver intersectionobserver-api ioa stylesheets

Last synced: 30 Jul 2025

https://github.com/wpj/react-peekaboo

React hooks for monitoring an element's intersection with the viewport

intersectionobserver react

Last synced: 01 Jul 2025

https://github.com/twhy/lazycats

Lazy Load Octocats with IntersectionObserver API

intersectionobserver

Last synced: 07 Nov 2025

https://github.com/jonatandb/reactavanzadoplatzi

Petgram -> Mobile friendly, Pet Instagram clone by Jonatandb

babel cypress es6 graphql hooks intersectionobserver javascript jonatandb js proptypes react react-apollo-graphql react-helmet react-lazy styled-components webpack

Last synced: 28 Feb 2025

https://github.com/bmoren/scrollyclasser

a very lightweight class / css animation & transition based scrollytelling library

animation css css-animations css-classes intersection-observer intersectionobserver inview news paralax saljs scroll scrolling scrollytelling storytelling student teaching

Last synced: 09 Apr 2025

https://github.com/innaanatoliivna/goit-js-hw-11

INTRSECTION OBSERVER / Smooth page scrolling / usage simplelightbox

intersectionobserver javascript parcel

Last synced: 14 Oct 2025

https://github.com/codenkoffee/personal-portfolio-2022

Let the art speak for itself!

figma figmadesign html5 intersection-observer intersectionobserver kute libraries particles-js photoshop

Last synced: 20 Feb 2025

https://github.com/codenkoffee/travel-tourism-agency

MyEgypt is an Egyptian company which operates trips & lodges in Egypt. It owns lodges in pretty much every governorate in Egypt, Cairo being the most one.

css css3 html html-css-javascript html5 intersection-observer intersectionobserver javascript javascript-library jquery photography photoshop vscode

Last synced: 30 Dec 2025

https://github.com/dimianni/lazyload

Lazy Load images with IntersectionObserver.

intersectionobserver javascript js lazy-loading lazy-loading-image lazyload lazyload-images vanilla-javascript vanilla-js

Last synced: 23 Mar 2025

https://github.com/ideasonpurpose/iop-motion

IOP's proprietary animation library

animation intersectionobserver motion

Last synced: 03 Mar 2025

https://github.com/efeozalpp/dynamic-theme

React app with adaptive theme UI driven by user-visible elements (via IntersectionObserver). Each user gets three dynamic theme colors that update based on visibility, sorting, and interaction. A Q5.js canvas visualizes the theme with procedural fireworks animation.

image-sorting intersectionobserver lottie-animation nodejs q5js reactjs responsive-layout sanityio user-interface ux-design webpack5