intersection-observer | Topic | Ecosyste.ms: Repos

Topic: "intersection-observer"

thebuilder/react-intersection-observer

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

Language: TypeScript - Size: 6.95 MB - Last synced at: 1 day ago - Pushed at: 12 days ago - Stars: 5,289 - Forks: 189

Aljullu/react-lazy-load-image-component

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

Language: JavaScript - Size: 1.91 MB - Last synced at: 11 days ago - Pushed at: 4 months ago - Stars: 1,503 - Forks: 113

wellyshen/react-cool-inview

😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).

Language: TypeScript - Size: 4.58 MB - Last synced at: about 15 hours ago - Pushed at: over 1 year ago - Stars: 1,467 - Forks: 41

awesome-reveal/react-awesome-reveal

React components to add reveal animations using the Intersection Observer API and CSS Animations.

Language: TypeScript - Size: 6.64 MB - Last synced at: 6 days ago - Pushed at: 4 months ago - Stars: 1,168 - Forks: 43

researchgate/react-intersection-observer

React component for the Intersection <Observer /> API

Language: JavaScript - Size: 8.21 MB - Last synced at: 10 days ago - Pushed at: almost 2 years ago - Stars: 1,143 - Forks: 60

wellyshen/react-cool-img

😎 🏞 A React <Img /> component let you handle image UX and performance as a Pro!

Language: TypeScript - Size: 12 MB - Last synced at: 4 days ago - Pushed at: over 1 year ago - Stars: 778 - Forks: 29

svelte-inview/svelte-inview

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

Language: TypeScript - Size: 3.2 MB - Last synced at: 14 days ago - Pushed at: 7 months ago - Stars: 771 - Forks: 23

mgechev/ngx-quicklink

Quicklink prefetching strategy for the Angular router

Language: TypeScript - Size: 1.75 MB - Last synced at: 10 days ago - Pushed at: 5 months ago - Stars: 756 - Forks: 43

jsonkao/react-scrollama

Simple scrollytelling with the IntersectionObserver in React.

Language: JavaScript - Size: 8.84 MB - Last synced at: 15 days ago - Pushed at: about 1 month ago - Stars: 394 - Forks: 30

roderickhsiao/react-in-viewport

Detect if React component is in viewport

Language: TypeScript - Size: 4.91 MB - Last synced at: 10 days ago - Pushed at: 26 days ago - Stars: 349 - Forks: 32

metonym/svelte-intersection-observer

Detect if an element is in the viewport using the Intersection Observer API

Language: Svelte - Size: 1.27 MB - Last synced at: 9 days ago - Pushed at: 18 days ago - Stars: 331 - Forks: 8

shinsenter/defer.js

🥇 A lightweight JavaScript library that helps you lazy load (almost) anything. Defer.js is dependency-free, highly efficient, and optimized for Web Vitals.

Language: JavaScript - Size: 928 KB - Last synced at: 6 days ago - Pushed at: 9 months ago - Stars: 281 - Forks: 42

fpapado/react-lazy-images

🖼️ 🛋️ Components and utilities for lazy image loading in React

Language: TypeScript - Size: 3.04 MB - Last synced at: 11 days ago - Pushed at: almost 2 years ago - Stars: 266 - Forks: 25

k3nsei/ng-in-viewport

Allows us to check if an element is within the browsers visual viewport

Language: TypeScript - Size: 9.05 MB - Last synced at: 1 day ago - Pushed at: 6 months ago - Stars: 226 - Forks: 28

codrops/ScrollingLettersAnimation

A switching title effect where a fixed element changes depending on the scroll position.

Language: HTML - Size: 1.18 MB - Last synced at: 12 months ago - Pushed at: about 7 years ago - Stars: 226 - Forks: 49

rdmurphy/scroller

📜 A super-tiny library for your scrollytelling needs.

Language: JavaScript - Size: 1.92 MB - Last synced at: 11 days ago - Pushed at: about 1 month ago - Stars: 180 - Forks: 6

ng-web-apis/intersection-observer 📦

A library for idiomatic use of IntersectionObserver with Angular

Language: TypeScript - Size: 5 MB - Last synced at: 3 days ago - Pushed at: almost 2 years ago - Stars: 154 - Forks: 4

zeusdeux/use-is-in-viewport

A react hook to find out if an element is in a given viewport with a simple api.

Language: JavaScript - Size: 1.93 MB - Last synced at: 27 days ago - Pushed at: about 2 years ago - Stars: 149 - Forks: 7

researchgate/react-intersection-list

React infinite scroll using the Intersection <Observer /> API

Language: JavaScript - Size: 8.22 MB - Last synced at: 11 months ago - Pushed at: almost 2 years ago - Stars: 140 - Forks: 13

pomber/intersection-observer-debugger

A script you include during development that shows the root, target, and intersection every time an IntersectionObserver is triggered.

Language: JavaScript - Size: 85 KB - Last synced at: 10 days ago - Pushed at: over 2 years ago - Stars: 135 - Forks: 2

zhbhun/react-native-intersection-observer

React Native component that monitors when an element enters or leaves the client viewport.

Language: TypeScript - Size: 378 KB - Last synced at: 4 days ago - Pushed at: over 1 year ago - Stars: 112 - Forks: 14

cats-oss/use-intersection

React Hooks for IntersectionObserver.

Language: TypeScript - Size: 1.46 MB - Last synced at: 11 days ago - Pushed at: 17 days ago - Stars: 108 - Forks: 5

tudorgergely/use-scroll-to-bottom

React Hook which tells you when you've scrolled to bottom

Language: JavaScript - Size: 2.51 MB - Last synced at: 5 days ago - Pushed at: about 2 years ago - Stars: 107 - Forks: 4

BKWLD/vue-in-viewport-mixin

Vue 2 mixin to determine when a DOM element is visible in the client window

Language: JavaScript - Size: 3.95 MB - Last synced at: 11 days ago - Pushed at: 3 months ago - Stars: 102 - Forks: 14

bitmap/react-hook-inview

React hook for detecting when an element is in the viewport

Language: TypeScript - Size: 1.23 MB - Last synced at: 5 days ago - Pushed at: 12 months ago - Stars: 86 - Forks: 5

cesarolvr/murphyjs-lib

A simple way to implement scroll based reveal animations in your pages: https://cesarolvr.github.io/murphyjs-lib/index.html

Language: JavaScript - Size: 2.59 MB - Last synced at: 3 days ago - Pushed at: about 2 years ago - Stars: 80 - Forks: 2

jesusbotella/ngx-lazy-load-images

Image lazy load library for Angular 2+

Language: TypeScript - Size: 3.91 MB - Last synced at: 12 months ago - Pushed at: over 2 years ago - Stars: 80 - Forks: 19

vivaxy/impression 📦

👀Element view notifier

Language: JavaScript - Size: 252 KB - Last synced at: about 1 month ago - Pushed at: 11 months ago - Stars: 78 - Forks: 4

onderonur/react-intersection-observer-hook

React hook to use IntersectionObserver declaratively.

Language: TypeScript - Size: 846 KB - Last synced at: 4 days ago - Pushed at: 4 months ago - Stars: 73 - Forks: 7

openfresh/viewport-observer

React Component that observe changes in the intersection of a target element with viewport using IntersectionObserver

Language: JavaScript - Size: 3.62 MB - Last synced at: about 1 month ago - Pushed at: almost 5 years ago - Stars: 66 - Forks: 3

LazyHTML is an OpenSource Javascript Library that Supports Lazy Loading of any elements without Modifying Code, LazyHTML can lazy load Ads, Videos, Images, Widgets, Javascript, CSS, Inline-Javascript, Inline-CSS & Any HTML.

Language: JavaScript - Size: 55.7 KB - Last synced at: about 1 month ago - Pushed at: over 3 years ago - Stars: 55 - Forks: 12

martinlaxenaire/scroll-observer

Really simple Intersection Observer helper

Language: JavaScript - Size: 33.2 KB - Last synced at: 10 days ago - Pushed at: about 4 years ago - Stars: 51 - Forks: 6

shinsenter/defer.php 📦

🚀 A PHP library that focuses on minimizing payload size of HTML document and optimizing page speed.

Language: PHP - Size: 335 KB - Last synced at: 8 days ago - Pushed at: over 1 year ago - Stars: 42 - Forks: 6

snewcomer/intersection-observer-admin

Intersection Observer Admin for better performance

Language: TypeScript - Size: 392 KB - Last synced at: 13 days ago - Pushed at: 3 months ago - Stars: 39 - Forks: 7

beyonk-group/svelte-scrollspy

Scroll Spy component for Svelte

Language: JavaScript - Size: 363 KB - Last synced at: about 1 year ago - Pushed at: over 2 years ago - Stars: 38 - Forks: 4

BiYuqi/vue-intersection-observer

Vue component for the Intersection <Observer /> API

Language: Vue - Size: 1.56 MB - Last synced at: 22 days ago - Pushed at: about 2 years ago - Stars: 35 - Forks: 5

bnthor/animon

Animate DOM elements when the appear in the viewport

Language: JavaScript - Size: 153 KB - Last synced at: 21 days ago - Pushed at: over 2 years ago - Stars: 33 - Forks: 4

lessp/react-is-visible

A small library for React to know if an element is on screen or not

Language: JavaScript - Size: 5.47 MB - Last synced at: 3 days ago - Pushed at: about 2 years ago - Stars: 28 - Forks: 4

LBrian/content-visibility

Web Component uses CSS content-visibility and fallback Intersection Observer

Language: HTML - Size: 34.5 MB - Last synced at: 4 days ago - Pushed at: about 2 years ago - Stars: 28 - Forks: 2

r17x/rescript-libs

⚡️ a Collections and Essential set of Library, Utility, & Tools for ReScript Lang especially in Web.

Language: ReScript - Size: 249 KB - Last synced at: 5 days ago - Pushed at: 7 months ago - Stars: 24 - Forks: 2

ardaogulcan/react-use-observer

Performant react hooks for WebApi Observers, useResizeObserver, useInteractionObserver, useMutationObserver

Language: JavaScript - Size: 1.09 MB - Last synced at: 4 days ago - Pushed at: over 2 years ago - Stars: 24 - Forks: 3

zeusdeux/observe-element-in-viewport

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

Language: TypeScript - Size: 90.8 KB - Last synced at: 4 days ago - Pushed at: over 5 years ago - Stars: 24 - Forks: 1

apertureless/vue-observable

IntersectionObserver, MutationObserver and PerformanceObserver in Vue.js

Language: JavaScript - Size: 95.7 KB - Last synced at: 4 days ago - Pushed at: almost 6 years ago - Stars: 24 - Forks: 4

samouss/react-infinite-scroll-list

Manage infinite list with the IntersectionObserver API

Language: JavaScript - Size: 2.18 MB - Last synced at: 3 days ago - Pushed at: 20 days ago - Stars: 22 - Forks: 2

CaptainCodeman/svelte-intersection-observer-action

Svelte Action for Intersection Observer

Language: TypeScript - Size: 141 KB - Last synced at: 4 days ago - Pushed at: 8 months ago - Stars: 22 - Forks: 0

zwelhtetyan/tiktok-clone

Video sharing web app

Language: TypeScript - Size: 1.96 MB - Last synced at: 2 months ago - Pushed at: 2 months ago - Stars: 21 - Forks: 22

srigar/react-lazyloading

React Lazy Loading - Lazy load the component or anything by using Intersection Observer API

Language: JavaScript - Size: 979 KB - Last synced at: 5 days ago - Pushed at: about 2 years ago - Stars: 21 - Forks: 4

sawyerclick/svelte-lazy-loader

A lazy-loader component library for Svelte

Language: CSS - Size: 4.41 MB - Last synced at: 6 days ago - Pushed at: about 3 years ago - Stars: 21 - Forks: 1

monoeq/monolazy

Extended nanocomponent providing onEnter callback

Language: JavaScript - Size: 2.93 KB - Last synced at: about 1 year ago - Pushed at: almost 5 years ago - Stars: 21 - Forks: 4

s-patompong/alpine-intersect-animate

An Alpine.js plugin to animate DOM once it shows up on the viewport

Language: JavaScript - Size: 2.93 KB - Last synced at: 16 days ago - Pushed at: 10 months ago - Stars: 20 - Forks: 0

myWsq/scroom

A smart library for cool scrolling effects, based on Intersection Observer.

Language: TypeScript - Size: 625 KB - Last synced at: about 1 month ago - Pushed at: almost 4 years ago - Stars: 20 - Forks: 0

jonikanerva/react-visibility-observer

React component for watching when an element is visible in the viewport.

Language: TypeScript - Size: 250 KB - Last synced at: 21 days ago - Pushed at: almost 2 years ago - Stars: 19 - Forks: 2

cdowdy/io-lazyload

A javascript library to lazy load images with intersection observer

Language: HTML - Size: 1.49 MB - Last synced at: about 1 year ago - Pushed at: over 2 years ago - Stars: 19 - Forks: 6

maciekgrzybek/react-laz-y

React lazy loading with Intersection Observer API

Language: TypeScript - Size: 1.39 MB - Last synced at: 7 months ago - Pushed at: almost 4 years ago - Stars: 19 - Forks: 0

LeonidasEsteban/intersection-observer-netflix

clase #2 de youtube.com/LeonidasEsteban

Language: HTML - Size: 1000 Bytes - Last synced at: 3 days ago - Pushed at: almost 6 years ago - Stars: 19 - Forks: 9

alexvcasillas/react-spring-pop

Animate React elements when they enter the viewport with physics based animations

Language: TypeScript - Size: 813 KB - Last synced at: 9 days ago - Pushed at: 7 months ago - Stars: 18 - Forks: 3

AbdallahHemdan/vee-observe

Detect when an element is becoming visible or hidden on the page using Vue component for the Intersection observer API

Language: Vue - Size: 257 KB - Last synced at: 5 days ago - Pushed at: about 2 years ago - Stars: 17 - Forks: 1

outbrain-inc/ViewabilityHelper

Lightweight cross-browser library that enables you to create a watcher for a given element, and receive a callback for it's intersections with the viewport

Language: JavaScript - Size: 106 KB - Last synced at: about 18 hours ago - Pushed at: about 2 years ago - Stars: 15 - Forks: 6

lessp/bs-react-is-visible

A small library that lets you know whether a component is visible on screen or not.

Language: Reason - Size: 1.28 MB - Last synced at: 13 days ago - Pushed at: over 2 years ago - Stars: 15 - Forks: 1

simbathesailor/react-infinite-scroll

A dead simple infinite scroll (1.3 kb gzipped) for friends

Language: TypeScript - Size: 7.74 MB - Last synced at: 5 days ago - Pushed at: over 2 years ago - Stars: 14 - Forks: 2

cantonjs/react-scroll-view

React scroll view component

Language: JavaScript - Size: 245 KB - Last synced at: 13 days ago - Pushed at: over 6 years ago - Stars: 14 - Forks: 1

platzi/laboratorio-fakestore

Language: JavaScript - Size: 8.79 KB - Last synced at: 3 days ago - Pushed at: about 1 year ago - Stars: 13 - Forks: 61

eatsleepprototype/svelte-use-io

Svelte actions for using intersection observer

Language: Svelte - Size: 137 KB - Last synced at: 28 days ago - Pushed at: about 3 years ago - Stars: 13 - Forks: 1

the-road-to-learn-react/react-intersection-observer-api-example

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

Language: JavaScript - Size: 1.47 MB - Last synced at: 4 days ago - Pushed at: almost 5 years ago - Stars: 13 - Forks: 6

SashaJarvi/vue-inline-calendar

The inline calendar component for Vue3

Language: Vue - Size: 113 KB - Last synced at: about 1 month ago - Pushed at: almost 2 years ago - Stars: 12 - Forks: 5

Kholid060/v-intersect

Detect when an element is visible or hidden on user viewport

Language: JavaScript - Size: 658 KB - Last synced at: 4 days ago - Pushed at: about 2 years ago - Stars: 11 - Forks: 4

LonelyCpp/rn-scroll-viewport-tracker

modern scroll-view port tracker for react native

Language: TypeScript - Size: 11.4 MB - Last synced at: 14 days ago - Pushed at: about 2 months ago - Stars: 10 - Forks: 1

Iryna-Vyshniak/LittleLingo

...in progress... LittleLingo - An interactive app designed to spark a lifelong love for learning English in children. Created with heartfelt dedication for my own children 💓, LittleLingo offers a delightful and playful way to master new words and phrases, making learning an adventure 💓...

Language: TypeScript - Size: 124 MB - Last synced at: 22 days ago - Pushed at: 3 months ago - Stars: 10 - Forks: 0

bsonntag/react-use-intersection-observer

React hook for using intersection observers.

Language: JavaScript - Size: 441 KB - Last synced at: 12 days ago - Pushed at: over 1 year ago - Stars: 10 - Forks: 0

bikecoders/ngx-sticky 📦

Angular directive that adds sticky position to an HTML element and also applies and remove a custom class when the element is sticky positioned.

Language: TypeScript - Size: 4.51 MB - Last synced at: 9 months ago - Pushed at: over 2 years ago - Stars: 10 - Forks: 3

asvny/lite-iframe

A web component which enhances UX by lazy loading iframes and provides a better fallback UI

Language: TypeScript - Size: 1.58 MB - Last synced at: about 1 year ago - Pushed at: over 2 years ago - Stars: 10 - Forks: 0

pldg/scroll-interactions

Easy scroll-driven interactions in the browser built on top of IntersectionObserver

Language: JavaScript - Size: 145 KB - Last synced at: 7 days ago - Pushed at: over 2 years ago - Stars: 9 - Forks: 1

markteekman/easybank-landing-page

Frontend Mentor challenge "Easybank Landing Page" using CSS Flexbox and Grid, Accessibility best practices, CSS Animations and the JavaScript IntersectionObserver.

Language: Astro - Size: 1.61 MB - Last synced at: about 22 hours ago - Pushed at: over 3 years ago - Stars: 9 - Forks: 0

nitishkr88/progressive-image-loading

Progressive Image Loading Techniques

Language: JavaScript - Size: 19.5 MB - Last synced at: about 2 years ago - Pushed at: over 6 years ago - Stars: 9 - Forks: 1

nmanikiran/browser-apis

There are a large number of Web / Browser APIs available. This repo contains the demos those APIs

Language: JavaScript - Size: 87.9 KB - Last synced at: about 2 months ago - Pushed at: about 2 months ago - Stars: 8 - Forks: 2

ibrahimcesar/react-quicklink 📦

⚡️Faster subsequent page-loads by prefetching in-viewport links during idle time for React, port of https://getquick.link

Language: JavaScript - Size: 200 KB - Last synced at: 10 days ago - Pushed at: over 2 years ago - Stars: 8 - Forks: 2

elixir-js/vue-lazy

Component for lazy image loading. Written in Vue js.

Language: JavaScript - Size: 223 KB - Last synced at: 2 days ago - Pushed at: over 3 years ago - Stars: 8 - Forks: 1

arnellebalane/navigation-scroll-spy

Navigation scroll spy demo using IntersectionObserver API and VueJS

Language: Vue - Size: 387 KB - Last synced at: 20 days ago - Pushed at: over 6 years ago - Stars: 8 - Forks: 1

vivaxy/appear-event 📦

👀Element appear event.

Language: TypeScript - Size: 2.79 MB - Last synced at: 5 days ago - Pushed at: 11 months ago - Stars: 7 - Forks: 1

VetBlack/Reimage

React library for working with images

Language: TypeScript - Size: 813 KB - Last synced at: 5 days ago - Pushed at: over 1 year ago - Stars: 7 - Forks: 1

TropicolX/space-explorer-scroll

Explore the magic of infinite scroll in React by embarking on a cosmic journey through a card-based planet explorer. Harness the power of React and Intersection Observer API to create an interactive experience

Language: JavaScript - Size: 1.43 MB - Last synced at: over 1 year ago - Pushed at: over 1 year ago - Stars: 7 - Forks: 1

sohamsshah/sodium-infinite-scroller

A simple, zero-dependency and awesome React Infinite ♾ Scrolling Component based on Intersection Observer API. Powered by Vite.js ⚡

Language: JavaScript - Size: 78.1 KB - Last synced at: 1 day ago - Pushed at: over 3 years ago - Stars: 7 - Forks: 1

Jes015/Web-Vault

App to save web tools

Language: TypeScript - Size: 149 KB - Last synced at: 9 months ago - Pushed at: 9 months ago - Stars: 6 - Forks: 0

HenrikDK2/preact-intersection-observer

A lightweight Preact implementation of Intersection Observer API.

Language: TypeScript - Size: 981 KB - Last synced at: about 1 month ago - Pushed at: over 2 years ago - Stars: 6 - Forks: 3

Teknasyon-Teknoloji/user-intent

A tiny library to detect user intent (exit intent) and trigger a callback. It's built with pure JavaScript and supports multiple triggers. Made for better user engagements.

Language: JavaScript - Size: 145 KB - Last synced at: 3 days ago - Pushed at: over 2 years ago - Stars: 6 - Forks: 1