Animation
ScaleIn
Scroll-triggered scale entrance animation.
import { ScaleIn } from "lambchop";
Live Demo
Scale in on scroll
Scale in with 300ms delay
Usage
import { ScaleIn } from "lambchop";
<ScaleIn>
<div className="p-8 border-2 border-foreground/40">
Scales in when scrolled into view
</div>
</ScaleIn>
<ScaleIn delay={300}>
<p>Delayed scale entrance</p>
</ScaleIn>Props
| Prop | Type | Default | Description |
|---|---|---|---|
delay | number | 0 | Delay in milliseconds |
className | string | — | Additional CSS classes |
How It Works
Uses IntersectionObserver to detect viewport entry, then applies the scale-in CSS animation (0.9 to 1.0 scale with fade). Triggers once.