animations

SlideIn

Animates children with a directional slide + fade entrance from any edge.

v1.0.0react >=18next >=14tailwind >=4motion >=12

entrancescrollslidetranslatedirectionreveal

Preview

Loading preview...

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Content to animate
`direction`	`string`	`left`	Direction to slide in from
`distance`	`DistanceName \| number`	`normal`	Slide distance — use token name ('subtle', 'normal', 'pronounced', 'dramatic') or pixel value
`delay`	`number`	`—`	Custom delay in milliseconds
`triggerOnView`	`boolean`	`true`	Animate when element enters viewport
`viewThreshold`	`number`	`0.2`	Fraction of element visible before triggering
`once`	`boolean`	`true`	Only animate once
`className`	`string`	`—`	Additional Tailwind classes

Slots

Slot	Type	Required	Description
`children`	`ReactNode`	Yes	Content to slide in

Layout

Display: block

Responsive: No

Wraps children in an animated div with directional slide transition.

Examples

From left (default)

<SlideIn>
  <nav className="w-64 bg-neutral-900 p-4">Sidebar content</nav>
</SlideIn>

From right with large distance

<SlideIn direction="right" distance="dramatic">
  <div className="rounded-xl bg-neutral-900 p-8">Panel</div>
</SlideIn>

Staggered from bottom

<StaggerGroup stagger="relaxed">
  <SlideIn direction="up"><Card title="Step 1" /></SlideIn>
  <SlideIn direction="up"><Card title="Step 2" /></SlideIn>
</StaggerGroup>

AI Usage Hint

Use SlideIn for directional entrance animations. Set 'direction' to control where content slides from. Use 'distance' with token names ('subtle' for 8px, 'normal' for 24px, 'pronounced' for 48px, 'dramatic' for 80px) or raw pixel values. Works well for sidebar menus, panels, cards entering from edges. Combine with StaggerGroup for sequential reveals.

Works Well With

StaggerGroupFadeUp