View Animations
The view prop animates an element when it enters the viewport, via
IntersectionObserver: a declarative alternative to
useInView for the common "reveal on scroll" case.
Usage
import { animate, withTiming, withSpring } from 'react-ui-animate';
/* Reveal when the element scrolls into view */
<animate.div
view={{ opacity: withTiming(1), translateY: withSpring(0) }}
viewOptions={{ threshold: 0.3, once: true }}
style={{ opacity: 0, translateY: 50 }}
>
Scroll to see me
</animate.div>
Preview
tip
Start from the hidden style (opacity: 0, translateY: 50) and animate
to the visible target in view. Set once: true for one-shot reveals.
viewOptions
| Option | Default | Description |
|---|---|---|
threshold | 0 | Fraction of the element that must be visible (0–1) |
once | false | Animate only the first time it enters |
rootMargin | '0px' | Expand/shrink the trigger area, e.g. '100px' to fire earlier |
Combining with other props
view, animate, hover, and press all compose on the same element:
<animate.div
view={{ translateY: withSpring(0) }}
hover={{ scale: withSpring(1.05) }}
style={{ translateY: 50 }}
/>