Delta Components

Docs

Animate In

A simple and lightweight animation component that animates children elements into view with CSS transitions, customizable directions, timing, blur effects, and intersection observer support.

26 views

2 downloads

Demo

Code

Open in

Welcome to the Future

Experience seamless animations that bring your content to life with elegant motion design

Backed by

Combinator

Overview

The AnimateIn component provides a lightweight solution for animating content into view using CSS animations and React state management. It supports multiple animation directions (up, left, right, fade) with customizable delays, optional blur effects, and intersection observer functionality for scroll-triggered animations.

The component uses CSS transforms and filters for smooth, hardware-accelerated animations and provides both time-based (delay) and viewport-based (intersection observer) triggering options, making it perfect for landing pages, feature sections, and any content that needs elegant entrance animations.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/animate-in.json

Usage

Basic Usage with Delay

1import AnimateIn from "@/registry/animations/animate-in"
2
3export function Component() {
4  return (
5    <AnimateIn direction="up" delay={200}>
6      <h1 className="text-4xl font-bold">Hello World</h1>
7      <p className="text-muted-foreground">
8        This content fades in from bottom with a delay
9      </p>
10    </AnimateIn>
11  )
12}

Intersection Observer

1import AnimateIn from "@/registry/animations/animate-in"
2
3export function Component() {
4  return (
5    <AnimateIn direction="up" useIntersectionObserver threshold={0.2}>
6      <h1 className="text-4xl font-bold">Hello World</h1>
7      <p className="text-muted-foreground">
8        This content animates when it comes into view
9      </p>
10    </AnimateIn>
11  )
12}

Blur Animation

1import AnimateIn from "@/registry/animations/animate-in"
2
3export function Component() {
4  return (
5    <AnimateIn direction="up" delay={200} enableBlur={true} blurAmount={10}>
6      <h1 className="text-4xl font-bold">Blurred Entrance</h1>
7      <p className="text-muted-foreground">
8        This content animates with a blur-to-focus effect
9      </p>
10    </AnimateIn>
11  )
12}

Fade-in Only

1import AnimateIn from "@/registry/animations/animate-in"
2
3export function Component() {
4  return (
5    <AnimateIn direction="fade" useIntersectionObserver threshold={0.1}>
6      <div className="p-4 border rounded-lg">
7        <h2 className="text-xl font-semibold">Fade In</h2>
8        <p className="text-muted-foreground">
9          This content fades in smoothly using only opacity
10        </p>
11      </div>
12    </AnimateIn>
13  )
14}

API Reference

Name	Type	Description	Default
`children`	`React.ReactNode`	Content to animate	-
`direction`	`"up" \| "left" \| "right" \| "fade"`	Direction of the animation. Use "fade" for opacity-only animation	`"up"`
`delay`	`number`	Delay before animation starts in milliseconds (ignored if using intersection observer)	`0`
`className`	`string`	Additional CSS classes	`""`
`useIntersectionObserver`	`boolean`	Enable intersection observer for scroll-triggered animations	`false`
`threshold`	`number`	Intersection observer threshold (0.0 to 1.0)	`0.1`
`triggerOnce`	`boolean`	Whether animation should only trigger once	`true`
`duration`	`number`	Animation duration in seconds	`0.6`
`enableBlur`	`boolean`	Enable blur animation effect that transitions from blurred to clear	`false`
`blurAmount`	`number`	Initial blur amount in pixels (used when enableBlur is true)	`8`

Examples

Directions

Showcase content animating in from different directions.

Demo

Code

Open in

Animation Directions

Content can animate in from different directions

From Left

This content slides in smoothly from the left side of the screen

From Right

This content slides in smoothly from the right side of the screen

From Bottom

This content rises up from the bottom with a fade effect

Another From Bottom

This content also rises up from the bottom with a longer delay

Intersection Observer

Scroll-triggered animations using the Intersection Observer API. Elements animate into view as you scroll.

Demo

Code

Open in

Scroll down to see elements animate in as they come into view using the Intersection Observer API.

First Section

This section animates in from the bottom when it becomes 20% visible in the viewport.

Second Section

This section slides in from the left when 30% of it is visible.

Third Section

This section slides in from the right with a lower threshold (10%).

Re-triggerable Section

This section re-animates every time you scroll it in and out of view (triggerOnce=false).

You made it to the end!

Each section used different threshold values and animation directions.

Staggered Animation

Animate multiple children with staggered timing for a cascading effect.

Demo

Code

Open in

Staggered Animation

Each card animates in sequence with different delays

Feature One

The first feature in our staggered animation sequence

Feature Two

The second feature appears with a slight delay

Feature Three

The final feature completes the staggered sequence

Tag One

Tag Two

Tag Three

Tag Four

Tag Five

Fade Animation

Cards that fade in smoothly using only opacity changes, perfect for component showcases and grids.

Demo

Code

Open in

Cards fade in smoothly using only opacity changes, without any directional movement.