ScrollReveal
Animate elements as they enter the viewport using IntersectionObserver.
Usage
Wrap any component in ScrollReveal to trigger a CSS animation when it becomes visible.
Scale (Delayed)
tsx
import { ScrollReveal, Card } from "starkit-ui";
<ScrollReveal animation="slide-up" delay={150}>
<Card>Revealed Content</Card>
</ScrollReveal>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| animation | 'fade' | 'slide-up' | 'slide-in-left' | 'slide-in-right' | 'scale' | 'slide-up' | The animation to apply. |
| delay | number | 0 | Delay in ms. |
| threshold | number | 0.1 | How much of the element needs to be visible to trigger. |
| repeat | boolean | false | Animate out when scrolled past, to animate in again. |