Motion Effect

Motion effect component that displays the motion effect (fade in, slide in, etc.).

Preview

Code

Open in

Installation

CLI

Manual

Examples

Slide

Preview

Code

Open in

Motion Effect Slide

Fade Blur

Preview

Code

Open in

Motion Effect Fade Blur

Props

Prop	Type	Default
children	React.ReactNode	-
className?	string	-
transition?	Transition	{ type: 'spring', stiffness: 200, damping: 20 }
inView?	boolean	false
inViewMargin?	string	0px
inViewOnce?	boolean	true
delay?	number	0
blur?	boolean | string	false
slide?	boolean | { direction?: 'up' | 'down' | 'left' | 'right'; offset?: number }	false
fade?	boolean | { initialOpacity?: number; opacity?: number }	false
zoom?	boolean | { initialScale?: number; scale?: number }	false

Credits

• Credits to Magic UI for the inspiration