Animated Content
Customize Animated Content
Distance150px
Duration1.2s
Scale1.1
Initial Opacity0.2
Threshold0.2
Delay0.3s
Props
| Property | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to animate when scrolled into view. |
| container | Element | string | null | null | The scroll container element. If null, uses the viewport. |
| distance | number | 100 | The distance the element moves from when animating in. |
| direction | vertical | horizontal | vertical | The direction of the animation movement. |
| reverse | boolean | false | Whether to reverse the animation direction. |
| duration | number | 0.8 | The duration of the animation in seconds. |
| ease | string | power3.out | The easing function for the animation. |
| initialOpacity | number | 0 | The initial opacity of the element before animation. |
| animateOpacity | boolean | true | Whether to animate the opacity along with movement. |
| scale | number | 1 | The scale factor for the element during animation. |
| threshold | number | 0.1 | The visibility threshold to trigger the animation (0-1). |
| delay | number | 0 | The delay before the animation starts in seconds. |
| disappearAfter | number | 0 | Time after which the element disappears (0 to disable). |
| disappearDuration | number | 0.5 | Duration of the disappearance animation. |
| disappearEase | string | power3.in | Easing function for the disappearance animation. |
| onComplete | () => void | - | Callback function triggered when animation completes. |
| onDisappearanceComplete | () => void | - | Callback function triggered when disappearance completes. |
| className | string | "" | Additional CSS classes for the component. |
| style | React.CSSProperties | {} | Inline styles for the component. |
Dependencies
gsap
Created with ❤️ by Cybershoora