Fractal UI Motif Fractal UI Type
On this Page

MotionPreset

MotionPreset is the reusable keyframe contract used by the motion preset collection. It describes the initial, entered, and exited states for a motion element; it is a TypeScript interface, not a rendered component.

Usage

Svelte 
<script lang="ts">
	import { Motion, type MotionPreset } from 'fractalsvelte/motion';

	const notice: MotionPreset = {
		initial: { opacity: 0, y: 8 },
		animate: { opacity: 1, y: 0 },
		exit: { opacity: 0, y: 4 }
	};
</script>

<Motion
	initial={notice.initial}
	animate={notice.animate}
	exit={notice.exit}
>
	Saved successfully
</Motion>

The built-in presets collection provides fade, fadeUp, scale, menu, and toast values that already satisfy this interface.

API

TypeScript 
interface MotionPreset {
	initial: DOMKeyframesDefinition;
	animate: DOMKeyframesDefinition;
	exit: DOMKeyframesDefinition;
}
FieldTypeDescription
initialDOMKeyframesDefinitionKeyframes applied before the element enters.
animateDOMKeyframesDefinitionKeyframes for the entered or steady state.
exitDOMKeyframesDefinitionKeyframes applied while the element leaves.

DOMKeyframesDefinition accepts animatable property values such as { opacity: 0, y: 12 }. Use compatible property names and values supported by the underlying Motion animation engine.

  • Use presets for the package’s ready-made MotionPreset values.
  • Use Motion to apply a preset’s initial, animate, and exit keyframes.
  • Use MotionTransition to describe the timing or spring configuration separately from the keyframes.