Honeymate

Beautiful page load coordinator.

Honeymate waits for loading images in blocks and then shows with the selected animation.
Allows you to easily manage the page load order, indicating the order in which items are displayed.

Simple. Honeymate has declarative API therefore has a low entry threshold.

Small. 2.2 kilobytes (minified and gzipped). No dependencies.

Fast. Only CSS animations wrapped in a requestAnimationFrame are used.

Get

Download the repository code and move dist/honeymate.js to the desired directory.

Or use npm:

npm install mishamyrt-honeymate --save

Setup

Link the file honeymate.js from the compiled sources.

If downloaded directly:

<script src="path/to/honeymate.js"
        type="text/javascript"></script> 

If installed with npm:

<script src="node_modules/mishamyrt-honeymate/dist/honeymate.js"
        type="text/javascript"></script> 

Now any element with class="honey" will fade in after its contents are loaded:

<div class="honey">
  ... Show this only when it is ready ...
</div>

Using as a ES module

Honeymate can be used as a ES module, so you can use it within webpack or Rollup build systems.

First, install Honeymate using npm:

npm install mishamyrt-honeymate --save

Then, use it somewhere in your program:

import { Honeymate } from 'mishamyrt-honeymate'
 
// Finds all honeymated blocks in the DOM and initializes them
Honeymate.initiate()

You can also control Honeymate event loop manually:

import { Honeymate } from 'mishamyrt-honeymate'
 
// Creates an instance of the class HoneyNode
const honeyNode = Honeymate.generateNode(
    document.querySelector('.node-selector')
)
 
// Shows the node after loading images
honeyNode.isLoaded().then(() => honeyNode.expose())

Options

These options could be specified on the block with the honey class.

• data-effect — Current effect. Available effects: helix, fade (default), relax, zoom.
• data-hold — Hold on for this number of milliseconds (at least this much time should elapse after an element, which the given one was waiting for, have started emerging).
• data-origin — For relax, zoom and helix effects, the transformation origin. Default is ‘bottom’.
• data-duration — The animation duration in milliseconds. Default is 600.
• data-await — Wait for element with ID from value to load (but not finish the animation).
• data-scale — For relax, zoom and helix effects, the initial scale. The default is 0.87.
• data-expose — Wait until the user scrolls to the element. If a hold time is set, it is calculated from the moment when the element gets into view. This parameter uses IntersectionObserver for greater performance. In browsers that do not support this, the parameter will be ignored.
• data-spin — Show loading indicator.
• data-spin-size — Indicator diameter in pixels. Default is 24.
• data-spin-color — Indicator colour. Default is black.

<div class="honey"
     data-effect="helix"
     data-delay="400"
     data-spin="true">
    <img src="img/example.jpg">
</div>

Them can also be a parameter when working with an ES module. To do this, use the same parameters without the data prefix.

const honeyNode = Honeymate.generateNode(
    document.querySelector('.node-selector')
)
 
honeyNode.options = {
    effect: 'zoom',
    scale: 0.93,
    duration: 500,
    spin: true,
    'spin-color': '#663399',
}

Credits

The original idea belongs to Ilya Birman, who made the “Emerge”. I have only made a free alternative that focuses on performance and does not depend on a jQuery.

Supported browsers

Honeymate supports the latest versions of Safari, Chrome and Firefox. In unsupported browsers, the page will load as if the library was not linked.