Have ideas to improve npm?Join in the discussion! »


    3.0.2 • Public • Published

    Honeymate logo

    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.

    npm version David's dependencies control Codacy Badge

    Honeymate logo

    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.


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

    Or use npm:

    npm install mishamyrt-honeymate --save


    Link the file honeymate.js from the compiled sources.

    If downloaded directly:

    <script src="path/to/honeymate.js"

    If installed with npm:

    <script src="node_modules/mishamyrt-honeymate/dist/honeymate.js"

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

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

    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

    You can also control Honeymate event loop manually:

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


    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"
        <img src="img/example.jpg">

    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(
    honeyNode.options = {
        effect: 'zoom',
        scale: 0.93,
        duration: 500,
        spin: true,
        'spin-color': '#663399',


    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.


    npm i mishamyrt-honeymate

    DownloadsWeekly Downloads






    Unpacked Size

    777 kB

    Total Files


    Last publish


    • avatar