View and Scroll

Observe visibility and scroll progress with pooled, lifecycle-safe browser observers.

Overview

View and Scroll utilities make viewport entry and scrolling values available to Svelte applications without each item allocating its own observer.

Behaviour and customization

useInViewState pools IntersectionObserver instances by root and threshold, supports once and amount, and cleans up observers when the owner unmounts. useScrollProgress exposes numeric and MotionValue x/y progress.

Use once for reveal-only content and amount for a meaningful intersection threshold. Keep long lists virtualized when they are truly large; pooling reduces observer work but does not replace application-level list management.

Usage

<script lang="ts">
	import { useInViewState, useScrollProgress } from 'fractalsvelte/motion';

	let section = $state<HTMLElement>();
	const visibility = useInViewState(() => section, { once: true, amount: 0.4 });
	const scroll = useScrollProgress();
</script>

<section bind:this={section} data-visible={visibility.inView}>
	Scroll progress: {Math.round(scroll.y * 100)}%
</section>

API

Prop	Type	Default	Description
`once`	`boolean`	`false`	Keep the entered state once intersected.
`amount`	`'some' \| 'all' \| number`	`'some'`	Intersection threshold.
`xProgress / yProgress`	`MotionValue<number>`	`-`	Subscribable scroll progress values.

Components and blocks

Use this primitive directly for custom interfaces; Fractalsvelte also applies it or its motion language in these areas:

Long lists
progress indicators
custom reveal behaviour

For exact built-in component timing and reduced-motion behaviour, see the Motion guide.