Search results
41 packages found
Generic PerformanceObserver API wrapper for measuring performance metrics
- performance
- web-vitals
- custom metrics
- first-contentful-paint
- first-paint
- first-input-delay
- largest-contentful-paint
- cumulative-layout-shift
- time-to-first-byte
- element-timing
- navigation-timing
- resource-timing
- user-timing
- longtask
A Svelte action that monitors an element enters or leaves the viewport or a parent element. Performant and efficient thanks to using Intersection Observer under the hood.
- svelte
- observer
- observing
- intersection
- viewport
- inviewport
- in-view
- in-viewport
- inview
- observe
- waypoint
- intersection-observer
- intersection-observer-api
- performance
- View more
<h1 align="center" style="border-bottom: none;">🔎 PerformanceObserver Polyfill</h1> <p align="center"> <a href="https://travis-ci.org/fastly/performance-observer-polyfill"> <img alt="Travis" src="https://img.shields.io/travis/fastly/performance-obs
LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport. It's written in plain "vanilla" JavaScript, it leve
- lazyload
- vanilla
- responsive
- images
- picture
- srcset
- sizes
- native
- SEO
- intersectionObserver
- progressive
- performance
- perfmatters
- async
react simple img
Performance for multiple ResizeObserver and IntersectionObserver
Performant react hook for WebApi MutationObserver
React hook to measure an element's size and handle responsive components.
- react
- hook
- react-hook
- use
- use-dimensions
- resize
- observer
- resize-observer
- dimensions
- measure
- size
- responsive-components
- container-queries
- performance
MarqueeContent provides a set of tools for creating dynamic and adaptive ticker animations on web pages using GSAP and ScrollTrigger.
- marquee
- scroller
- animation
- ticker
- reel
- running text
- scrolling text
- ui
- custom
- clones
- filler
- css
- effects
- gsap
- View more
Lazy load react components when they scroll into view using intersection observer
requestAnimationFrame pool to avoid busyness on the thread
Minimalistic, fast, and highly efficient reactivity
IntersectionTrigger utilizes the most modern web technology to trigger anything by intersection. Including scroll-based animations.
- intersection
- trigger
- animation
- animejs
- IntersectionObserver
- intersection-observer
- lazy-load
- performance
- lazy-loading
- viewport
- scroll
- toggle-class
- scrollbar
React hook to monitor an element enters or leaves the viewport (or another element).
- react
- hook
- component
- react-hook
- inview-hook
- inviewport-hook
- in-view-hook
- in-viewport-hook
- intersection-hook
- intersection-observer-hook
- use
- use-inview
- use-inviewport
- use-in-view
- View more
A utility wrapper around the `PerformanceObserver`, designed to filter and monitor React-specific performance entries. This package builds upon concepts from Jamie Builds' `react-performance-observer`, and further enhances its functionality.
a First Meaningful Paint metric collector using Mutation Observer
Performant react hooks for WebApi Observers, useResizeObserver, useInteractionObserver, useMutationObserver
- resize observer
- mutation observer
- intersection observer
- performance observer
- reporting observer
- resize observer hook
- mutation observer hook
- intersection observer hook
- performance observer hook
- reporting observer hook
- web appi
- performance
- use
- react
- View more
Provide performant way to subscribe to browser UI Events.
LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport. It's written in plain "vanilla" JavaScript, it leve
- lazyload
- vanilla
- responsive
- images
- picture
- srcset
- sizes
- native
- SEO
- intersectionObserver
- progressive
- performance
- perfmatters
- async
Observe multiple React components with a single ResizeObserver.