Note: This project is still in development and has not been publicly released. Coming soon.
Docs
Animate In
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
Loading...

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

NameTypeDescriptionDefault
childrenReact.ReactNodeContent to animate-
direction"up" | "left" | "right" | "fade"Direction of the animation. Use "fade" for opacity-only animation"up"
delaynumberDelay before animation starts in milliseconds (ignored if using intersection observer)0
classNamestringAdditional CSS classes""
useIntersectionObserverbooleanEnable intersection observer for scroll-triggered animationsfalse
thresholdnumberIntersection observer threshold (0.0 to 1.0)0.1
triggerOncebooleanWhether animation should only trigger oncetrue
durationnumberAnimation duration in seconds0.6
enableBlurbooleanEnable blur animation effect that transitions from blurred to clearfalse
blurAmountnumberInitial blur amount in pixels (used when enableBlur is true)8

Examples

Directions

Showcase content animating in from different directions.

Loading...

Intersection Observer

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

Loading...

Staggered Animation

Animate multiple children with staggered timing for a cascading effect.

Loading...

Fade Animation

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

Loading...

Simple Delays

Multiple elements with different delays for smooth sequential animations.

Loading...