Animated Content
Slides its content in from any side when it scrolls into view, with optional fade and scale, on a spring or a tween.
import { AnimatedContent } from "pleate/effects/animated-content";Directions and motion
Scroll it out of view and back to replay.
From below
From the left
Zoom tween
Props
- direction
Axis of travel.
"vertical" | "horizontal"default "vertical"- distance
Pixels traveled.
numberdefault 80- reverse
Come from above or the left.
booleandefault false- initialOpacity
Starting opacity; 1 turns the fade off.
numberdefault 0- scale
Starting scale.
numberdefault 1- motion
A spring, or a tween of that many seconds.
"spring" | numberdefault "spring"- delay
Seconds before it starts.
numberdefault 0- threshold
Share of the element visible before it plays (0 to 1).
numberdefault 0.15- once
Play once, or every time it enters.
booleandefault true
Accessibility
- Content is in the DOM from the start, so it is read normally.
- Reduced motion renders it in place.