Animations

Scroll-triggered animation components using Framer Motion. Provides various animation types with spring physics for natural, elegant motion.

Animation Types

Scroll down to trigger the animations. Each box demonstrates a different animation type.

fade

fadeUp

fadeDown

fadeLeft

fadeRight

scale

scaleUp

blur

blurUp

tsx

<FadeIn animation="fadeUp">
  <div>Content</div>
</FadeIn>

<FadeIn animation="blur">
  <div>Content</div>
</FadeIn>

<FadeIn animation="scaleUp">
  <div>Content</div>
</FadeIn>

With Delay

0.1s

0.2s

0.3s

tsx

<FadeIn delay={0}><Box /></FadeIn>
<FadeIn delay={0.1}><Box /></FadeIn>
<FadeIn delay={0.2}><Box /></FadeIn>
<FadeIn delay={0.3}><Box /></FadeIn>

Staggered List

Use FadeInStagger with FadeInStaggerItem for automatic staggered animations.

Item 1

Item 2

Item 3

Item 4

tsx

<FadeInStagger staggerDelay={0.1}>
  {items.map((item) => (
    <FadeInStaggerItem key={item.id} animation="scale">
      <Card>{item.content}</Card>
    </FadeInStaggerItem>
  ))}
</FadeInStagger>

Spring Physics

All animations use spring physics for natural, elegant motion:

stiffness: 50 — Controls spring tightnessdamping: 20 — Controls oscillation reductionmass: 1 — Controls inertia

This configuration produces smooth, elegant animations without bounce.

FadeIn Props

Prop	Type	Default	Description
`animation`	`"fade" \| "fadeUp" \| "fadeDown" \| "fadeLeft" \| "fadeRight" \| "scale" \| "scaleUp" \| "blur" \| "blurUp"`	`"fadeUp"`	Animation type
`delay`	`number`	`0`	Delay before animation starts (seconds)
`distance`	`number`	`24`	Distance to travel for slide animations (pixels)
`once`	`boolean`	`true`	Whether to animate only once on first view
`children`*	`ReactNode`	-	Content to animate

FadeInStagger Props

Prop	Type	Default	Description
`staggerDelay`	`number`	`0.12`	Delay between each child animation (seconds)
`once`	`boolean`	`true`	Whether to animate only once on first view
`children`*	`ReactNode`	-	FadeInStaggerItem children

Import

tsx

import {
  FadeIn,
  FadeInStagger,
  FadeInStaggerItem
} from '@/components/ui/FadeIn'