Layout

Automatically FLIP-animate a single element as its geometry changes.

Overview

Layout measures an element and projects it from its previous rectangle to its next rectangle. It is for an element whose position or size changes because of surrounding application state.

Behaviour and customization

Resize observation, parent mutations, and scrollable ancestors are observed automatically. A new target cancels and retargets an active animation. position mode translates without scaling child content.

Use layoutKey when a state value is the clearest measurement boundary. Use LayoutGroup and SharedLayout when the visual element crosses conditional mount points instead of remaining mounted.

Interactive examples

Nested presence

Nested content

Drag and drop

Drag card

Drop here

Automatic layout

Automatic measurement

Usage

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

	let expanded = $state(false);
</script>

<button onclick={() => (expanded = !expanded)}>Resize</button>
<Layout class:expanded transition={transitions.standard}>
	Content that changes geometry
</Layout>

API

Prop	Type	Default	Description
`mode`	`'full' \| 'position'`	`'full'`	Whether size is projected as scale or position only.
`layoutKey`	`unknown`	`-`	Optional explicit measurement boundary.
`observeLayout`	`boolean`	`true`	Enable ResizeObserver, mutations, and scroll observation.

Components and blocks

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

Grid
App Shell
Resizable surfaces

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