svelte-inview

A Svelte action that monitors when an element enters or leaves the viewport/parent element. It leverages the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API ) for performance and efficiency.

Key Features:

• 👓️ Tracks element visibility in viewport or parent element
• 🏎️ Blazing fast with Intersection Observer (non-blocking)
• 📦️ Lightweight (~2kb) with no external dependencies (except Svelte)
• 🎛️ Versatile use cases: lazy loading, infinite scrolling, video control, animations, etc.
• 🐥 Simple API with easy integration
• ↕️ Detects scrolling direction (vertical/horizontal)

Target Audience:
Svelte developers needing viewport visibility detection for various UI interactions and optimizations.

Core Functionality:

• Basic element visibility tracking
• Lazy loading images with rootMargin and unobserveOnEnter
• Video play/pause control when in/out of viewport
• Scroll-triggered animations with direction detection

Event System:

• inview_change: Fires when visibility changes
• inview_enter: When element enters viewport
• inview_leave: When element leaves viewport
• inview_init: On action initialization

Configuration Options:

• root: Viewport element (default: window)
• rootMargin: Detection margin around root
• threshold: Visibility percentage trigger points
• unobserveOnEnter: Stop observing after first appearance

Output Data:

• Visibility state (inView)
• IntersectionObserverEntry details
• Scroll direction (vertical/horizontal)
• Observer instance and target node

Demo:
Live example available at [svelte-inview.netlify.app](https://svelte-inview.netlify.app/ )