A powerful animation component that animates children elements into view with customizable directions, timing, and intersection observer support.
This content animates in from the bottom with a smooth fade effect when the component mounts.
From the Left
This card slides in from the left side with a slight delay.
From the Right
This card slides in from the right side with more delay.
Overview
The AnimateIn component provides a production-ready solution for animating content into view with full control over timing, direction, and easing. Built on top of Framer Motion, it uses intersection observer to trigger animations when elements come into view, making it perfect for landing pages, feature sections, and any content that needs elegant entrance animations.
The component supports multiple animation directions, custom easing functions, staggered children animations, and comprehensive timing controls. It's fully accessible and respects user motion preferences while providing smooth, hardware-accelerated animations.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/animate-in.json
Usage
import AnimateIn from "@/registry/animations/animate-in"
export function Component() {
return (
<AnimateIn direction="up" duration={0.8} overlayBlur>
<h1 className="text-4xl font-bold">Hello World</h1>
<p className="text-muted-foreground">
This content fades in from bottom with blur overlay
</p>
</AnimateIn>
)
}API Reference
| Name | Type | Description | Default |
|---|---|---|---|
children | React.ReactNode | Content to animate | - |
direction | "up" | "down" | "left" | "right" | "scale" | Direction of the animation | "up" |
distance | number | Distance in pixels the element travels during animation | 50 |
duration | number | Duration of the animation in seconds | 0.6 |
delay | number | Delay before animation starts in seconds | 0 |
useIntersectionObserver | boolean | Whether to use intersection observer for triggering animation | true |
threshold | number | Intersection observer threshold (0-1) | 0.1 |
once | boolean | Whether to animate only once or every time it comes into view | true |
easing | EasingFunction | Easing function for the animation | "easeOut" |
initialOpacity | number | Initial opacity value | 0 |
finalOpacity | number | Final opacity value | 1 |
immediate | boolean | Whether to start animation immediately (ignores intersection observer) | false |
staggerChildren | number | Stagger delay for child elements in seconds | 0 |
disabled | boolean | Whether animation is disabled | false |
overlayBlur | boolean | Whether to show a blur overlay effect during animation | false |
className | string | Additional CSS classes | - |
Easing Functions
| Value | Description |
|---|---|
"linear" | Linear progression |
"easeIn" | Slow start |
"easeOut" | Slow end |
"easeInOut" | Slow start and end |
"circIn" | Circular ease in |
"circOut" | Circular ease out |
"circInOut" | Circular ease in and out |
"backIn" | Back ease in |
"backOut" | Back ease out with overshoot |
"backInOut" | Back ease in and out |
"anticipate" | Natural anticipation motion |
Examples
Hero Section
Landing page style hero section with heading and subheading animations.
Welcome to the Future
Experience seamless animations that bring your content to life with elegant motion design
Staggered Animation
Animate multiple children with staggered timing for a cascading effect.
Staggered Animation
Each card animates in sequence with a small delay
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
Directions
Showcase content animating in from different directions.
Animation Directions
Content can animate in from any direction
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
From Top
This content drops down from the top with a smooth transition
Scale Animation
Spring-powered scale animations that grow elements into view with natural bounce physics.
Scale Animation
This card scales in with a spring bounce effect when it comes into view.
Bouncy Scale
A longer duration with more pronounced spring physics for extra bounce.
Scale with Blur
Scale animation combined with blur overlay effect for smooth transitions.
