Motion

Fractalsvelte uses motion to make a change of state legible: a surface opens, a panel leaves, content expands, or a control acknowledges a press. This page documents the motion that exists in the package today—by component, variant, trigger, and lifecycle phase.

There are two kinds of motion in the library:

• Motion-runtime animation uses the package’s motion integration. It can keep content mounted during its exit animation and follows MotionProvider’s reduced-motion policy.
• CSS interaction transition is a short browser transition for a visual property such as a hover background, an accordion indicator, or a spinner. It does not provide enter/exit lifecycle handling.

Global rules

Timing vocabulary

The public timing presets are available from fractalsvelte/motion. Durations are in seconds where stated; spring presets settle according to their spring configuration rather than a fixed duration.

Reduced motion

The default policy is reducedMotion="user": Fractalsvelte reads prefers-reduced-motion and, when it is enabled, removes transform-based movement from its Motion-runtime animations. Opacity still changes. Runtime animations are also capped at 140ms where a duration applies.

The CSS transitions on Button, Toggle, Toggle Group, and Accordion are disabled by their own prefers-reduced-motion media queries. Spinner remains animated, but slows from 640ms per rotation to 2000ms per rotation.

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

<MotionProvider reducedMotion="user">
	<Workspace />
</MotionProvider>

MotionProvider’s transition prop is currently the default for the public <Motion> component. Built-in component timings are intentionally fixed to the table above; MotionProvider currently affects their reduced-motion policy, not their timing preset.

Motion-runtime component reference

Dialog and Alert Dialog

Both the concise components (<Dialog> / <AlertDialog>) and their compound Content implementations use the same panel motion. default, destructive, and any content variants do not alter it.

Closing waits for the panel exit animation before calling dialog.close(). The backdrop is deliberately static; only the panel has runtime animation.

Sheet and Drawer

Sheet and Drawer share identical motion behaviour. The side prop is the variant that changes their direction. This applies to both concise and compound APIs.

Opening uses the gentle spring. Closing uses fast (140ms, easeOut) and completes before the native dialog closes. With reduced motion, all x/y travel is removed while the opacity transition remains. The backdrop has no independent animation.

Dropdown Menu, Popover, Menubar, and Navigation Menu

Every open content surface below uses the menu preset. Alignment choices such as align="start" and align="end" only change positioning; they do not change the animation.

While one of these surfaces is playing its exit animation it has aria-hidden="true" and inert, so it cannot receive keyboard focus or pointer interaction. With reduced motion, only opacity changes; the y and scale transforms are removed.

Collapsible

The content stays mounted until its exit finishes and is aria-hidden/inert as soon as it is closed. This is opacity-and-position continuity only: the component does not animate its height.

Toast

Toast uses the toast preset for both manual dismissal and an auto-close caused by its duration prop. The neutral and accent tone variants change colour only, not motion.

The toast remains mounted for its exit and becomes aria-hidden and inert as soon as closing starts.

Button, Toggle, and Toggle Group

These controls acknowledge an activation rather than animating their selected state over time. Every size and visual variant uses the same press animation. Disabled controls do not animate.

Keyboard activation uses the browser’s normal button activation semantics. These components do not currently animate on focus, hover, or a programmatic value change that occurs without clicking an item.

CSS-only animation and transitions

These are part of the component experience, but do not use the public Motion runtime or lifecycle presence primitive.

Stateful collections and layout blocks

Tabs use a persistent FLIP selection indicator and a wait-sequenced panel exit/entry. Tree View uses mounted-through-exit branch presence plus a moving selection surface. Toggle Group uses a moving selection surface in single mode; multiple selection keeps each item’s direct state feedback. Carousel preserves the outgoing slide through its directional exit, then enters the incoming slide from the corresponding direction; horizontal and vertical pointer swipes use both distance and velocity thresholds.

Combobox result rows enter with a short stagger, while filtered rows leave through normal DOM filtering. Command, Select, Resizable, Hero, Navigation Sidebar, Page Header, and Split Layout retain short CSS state transitions where applicable; their state and accessibility do not depend on motion. Grid and App Shell animate layout changes under the same reduced-motion policy. Context Menu and Hover Card use the menu presence lifecycle described above.

Using the public Motion API

Use <Motion> to animate an element you own. It runs the supplied animate keyframes once when it mounts and again when the animate value changes. initial supplies the first starting value. It does not currently include an exit prop, layout animation, drag, variants, or an AnimatePresence-style public component.

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

<Motion
	as="section"
	initial={presets.fadeUp.initial}
	animate={presets.fadeUp.animate}
	transition={transitions.standard}
>
	Your content
</Motion>

The public preset keyframes are:

Accessibility checklist

• Keep motion as confirmation or orientation, never as the only indicator of a new state.
• Leave reducedMotion="user" enabled for application UI.
• Test opening, closing, escaping, and rapid state changes with prefers-reduced-motion: reduce enabled.
• Do not add a transform-only custom animation without ensuring that opacity, semantics, focus, and state remain understandable when that transform is removed.