Wondering what’s next for npm?Check out our public roadmap! »

    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

    5

    Version

    2.0.19

    License

    MIT

    Homepage

    popmotion.io

    Last publish

    Collaborators

    • avatar
    • avatar