ngx-intersection-observer

Observe visiblity of elements and get notified when they visit/leave the window viewport.

Features

• Observe elements via IntersectionObserver API or fallback to scroll listener to detect if the element enters/leaves the viewport.
• Apply or remove classes based on element visiblity
• Specify threshold, how many precentage of the element need to be visible to trigger intersection.
• Specify intersection method (IntersectionObserver API or scroll listener)
• Event binding for intersecting elements.

Dependencies

---

ngx-intersection-observer	Angular
1.0.13	>=13.x

Install

---

Install the package via NPM

$ npm install --save  ngx-intersection-observer

Import the module Import the module to your angular application

//...
import { IntersectionObserverModule } from 'ngx-intersection-observer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    IntersectionObserverModule.forRoot({
      debounce: 50,
      threshold: 30,
      autoRemove: true
    } as IntersectionObserverConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage and Options

---

Name	Type	Description	Optional	Default
visitClass	String	List of classes to apply, when the element visits the windows viewport.	Yes
leaveClass	String	List of classes to apply, when the element leaves the window viewport.	Yes
removeVisitClass	String	List of classes to remove, when the element visits the window viewport.
removeLeaveClass	String	List of classes to remove, when the element leaves the windows viewport.	Yes
autoRemove	Boolean	true / false If true classes will be removed automatically when the element leaves the viewport, otherwhise use removeVisitClass property.	Yes	true
useScroll	Boolean	true / false If true, use scoll listener otherwhise use IntersectionObserver. By default IntersectionBehavior is used, fallback to scroll listener.	Yes	true
threshold	Number	Specifies how many precentage of the element need to be visible in the viewport to treat it as intersection. Specify a value between 0% and 100%	Yes	30%
intersection	Event	Function which is called when the element enters/leaves the viewport.	Yes

Example

<div intersectionObserver
     [visitClass]="'bg-blue border'"
     [autoRemove]="true"
     [threshold]="30"
     [useScroll]="false"     
     (intersection)="intersect($event)"
     class="bg-red"
     id="my-div"></div>
</div>

#my-div {
  width: 300px;
  height: 300px;
  margin-top: 2000px;
}

.bg-red {
  background-color: red;
}

.bg-blue{
    background-color: blue;
}

.border{
    border: 5px solid black;

Use with animate.css

---

Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints. https://animate.style/

If you want to apply animations from animate.style, use those two classes to prevent flickering.

.hide-on-init {
  visibility: hidden;
}

.animate__animated {
  visibility: visible !important;
}

Example

<div intersectionObserver
     [visitClass]="'bg-blue border'"
     [autoRemove]="true"
     [threshold]="30"
     [useScroll]="false"     
     (intersection)="intersect($event)"
     class="bg-red hide-on-init"
     id="my-div"></div>
</div>

License

---

MIT

---

GitHub @tobiasschiebel | Twitter @SchiebelTobias