Göcek

Göcek is a lightweight scrolling state library that allows elements to be acted on when they become (or stop being) visible, such as applying CSS animations or loading as-yet-unloaded images.

Göcek looks for hooks in the DOM, in the form of data attributes, to know which elements to listen to as they become/stop being visible.

Examples 🔗

Example 1: Lazy load an image when it becomes visible. See Images.

<img data-src=foo.jpg>

Example 2: Listen for an element becomming partially visible and add a class to it (perhaps triggering an animation) when this happens.

<div id=my-div class='completely lazy'></div>

gocek.on('visible', '#my-div', (evt, el) =>
    el.classList.add('animate'));

API 🔗

Göcek's API is in two parts - classes/attributes applied to elements in the DOM, and JavaScript methods.

Göcek listens for the following classes/attributes:

lazy - the main identifier Göcek looks for. All elements to use with Göcek must have this.
completely - denotes that the element must become completely visible/invisible for any events to fire, not partially (which is the default).
[data-src] (images only) - the image URI to load into the image's src property once the element becomes visible

For elements inserted into the DOM later after page load, you can use these with Gocek via the register() method discussed below.

The JavaScript API is as follows:

on(event, el, callback[, once]) - register an event callback, callback, to fire when an element, el (HTML element reference or DOM selector string), becomes partially or completely (depending on whether it has the class completely) visible or invisible as denoted by event - a string which is either 'visible' or 'hidden'. If once is true, this callback will fire only the first time this occurs, not subsequently. The callback is passed two arguments - the event object, and a reference to the target element.
is_visible(el[, completely]) - a utility method to establish whether an element , el (a reference to an HTML element - and not necessarily an element registered with Göcek) is currently visible - partially or, if compltetely (bool) is true, then completely. Returns a boolean denoting the result.
register_el(els) - register one or more elements, els (an HTML element reference or array of element references) for use with Göcek. This is useful for elements injected into the DOM later, after page load, i.e. which would have been missed by Göcek's initial sweep.

Download Download from Github

Did I help you? Feel free to be amazing and buy me a coffee on Ko-fi!