Fractal UI Motif Fractal UI Type
On this Page

InViewOptions

InViewOptions configures the pooled IntersectionObserver used by useInViewState. It extends the browser’s IntersectionObserverInit and adds Fractalsvelte’s once and amount conveniences.

Usage

Svelte 
<script lang="ts">
	import { type InViewOptions, useInViewState } from "fractalsvelte/motion";

	let section = $state<HTMLElement>();

	const options: InViewOptions = {
		once: true,
		amount: 0.4,
		rootMargin: "0px 0px -12%",
	};

	const visibility = useInViewState(() => section, options);
</script>

<section bind:this={section} data-visible={visibility.inView}>
	Reveal this content when 40% enters the viewport.
</section>

API

FieldTypeDefaultDescription
oncebooleanfalsePreserves the entered state after the first intersection.
amount"some" \| "all" \| number"some"Shorthand for the intersection threshold.
rootElement \| nullviewportScroll container used as the observer root.
rootMarginstring"0px"CSS-like margin applied to the observer root bounds.
thresholdnumber \| number[]0Native threshold; used when amount is not a number or "all".
TypeScript 
interface InViewOptions extends IntersectionObserverInit {
	once?: boolean;
	amount?: "some" | "all" | number;
}

amount: "some" observes at the native threshold (or 0 by default). amount: "all" uses a threshold of 1, and a numeric amount takes precedence over threshold for the observer.

Behaviour

useInViewState shares observer instances when their root, root margin, and effective threshold match. It cleans up the target listener when its Svelte owner is destroyed. When once is enabled, inView remains true after the first intersection; the most recent observed entry remains available through entry.

The helper does nothing in environments without IntersectionObserver, so no browser-only global is accessed during server rendering.

Use useScrollProgress for continuous scroll values. For reveal effects, combine the inView state with the package’s motion primitives and preserve a meaningful static state for reduced-motion users.