npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

live-on-stage

2.0.19 • Public • Published

Live on Stage

Deprecated: Please use React Intersection

High performance tracking of DOM elements entering and leaving the viewport.

Install

npm install live-on-stage --save

Use

Start tracking an element

Start tracking a DOM element by providing it to startTrackingElement. A second argument, options, is an optional object with event callbacks and other properties.

import { startTrackingElement } from 'live-on-stage';
 
const trackingId = startTrackingElement(document.querySelector('div'), options);

Options

  • onEnter: function: Fires when element enters the viewport (becomes visible). Opposite: onLeave
  • onLeave: function: Fires when element leaves the viewport (becomes non-visible). Opposite: onEnter
  • onBeginLeave: function: Fires when the element begins to leaves the viewport. Opposite: onCompleteEnter
  • onCompleteEnter: function: Fires when an element completely enters the viewport. Opposite: onBeginLeave
  • onMeasure: function: Fires when an element is measured - usually on tracking start or screen resize.
  • onScroll: function: Fires when the screen is scrolled.
  • buffer: number: Size, in pixels, to add to each side of the element's calculated bounding box.

Callbacks are provided one argument, elementData, which can be used to query the positional status of an element:

  • dom: HTMLElement: The DOM element as provided to startTrackingElement.
  • top, right, bottom, left: number: Absolute bounding box measurements relative to document.
  • isOffTop, isOffRight, isOffBottom, isOffLeft, isOffScreen: boolean: true when element is positioned off given viewport side.
  • isWithinTop, isWithinRight, isWithinBottom, isWithinLeft, isWithinScreen: boolean: true when element is completely within viewport side.

Stop tracking an element

import { stopTrackingElement } from 'live-on-stage';
 
stopTrackingElement(trackingId);

Manually check scroll position

import { manuallyCheckAll } from 'live-on-stage';
 
manuallyCheckAll();

Keywords

install

npm i live-on-stage

Downloadsweekly downloads

34

version

2.0.19

license

MIT

homepage

popmotion.io

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability