0%

scroll

SlideIn

Slide in from a direction.

Playground

Scroll-based previews need you to scroll into view.

Live preview

Slide from left

Code

<SlideIn from="left" duration={0.8} delay={0}>
  <div className="rounded-xl border bg-card p-6">Slide from left</div>
</SlideIn>

Props

PropTypeDefaultDescription
fromup | down | left | rightupSlide direction