Visiblee

Visiblee is a a tiny Typescript utility library for triggering a callback when the element comes into view. It's designed to be lightweight and performant.

``
import { Visiblee } from 'visiblee;

Visiblee.watch(element, (entry) => {
console.log('I am visible');
});
``

Browser Support

It works in all modern browsers and IE11 with a couple of polyfills, which are Array.find and Array.filter.

API

Visiblee acts as a singleton class and you do not need to manually create a new instance. Upon use of any of the below methods, a new instance will automatically be created and bound to the window.

$3

Add's the provided elements to the list of elements to watch.

* elements: Array | HTMLElement - The elements to watch.
* callback: (entry: Visiblee.Entry) => void - The callback to execute when it bcomes visible.
* triggerPoint: number = 0.5 - The percentage point of the viewport for the callback to trigger.
* removeOnceVisible: boolean = true - Whether to remove the element from the watch list once it's visible.
`
Visiblee.watch(element, (entry) => {
console.log('I am visible');
}, 0.5, true);
`

$3

Removes the elements from the watch list.

* element: HTMLElement - The element to remove
`
Visiblee.unwatch(element);
`

$3


Returns true if the provided element is currently in view.
* element: HTMLElement - The elements to watch.
* triggerPoint: number = 0.5 - The percentage point of the viewport for the callback to trigger.
`
Visiblee.check(element, 0.5)
`

$3

Returns the Visiblee instance.

`
Visiblee.getInstance();
``