Simple directional fade / slide entrance / exit wrapper with threshold-based activation.
Every prop is wired to the controls underneath. The fade plays once when the element reaches the trigger line, use the replay button to run it again.
| Prop | Type | Default | Description |
|---|---|---|---|
container | string | HTMLElement | null | The scroll container to use for ScrollTrigger. Falls back to the element with id snap-main-container, then the window. |
blur | boolean | false | Enables a blur effect during the animation. |
duration | number | 1000 | Duration of the fade animation. Values above 10 are read as milliseconds, smaller values as seconds. |
delay | number | 0 | Adds a delay in seconds before triggering the animation. |
ease | string | "power2.out" | GSAP easing function for the fade animation. |
threshold | number | 0.1 | How much of the element must be in view before the animation starts (0-1). |
initialOpacity | number | 0 | The starting opacity of the component before it enters the viewport. |
disappearAfter | number | 0 | Time in seconds after which the content will start to disappear. Disabled if set to 0. |
disappearDuration | number | 0.5 | Duration of the disappearance animation in seconds. |
disappearEase | string | "power2.in" | GSAP easing function for the disappearance animation. |
| Event | Description |
|---|---|
complete | Emitted when the fade-in completes. |
disappearance-complete | Emitted when the disappearance animation completes. |
| Slot | Description |
|---|---|
default | The content to be animated. |
Keyboard shortcuts and ARIA behavior.