Animated Content

Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.

Default

Every prop is wired to the controls underneath. The animation plays once when the element reaches the trigger line, use the replay button to run it again.

Animate Me

Customize

Direction

Ease

Disappear Ease

Reverse DirectionAnimate Opacity

Distance100

Duration0.8

Delay0

Initial Opacity0

Initial Scale1

Threshold0.1

Disappear After0

Disappear Duration0.5

API Reference

AnimatedContent

Prop	Type	Default	Description
`container`	`string \| HTMLElement`	`null`	The scroll container to use for ScrollTrigger. Can be a selector string or an element. Falls back to the element with id snap-main-container, then the window.
`distance`	`number`	`100`	Distance (in pixels) the component moves during animation.
`direction`	`string`	`"vertical"`	Animation direction. Can be "vertical" or "horizontal".
`reverse`	`boolean`	`false`	Whether the animation moves in the reverse direction.
`duration`	`number`	`0.8`	Duration of the animation in seconds.
`ease`	`string`	`"power3.out"`	GSAP easing function for the animation.
`initialOpacity`	`number`	`0`	Initial opacity before animation begins.
`animateOpacity`	`boolean`	`true`	Whether to animate opacity during transition.
`scale`	`number`	`1`	Initial scale of the component.
`threshold`	`number`	`0.1`	Intersection threshold to trigger animation (0-1).
`delay`	`number`	`0`	Delay before animation starts (in seconds).
`disappearAfter`	`number`	`0`	Time in seconds after which the content will disappear. Disabled if set to 0.
`disappearDuration`	`number`	`0.5`	Duration of the disappearance animation in seconds.
`disappearEase`	`string`	`"power3.in"`	GSAP easing function for the disappearance animation.

Event	Description
`complete`	Emitted when the entrance animation completes.
`disappearance-complete`	Emitted when the disappearance animation completes.

Slot	Description
`default`	The content to be animated.

Accessibility

Keyboard shortcuts and ARIA behavior.

The wrapper is hidden until its animation starts, so content inside is not exposed to assistive tech before it enters.

Warp Text Antigravity