Fractal UI Motif Fractal UI Type
On this Page

MotionTransition

MotionTransition is the timing and spring configuration accepted by Fractalsvelte motion primitives. It is a TypeScript type that selects the supported transition fields from Motion’s AnimationOptions.

Usage

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

	const reveal: MotionTransition = {
		duration: 0.2,
		ease: 'easeOut',
		delay: 0.08
	};
</script>

<Motion
	initial={{ opacity: 0, y: 8 }}
	animate={{ opacity: 1, y: 0 }}
	transition={reveal}
>
	Content
</Motion>

Use a spring when the physical response matters more than a fixed duration:

TypeScript 
import { type MotionTransition } from "fractalsvelte/motion";

const spring: MotionTransition = {
	type: "spring",
	stiffness: 280,
	damping: 28,
	bounce: 0,
};

API

TypeScript 
type MotionTransition = Pick<
	AnimationOptions,
	"duration" | "ease" | "delay" | "type" | "stiffness" | "damping" | "bounce"
>;
FieldTypeDescription
durationnumberDuration in seconds for duration-based animation.
easeAnimationOptions['ease']Easing name, cubic-bezier tuple, or easing definition supported by Motion.
delaynumberDelay in seconds before the animation begins.
typeAnimationOptions['type']Animation type, including 'spring' when spring configuration is required.
stiffnessnumberSpring stiffness. Used with spring transitions.
dampingnumberSpring damping. Used with spring transitions.
bouncenumberSpring bounciness. Used with spring transitions.
  • Use transitions and motionIntents for the package’s semantic defaults.
  • Use MotionPreset to define the keyframes that this type times.
  • Motion, Layout, Drag, SharedLayout, ReorderGroup, and MotionProvider all accept a MotionTransition through their transition prop.