ngx-in-view
π Angular directive to detect when an element enters the viewport using IntersectionObserver
. Add animation classes or trigger callbacks with ease.

β¨ Features
- π Automatically detect when an element comes into view
- π¨ Add CSS animation classes
- π Trigger callbacks via
(inView)
event
- βοΈ Configurable threshold and trigger behavior
- π§© Works great with lazy-loading and animation libraries like Animate.css or GSAP
π¦ Installation
npm install ngx-in-view
| Parameter | Type | Default | Description |
|-------------------|-------------------------|----------|-----------------------------------------------------------------------------|
| `ngxElementInView` | `string` | `''` | (Optional) Space-separated CSS classes to apply when element is in view |
| `threshold` | `number` | `0.1` | (Optional) Visibility ratio (0 to 1) required to trigger the directive |
| `triggerOnce` | `boolean` | `true` | (Optional) If true, the directive triggers only once |
| `visibilityBeforeInView` | `boolean` | `true` | (Optional) If false, the element will display only once in view |
| `(inView)` | `EventEmitter<void>` | β | Emits when the element becomes visible in the viewport |
<div
[ngxElementInView]="'fade-in bounce'"
[threshold]="0.3"
[triggerOnce]="true"
>
This will animate when it appears in the viewport!
</div>