ngx-element-in-view
Version:
> 🔍 Angular directive to detect when an element enters the viewport using `IntersectionObserver`. Add animation classes or trigger callbacks with ease.
45 lines (32 loc) • 1.91 kB
Markdown
# 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
```bash
npm install ngx-in-view
## 🧰 Parameters
| 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 |
## Example
<div
[ngxElementInView]="'fade-in bounce'"
[threshold]="0.3"
[triggerOnce]="true"
>
This will animate when it appears in the viewport!
</div>