dom-watcher v1.0.1

dom-watcher

Small library that lets you register callbacks for when your DOM elements enter or leave browser viewport area. Useful for revealing animation effects

source: https://github.com/asgmax/dom-watcher

Import and initialization

import { Watcher } from "dom-watcher";

let watcher = new Watcher({});

you can also pass default parameters to be applied to every watched element

let watcher = new Watcher({
    defaultParams: {
        fraction: 0.6,
        repeated: true
    }
});

fraction: number(0...1) - specifies percentage of a DOM elemet to be revealed before callback triggers. Set 0 to trigger callback as soon as element enters viewport, at 0.5 callback will fire only after at least 50% of the element was revealed. At 1 callback will trigger only after the element is completely inside the viewport

repeated: boolean - defines whether or not should callback trigger if element keeps continuously re-entering viewport. Default value is false which means callback will only trigger once per page load

onHide: function(element) - function to be called when element leaves viewport area

Adding watched elements

watcher.add(element, callback, options?)

element: can be DOM element (or array) as well as any jQuery element

callback: function to be called when the element enters viewport. Will receive DOM element as its only parameter. Will fire separately for each element if first parameter was array or jQuery element

options: optional parameter, will override defaultParams used while creating Watcher instance

Examples

watcher.add(
    $(".container"),
    (el) => {
        // this callback will be triggered when element(s) enters viewport
    },
    {
        onHide: function(el) {
            // this callback will be triggered when element leaves viewport
        },
        fraction: 0, // custom fraction value
        repeated: true // callback will be firing each time any of .container elements enter viewport
    }
);

simple slide-in reveal using gsap

watcher.add(
    document.getElementById("pic"),
    (el) => {
        TweenMax.fromTo(el, 1, {x: -300, opacity: 0}, {x: 0, opacity: 1})
    }
);