Back to Components

Scroll Animation Container

v1.0.0
Animation

A container that triggers animations when elements enter the viewport using Framer Motion.

Dependencies

framer-motion
Installation
Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/scroll-animation-container.json

Manual Installation

// 1. Install dependencies
npm install framer-motion

// 2. Copy the component code to components/ui/scroll-animation-container.tsx

// 3. Usage example:
import { ScrollAnimationContainer } from "@/components/ui/scroll-animation-container"
import { Card, CardContent } from "@/components/ui/card"

export function MyScrollAnimation() {
  return (
    <ScrollAnimationContainer animation="fadeIn" delay={0.2}>
      <Card>
        <CardContent className="p-6">
          <p>This content animates on scroll</p>
        </CardContent>
      </Card>
    </ScrollAnimationContainer>
  )
}
Props
Component properties and their types
animation
'fadeIn' | 'slideUp' | 'slideLeft' | 'slideRight' | 'scale' | 'rotate'
default: 'fadeIn'

The animation type to trigger on scroll

delay
number
default: 0

Delay before animation starts in seconds

duration
number
default: 0.5

Duration of the animation in seconds

threshold
number
default: 0.1

Intersection threshold to trigger animation (0-1)

triggerOnce
boolean
default: true

Whether animation should trigger only once

Examples
3 different usage examples

Fade In Animation

import { ScrollAnimationContainer } from "@/components/ui/scroll-animation-container"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function ScrollFadeInDemo() {
  return (
    <div className="space-y-8">
      <ScrollAnimationContainer animation="fadeIn">
        <Card>
          <CardHeader>
            <CardTitle>Fade In Card</CardTitle>
          </CardHeader>
          <CardContent>
            <p>This card fades in when it enters the viewport.</p>
          </CardContent>
        </Card>
      </ScrollAnimationContainer>
    </div>
  )
}

Registry

View the component registry file

View Registry
Live Preview
Interactive
3 examples available

Animated Content

This content animates when it enters the viewport