ap_viewport_watch_element_visibility_enter_leave_events.ts

1import { ViewportWatch } from 'ap-viewport-watch';
2
3// Initialize the watcher
4const watcher = new ViewportWatch();
5
6// Select the element you want to watch
7const element = document.querySelector('.my-element') as HTMLElement;
8
9// Start watching the element
10watcher.watch(element, {
11    onEnter: (el) => {
12        console.log('Element entered the viewport:', el);
13        el.classList.add('is-visible');
14    },
15    onLeave: (el) => {
16        console.log('Element left the viewport:', el);
17        el.classList.remove('is-visible');
18    },
19    once: false, // Set to true if you only want to trigger the event once
20    threshold: 0.5 // Trigger when 50% of the element is visible
21});