Add natif lazy-load

Bump socket.io-parser from 4.2.2 to 4.2.4

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1686214653663
+    "version": 1691082391092
 }

assets/scripts/config.js

@@ -29,9 +29,10 @@ const CSS_CLASS = Object.freeze({
     LOADED: 'is-loaded',
     READY: 'is-ready',
     FONTS_LOADED: 'fonts-loaded',
-    LAZY_CONTAINER: 'c-lazy',
-    LAZY_LOADED: '-lazy-loaded',
-    // ...
+    IMAGE: "c-image",
+    IMAGE_LAZY_LOADED: "-lazy-loaded",
+    IMAGE_LAZY_LOADING: "-lazy-loading",
+    IMAGE_LAZY_ERROR: "-lazy-error",
 })
 
 // Custom js events

assets/scripts/globals.js

@@ -1,5 +1,6 @@
 import svg4everybody from 'svg4everybody';
 import { ENV } from './config';
+import { triggerLazyloadCallbacks } from './utils/image';
 
 // Dynamic imports for development mode only
 let gridHelper;
@@ -20,4 +21,9 @@ export default function () {
      * Add grid helper
      */
     gridHelper?.();
+
+    /**
+     * Trigger lazyload
+     */
+    triggerLazyloadCallbacks();
 }

assets/scripts/modules/Load.js

@@ -1,5 +1,6 @@
 import { module } from 'modujs';
 import modularLoad from 'modularload';
+import { resetLazyloadCallbacks, triggerLazyloadCallbacks } from "../utils/image";
 
 export default class extends module {
     constructor(m) {
@@ -7,16 +8,28 @@ export default class extends module {
     }
 
     init() {
-        const load = new modularLoad({
+        this.load = new modularLoad({
             enterDelay: 0,
             transitions: {
                 customTransition: {}
             }
         });
 
-        load.on('loaded', (transition, oldContainer, newContainer) => {
+        this.load.on('loaded', (transition, oldContainer, newContainer) => {
             this.call('destroy', oldContainer, 'app');
             this.call('update', newContainer, 'app');
+
+            /**
+             * Trigger lazyload
+             */
+            triggerLazyloadCallbacks();
+        });
+
+        this.load.on("loading", () => {
+            /**
+             * Remove previous lazyload callbacks
+             */
+            resetLazyloadCallbacks();
         });
     }
 }

assets/scripts/modules/Scroll.js

@@ -1,6 +1,5 @@
-import { module } from 'modujs';
-import { lazyLoadImage } from '../utils/image';
-import LocomotiveScroll from 'locomotive-scroll';
+import { module } from 'modujs'
+import LocomotiveScroll from 'locomotive-scroll'
 
 export default class extends module {
     constructor(m) {
@@ -9,41 +8,43 @@ export default class extends module {
 
     init() {
         this.scroll = new LocomotiveScroll({
-            el: this.el,
-            smooth: true
-        });
-
-        this.scroll.on('call', (func, way, obj, id) => {
-            // Using modularJS
-            this.call(func[0], { way, obj }, func[1], func[2]);
-        });
-
-        this.scroll.on('scroll', (args) => {
-            // console.log(args.scroll);
+            modularInstance: this,
         })
+
+        // // Force scroll to top
+        // if (history.scrollRestoration) {
+        //     history.scrollRestoration = 'manual'
+        //     window.scrollTo(0, 0)
+        // }
+    }
+
+    scrollTo(params) {
+        let { target, ...options } = params
+
+        options = Object.assign({
+            // Defaults
+            duration: 1,
+        }, options)
+
+        this.scroll?.scrollTo(target, options)
     }
 
     /**
-     * Lazy load the related image.
-     *
-     * @see ../utils/image.js
-     *
-     * It is recommended to wrap your `<img>` into an element with the
-     * CSS class name `.c-lazy`. The CSS class name modifier `.-lazy-loaded`
-     * will be applied on both the image and the parent wrapper.
-     *
-     * ```html
-     * <div class="c-lazy o-ratio u-4:3">
-     *     <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/640/480?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-     * </div>
-     * ```
-     *
-     * @param {LocomotiveScroll} args - The Locomotive Scroll instance.
-     */
-    lazyLoad(args) {
-        lazyLoadImage(args.obj.el, null, () => {
-            //callback
-        })
+    * Observe new scroll elements
+    *
+    * @param $newContainer (HTMLElement)
+    */
+    addScrollElements($newContainer) {
+        this.scroll?.addScrollElements($newContainer)
+    }
+
+    /**
+    * Unobserve scroll elements
+    *
+    * @param $oldContainer (HTMLElement)
+    */
+    removeScrollElements($oldContainer) {
+        this.scroll?.removeScrollElements($oldContainer)
     }
 
     destroy() {

assets/scripts/utils/html.js

@@ -4,15 +4,18 @@
  * @return {string} escaped string
  */
 
-const escapeHtml = str =>
-    str.replace(/[&<>'"]/g, tag => ({
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        "'": '&#39;',
-        '"': '&quot;'
-    }[tag]))
-
+const escapeHtml = (str) =>
+    str.replace(
+        /[&<>'"]/g,
+        (tag) =>
+            ({
+                "&": "&amp;",
+                "<": "&lt;",
+                ">": "&gt;",
+                "'": "&#39;",
+                '"': "&quot;",
+            }[tag])
+    );
 
 /**
  * Unescape HTML string
@@ -20,13 +23,13 @@ const escapeHtml = str =>
  * @return {string} unescaped string
  */
 
-const unescapeHtml = str =>
-    str.replace('&amp;', '&')
-        .replace('&lt;', '<')
-        .replace('&gt;', '>')
-        .replace('&#39;', "'")
-        .replace('&quot;', '"')
-
+const unescapeHtml = (str) =>
+    str
+        .replace("&amp;", "&")
+        .replace("&lt;", "<")
+        .replace("&gt;", ">")
+        .replace("&#39;", "'")
+        .replace("&quot;", '"');
 
 /**
  * Get element data attributes
@@ -34,46 +37,41 @@ const unescapeHtml = str =>
  * @return {array}       node data
  */
 
-const getNodeData = node => {
-
+const getNodeData = (node) => {
     // All attributes
-    const attributes = node.attributes
+    const attributes = node.attributes;
 
     // Regex Pattern
-    const pattern = /^data\-(.+)$/
+    const pattern = /^data\-(.+)$/;
 
     // Output
-    const data = {}
+    const data = {};
 
     for (let i in attributes) {
         if (!attributes[i]) {
-            continue
+            continue;
         }
 
         // Attributes name (ex: data-module)
-        let name = attributes[i].name
+        let name = attributes[i].name;
 
         // This happens.
         if (!name) {
-            continue
+            continue;
         }
 
-        let match = name.match(pattern)
+        let match = name.match(pattern);
         if (!match) {
-            continue
+            continue;
         }
 
         // If this throws an error, you have some
         // serious problems in your HTML.
-        data[match[1]] = getData(node.getAttribute(name))
+        data[match[1]] = getData(node.getAttribute(name));
     }
 
     return data;
-
-}
-
-
-
+};
 
 /**
  * Parse value to data type.
@@ -83,32 +81,31 @@ const getNodeData = node => {
  * @return {mixed}  value in its natural data type
  */
 
-const rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/
-const getData = data => {
-    if (data === 'true') {
-        return true
+const rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/;
+const getData = (data) => {
+    if (data === "true") {
+        return true;
     }
 
-    if (data === 'false') {
-        return false
+    if (data === "false") {
+        return false;
     }
 
-    if (data === 'null') {
-        return null
+    if (data === "null") {
+        return null;
     }
 
     // Only convert to a number if it doesn't change the string
-    if (data === +data+'') {
-        return +data
+    if (data === +data + "") {
+        return +data;
     }
 
     if (rbrace.test(data)) {
-        return JSON.parse(data)
+        return JSON.parse(data);
     }
 
-    return data
-}
-
+    return data;
+};
 
 /**
  * Returns an array containing all the parent nodes of the given node
@@ -116,20 +113,45 @@ const getData = data => {
  * @return {array}          parent nodes
  */
 
-const getParents = $el => {
-
+const getParents = ($el) => {
     // Set up a parent array
-    let parents = []
+    let parents = [];
 
     // Push each parent element to the array
     for (; $el && $el !== document; $el = $el.parentNode) {
-        parents.push($el)
+        parents.push($el);
     }
 
     // Return our parent array
-    return parents
-}
+    return parents;
+};
 
+// https://gomakethings.com/how-to-get-the-closest-parent-element-with-a-matching-selector-using-vanilla-javascript/
+const queryClosestParent = ($el, selector) => {
+    // Element.matches() polyfill
+    if (!Element.prototype.matches) {
+        Element.prototype.matches =
+            Element.prototype.matchesSelector ||
+            Element.prototype.mozMatchesSelector ||
+            Element.prototype.msMatchesSelector ||
+            Element.prototype.oMatchesSelector ||
+            Element.prototype.webkitMatchesSelector ||
+            function (s) {
+                var matches = (
+                        this.document || this.ownerDocument
+                    ).querySelectorAll(s),
+                    i = matches.length;
+                while (--i >= 0 && matches.item(i) !== this) {}
+                return i > -1;
+            };
+    }
+
+    // Get the closest matching element
+    for (; $el && $el !== document; $el = $el.parentNode) {
+        if ($el.matches(selector)) return $el;
+    }
+    return null;
+};
 
 export {
     escapeHtml,
@@ -137,4 +159,5 @@ export {
     getNodeData,
     getData,
     getParents,
-}
+    queryClosestParent,
+};

assets/scripts/utils/image.js

@@ -1,4 +1,5 @@
 import { CSS_CLASS } from '../config'
+import { queryClosestParent } from './html'
 
 /**
  * Get an image meta data
@@ -91,22 +92,111 @@ const lazyLoadImage = async ($el, url, callback) => {
     }
 
     requestAnimationFrame(() => {
-        let lazyParent = $el.closest(`.${CSS_CLASS.LAZY_CONTAINER}`)
+        let lazyParent = $el.closest(`.${CSS_CLASS.IMAGE}`)
 
         if(lazyParent) {
-            lazyParent.classList.add(CSS_CLASS.LAZY_LOADED)
+            lazyParent.classList.add(CSS_CLASS.IMAGE_LAZY_LOADED)
             lazyParent.style.backgroundImage = ''
         }
 
-        $el.classList.add(CSS_CLASS.LAZY_LOADED)
+        $el.classList.add(CSS_CLASS.IMAGE_LAZY_LOADED)
 
         callback?.()
     })
 }
 
+/**
+ * Lazyload Callbacks
+ *
+ */
+const lazyImageLoad = (e) => {
+    const $img = e.currentTarget;
+    const $parent = queryClosestParent($img, `.${CSS_CLASS.IMAGE}`);
+
+    requestAnimationFrame(() => {
+        if ($parent) {
+            $parent.classList.remove(CSS_CLASS.IMAGE_LAZY_LOADING);
+            $parent.classList.add(CSS_CLASS.IMAGE_LAZY_LOADED);
+        }
+
+        $img.classList.add(CSS_CLASS.IMAGE_LAZY_LOADED);
+    });
+};
+
+const lazyImageError = (e) => {
+    const $img = e.currentTarget;
+    const $parent = queryClosestParent($img, `.${CSS_CLASS.IMAGE}`);
+
+    requestAnimationFrame(() => {
+        if ($parent) {
+            $parent.classList.remove(CSS_CLASS.IMAGE_LAZY_LOADING);
+            $parent.classList.add(CSS_CLASS.IMAGE_LAZY_ERROR);
+        }
+    });
+};
+
+/* Trigger Lazyload Callbacks */
+const triggerLazyloadCallbacks = ($lazyImagesArgs) => {
+    const $lazyImages = $lazyImagesArgs
+        ? $lazyImagesArgs
+        : document.querySelectorAll('[loading="lazy"]');
+
+    if ("loading" in HTMLImageElement.prototype) {
+        for (const $img of $lazyImages) {
+            const $parent = queryClosestParent(
+                $img,
+                `.${CSS_CLASS.IMAGE}`
+            );
+
+
+            if (!$img.complete) {
+                if($parent) {
+                    $parent.classList.add(
+                        CSS_CLASS.IMAGE_LAZY_LOADING
+                    );
+                }
+
+                $img.addEventListener("load", lazyImageLoad, { once: true });
+                $img.addEventListener("error", lazyImageError, { once: true });
+            } else {
+                if (!$img.complete) {
+                    $parent.classList.add(
+                        CSS_CLASS.IMAGE_LAZY_LOADED
+                    );
+                }
+            }
+        }
+    } else {
+        // if 'loading' supported
+        for (const $img of $lazyImages) {
+            const $parent = queryClosestParent(
+                $img,
+                `.${CSS_CLASS.IMAGE}`
+            );
+
+            if($parent) {
+                $parent.classList.add(CSS_CLASS.IMAGE_LAZY_LOADED);
+            }
+        }
+    }
+};
+
+/* Reset Lazyload Callbacks */
+const resetLazyloadCallbacks = () => {
+    if ("loading" in HTMLImageElement.prototype) {
+        const $lazyImages = document.querySelectorAll('[loading="lazy"]');
+        for (const $img of $lazyImages) {
+            $img.removeEventListener("load", lazyImageLoad, { once: true });
+            $img.removeEventListener("error", lazyImageError, { once: true });
+        }
+    }
+};
+
 
 export {
     getImageMetadata,
     loadImage,
-    lazyLoadImage
+    lazyLoadImage,
+    triggerLazyloadCallbacks,
+    resetLazyloadCallbacks
 }

assets/styles/components/_image.scss

@@ -0,0 +1,20 @@
+// ==========================================================================
+// Components / Image
+// ==========================================================================
+
+.c-image {
+
+}
+
+.c-image_img {
+
+    // Lazy loading styles
+    .c-image.-lazy-load & {
+        transition: opacity $speed $easing;
+        opacity: 0;
+    }
+
+    .c-image.-lazy-loaded & {
+        opacity: 1;
+    }
+}

assets/styles/components/_scrollbar.scss

@@ -1,38 +0,0 @@
-// ==========================================================================
-// Components / Scrollbar
-// ==========================================================================
-
-.c-scrollbar {
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 11px;
-    height: 100vh;
-    transform-origin: center right;
-    transition: transform 0.3s, opacity 0.3s;
-    opacity: 0;
-
-    &:hover {
-        transform: scaleX(1.45);
-    }
-
-    &:hover, .has-scroll-scrolling &, .has-scroll-dragging & {
-        opacity: 1;
-    }
-}
-
-.c-scrollbar_thumb {
-    position: absolute;
-    top: 0;
-    right: 0;
-    background-color: color(darkest);
-    opacity: 0.5;
-    width: 7px;
-    border-radius: 10px;
-    margin: 2px;
-    cursor: grab;
-
-    .has-scroll-dragging & {
-        cursor: grabbing;
-    }
-}

assets/styles/elements/_document.scss

@@ -51,25 +51,9 @@ html {
     &.is-loading {
         cursor: wait;
     }
-
-    &.has-scroll-smooth {
-        overflow: hidden;
-        position: fixed;
-        left: 0;
-        top: 0;
-        height: 100%;
-        width: 100%;
-    }
-
-    &.has-scroll-dragging {
-        user-select: none;
-    }
 }
 
 body {
-    .has-scroll-smooth & {
-        overflow: hidden;
-    }
 }
 
 ::selection {

assets/styles/main.scss

@@ -32,6 +32,10 @@
 @import "generic/form";
 @import "generic/button";
 
+// Vendors
+// ==========================================================================
+@import "node_modules/locomotive-scroll/dist/locomotive-scroll";
+
 // Elements
 // ==========================================================================
 
@@ -40,7 +44,6 @@
 // Objects
 // ==========================================================================
 
-@import "objects/scroll";
 @import "objects/container";
 @import "objects/ratio";
 @import "objects/icons";
@@ -48,17 +51,13 @@
 // @import "objects/layout";
 // @import "objects/table";
 
-// Vendors
-// ==========================================================================
-// @import "vendors/vendor";
-
 // Components
 // ==========================================================================
 
-@import "components/scrollbar";
 @import "components/heading";
 @import "components/button";
 @import "components/form";
+@import "components/image";
 
 // Utilities
 // ==========================================================================

assets/styles/objects/_scroll.scss

@@ -1,7 +0,0 @@
-// ==========================================================================
-// Objects / Scroll
-// ==========================================================================
-
-.o-scroll {
-    min-height: 100vh;
-}

docs/technologies.md

@@ -181,10 +181,7 @@ detection and smooth scrolling with parallax.
 ```js
 import LocomotiveScroll from 'locomotive-scroll';
 
-this.scroll = new LocomotiveScroll({
-    el: this.el,
-    smooth: true
-});
+this.scroll = new LocomotiveScroll({})
 ````
 
 Learn more about [Locomotive Scroll][locomotive-scroll].

package-lock.json

@@ -8,7 +8,7 @@
             "name": "@locomotivemtl/boilerplate",
             "version": "1.0.0",
             "dependencies": {
-                "locomotive-scroll": "^4.1.4",
+                "locomotive-scroll": "^5.0.0-beta.8",
                 "modujs": "^1.4.2",
                 "modularload": "^1.2.6",
                 "normalize.css": "^8.0.1",
@@ -390,6 +390,11 @@
             "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==",
             "dev": true
         },
+        "node_modules/@studio-freight/lenis": {
+            "version": "1.0.12",
+            "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.12.tgz",
+            "integrity": "sha512-iN3JQ6qJVc+L7vh8NjlDibw9dvjjifvlJ+s0UAkfwty+vW9MJxRfszb5X/eAhcbDLZW6MlvjRHoH9WSQH3J8eA=="
+        },
         "node_modules/@types/cookie": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
@@ -686,11 +691,6 @@
             "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
             "dev": true
         },
-        "node_modules/bezier-easing": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
-            "integrity": "sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY="
-        },
         "node_modules/binary-extensions": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -700,11 +700,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/bindall-standalone": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/bindall-standalone/-/bindall-standalone-1.0.5.tgz",
-            "integrity": "sha1-90MDiPHH+amt4Px1pADnEPZpKh0="
-        },
         "node_modules/brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2708,11 +2703,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/lethargy": {
-            "version": "1.0.9",
-            "resolved": "https://registry.npmjs.org/lethargy/-/lethargy-1.0.9.tgz",
-            "integrity": "sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg=="
-        },
         "node_modules/limiter": {
             "version": "1.1.5",
             "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
@@ -2802,13 +2792,14 @@
             }
         },
         "node_modules/locomotive-scroll": {
-            "version": "4.1.4",
-            "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz",
-            "integrity": "sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==",
+            "version": "5.0.0-beta.8",
+            "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-5.0.0-beta.8.tgz",
+            "integrity": "sha512-4Nq12voKr5719aaySZg3FX/gQKQIAaAC4NkBiU27aKEKFnYcTeOB1r8VO5bGpEIOGQo94wsiJQNZuRb3TsxjHA==",
             "dependencies": {
-                "bezier-easing": "^2.1.0",
-                "smoothscroll-polyfill": "^0.4.4",
-                "virtual-scroll": "^1.5.2"
+                "@studio-freight/lenis": "1.0.12"
+            },
+            "engines": {
+                "node": ">=17"
             }
         },
         "node_modules/lodash": {
@@ -3163,6 +3154,7 @@
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
             "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -4113,11 +4105,6 @@
             "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=",
             "dev": true
         },
-        "node_modules/smoothscroll-polyfill": {
-            "version": "0.4.4",
-            "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz",
-            "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg=="
-        },
         "node_modules/snapdragon": {
             "version": "0.8.2",
             "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -4344,9 +4331,9 @@
             "dev": true
         },
         "node_modules/socket.io-parser": {
-            "version": "4.2.2",
-            "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.2.tgz",
-            "integrity": "sha512-DJtziuKypFkMMHCm2uIshOYC7QaylbtzQwiMYDuCKy3OPkjLzu4B2vAhTlqipRHHzrI0NJeBAizTK7X+6m1jVw==",
+            "version": "4.2.4",
+            "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+            "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
             "dev": true,
             "dependencies": {
                 "@socket.io/component-emitter": "~3.1.0",
@@ -4814,11 +4801,6 @@
                 "node": ">=0.8.0"
             }
         },
-        "node_modules/tiny-emitter": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-1.2.0.tgz",
-            "integrity": "sha1-bchFBSywjr78GHRyO1jySmSMO28="
-        },
         "node_modules/tiny-glob": {
             "version": "0.2.9",
             "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -5108,17 +5090,6 @@
                 "node": ">= 0.8"
             }
         },
-        "node_modules/virtual-scroll": {
-            "version": "1.5.2",
-            "resolved": "https://registry.npmjs.org/virtual-scroll/-/virtual-scroll-1.5.2.tgz",
-            "integrity": "sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==",
-            "dependencies": {
-                "bindall-standalone": "^1.0.5",
-                "lethargy": "^1.0.2",
-                "object-assign": "^4.0.1",
-                "tiny-emitter": "^1.0.0"
-            }
-        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5420,6 +5391,11 @@
             "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==",
             "dev": true
         },
+        "@studio-freight/lenis": {
+            "version": "1.0.12",
+            "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.12.tgz",
+            "integrity": "sha512-iN3JQ6qJVc+L7vh8NjlDibw9dvjjifvlJ+s0UAkfwty+vW9MJxRfszb5X/eAhcbDLZW6MlvjRHoH9WSQH3J8eA=="
+        },
         "@types/cookie": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
@@ -5641,22 +5617,12 @@
             "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
             "dev": true
         },
-        "bezier-easing": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
-            "integrity": "sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY="
-        },
         "binary-extensions": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
             "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
             "dev": true
         },
-        "bindall-standalone": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/bindall-standalone/-/bindall-standalone-1.0.5.tgz",
-            "integrity": "sha1-90MDiPHH+amt4Px1pADnEPZpKh0="
-        },
         "brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -7221,11 +7187,6 @@
             "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
             "dev": true
         },
-        "lethargy": {
-            "version": "1.0.9",
-            "resolved": "https://registry.npmjs.org/lethargy/-/lethargy-1.0.9.tgz",
-            "integrity": "sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg=="
-        },
         "limiter": {
             "version": "1.1.5",
             "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
@@ -7297,13 +7258,11 @@
             }
         },
         "locomotive-scroll": {
-            "version": "4.1.4",
-            "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz",
-            "integrity": "sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==",
+            "version": "5.0.0-beta.8",
+            "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-5.0.0-beta.8.tgz",
+            "integrity": "sha512-4Nq12voKr5719aaySZg3FX/gQKQIAaAC4NkBiU27aKEKFnYcTeOB1r8VO5bGpEIOGQo94wsiJQNZuRb3TsxjHA==",
             "requires": {
-                "bezier-easing": "^2.1.0",
-                "smoothscroll-polyfill": "^0.4.4",
-                "virtual-scroll": "^1.5.2"
+                "@studio-freight/lenis": "1.0.12"
             }
         },
         "lodash": {
@@ -7588,7 +7547,8 @@
         "object-assign": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-            "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+            "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+            "dev": true
         },
         "object-copy": {
             "version": "0.1.0",
@@ -8350,11 +8310,6 @@
             "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=",
             "dev": true
         },
-        "smoothscroll-polyfill": {
-            "version": "0.4.4",
-            "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz",
-            "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg=="
-        },
         "snapdragon": {
             "version": "0.8.2",
             "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -8547,9 +8502,9 @@
             }
         },
         "socket.io-parser": {
-            "version": "4.2.2",
-            "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.2.tgz",
-            "integrity": "sha512-DJtziuKypFkMMHCm2uIshOYC7QaylbtzQwiMYDuCKy3OPkjLzu4B2vAhTlqipRHHzrI0NJeBAizTK7X+6m1jVw==",
+            "version": "4.2.4",
+            "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+            "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
             "dev": true,
             "requires": {
                 "@socket.io/component-emitter": "~3.1.0",
@@ -8912,11 +8867,6 @@
                 }
             }
         },
-        "tiny-emitter": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-1.2.0.tgz",
-            "integrity": "sha1-bchFBSywjr78GHRyO1jySmSMO28="
-        },
         "tiny-glob": {
             "version": "0.2.9",
             "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -9127,17 +9077,6 @@
             "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
             "dev": true
         },
-        "virtual-scroll": {
-            "version": "1.5.2",
-            "resolved": "https://registry.npmjs.org/virtual-scroll/-/virtual-scroll-1.5.2.tgz",
-            "integrity": "sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==",
-            "requires": {
-                "bindall-standalone": "^1.0.5",
-                "lethargy": "^1.0.2",
-                "object-assign": "^4.0.1",
-                "tiny-emitter": "^1.0.0"
-            }
-        },
         "which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -14,7 +14,7 @@
         "build": "node --experimental-json-modules --no-warnings build/build.js"
     },
     "dependencies": {
-        "locomotive-scroll": "^4.1.4",
+        "locomotive-scroll": "^5.0.0-beta.8",
         "modujs": "^1.4.2",
         "modularload": "^1.2.6",
         "normalize.css": "^8.0.1",

www/form.html

@@ -18,8 +18,8 @@
     </head>
     <body data-module-load>
         <div data-load-container>
-            <div class="o-scroll" data-module-scroll="main">
-                <header data-scroll-section>
+            <div data-module-scroll="main">
+                <header>
                     <a href="/"><h1>Locomotive Boilerplate</h1></a>
                     <nav>
                         <ul>
@@ -30,7 +30,7 @@
                     </nav>
                 </header>
 
-                <main data-scroll-section>
+                <main>
                     <div class="o-container">
                         <h1 class="c-heading -h1">Page</h1>
 
@@ -90,7 +90,7 @@
                     </div>
                 </main>
 
-                <footer data-scroll-section>
+                <footer>
                     <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
                 </footer>
             </div>

www/grid.html

@@ -34,8 +34,8 @@
 
 <body data-module-load>
     <div data-load-container>
-        <div class="o-scroll" data-module-scroll="main">
-            <header data-scroll-section>
+        <div data-module-scroll="main">
+            <header>
                 <a href="/">
                     <h1>Locomotive Boilerplate</h1>
                 </a>
@@ -48,7 +48,7 @@
                 </nav>
             </header>
 
-            <main data-scroll-section>
+            <main>
                 <div class="o-container">
                     <h1 class="c-heading -h1">Hello</h1>
 
@@ -76,7 +76,7 @@
                 </div>
             </main>
 
-            <footer data-scroll-section>
+            <footer>
                 <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
                         title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
             </footer>

www/images.html

@@ -18,8 +18,8 @@
     </head>
     <body data-module-load>
         <div data-load-container>
-            <div class="o-scroll" data-module-scroll="main">
-                <header data-scroll-section>
+            <div data-module-scroll="main">
+                <header>
                     <a href="/"><h1>Locomotive Boilerplate</h1></a>
                     <nav>
                         <ul>
@@ -30,7 +30,7 @@
                     </nav>
                 </header>
 
-                <main data-scroll-section>
+                <main>
                     <div class="o-container">
                         <h1 class="c-heading -h1">Images</h1>
 
@@ -39,84 +39,24 @@
 
                             <h3 class="c-heading -h3">Basic</h3>
 
-                            <div style="width: 640px; max-width: 100%;">
-                                <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
-                                <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
-                            </div>
-
-                            <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
-
-                            <div style="width: 480px; max-width: 100%;">
-                                <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=1);"></div>
-                                <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=2);"></div>
-                            </div>
-                        </section>
-
-                        <section>
-                            <h3 class="c-heading -h3">Relative to scroll</h3>
-
-                            <h4 class="c-heading -h3">Using o-ratio & img</h3>
+                            <img src="http://picsum.photos/800/600?v=1" alt="" loading="lazy" class="c-image_img" width="800" height="600"/>
 
                             <div style="width: 640px; max-width: 100%;">
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=3" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=4" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
-                                <div class="o-ratio u-4:3">
-                                    <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/800/600?v=5" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-                                </div>
+                                <div class="c-image"><img src="http://picsum.photos/800/600?v=2" alt="" loading="lazy" class="c-image_img" width="800" height="600"/></div>
+                                <div class="c-image"><img src="http://picsum.photos/800/600?v=3" alt="" loading="lazy" class="c-image_img" width="800" height="600"/></div>
                             </div>
 
-                            <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
+                            <h4 class="c-heading -h3">Using o-ratio</h3>
 
                             <div style="width: 480px; max-width: 100%;">
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=1"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=2"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=3"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=4"></div>
-                                <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/1280/720?v=5"></div>
-                            </div>
-
-                            <h4 class="c-heading -h3">Using SVG viewport for ratio</h3>
-
-                            <div style="width: 480px; max-width: 100%;">
-                                <img
-                                    data-scroll
-                                    data-scroll-call="lazyLoad, Scroll, main"
-                                    data-src="http://picsum.photos/640/480?v=6"
-                                    alt=""
-                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                                />
-
-                                <img
-                                    data-scroll
-                                    data-scroll-call="lazyLoad, Scroll, main"
-                                    data-src="http://picsum.photos/640/480?v=7"
-                                    alt=""
-                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                                />
-
-                                <img
-                                    data-scroll
-                                    data-scroll-call="lazyLoad, Scroll, main"
-                                    data-src="http://picsum.photos/640/480?v=8"
-                                    alt=""
-                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3C/svg%3E"
-                                />
+                                <div class="o-ratio u-4:3"><div class="c-image || o-ratio_content"><img src="http://picsum.photos/800/600?v=4" alt="" loading="lazy" class="c-image_img"/></div></div>
+                                <div class="o-ratio u-4:3"><div class="c-image || o-ratio_content"><img src="http://picsum.photos/800/600?v=5" alt="" loading="lazy" class="c-image_img"/></div></div>
                             </div>
                         </section>
                     </div>
                 </main>
 
-                 <footer data-scroll-section>
+                 <footer>
                     <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
                 </footer>
             </div>

www/index.html

@@ -42,8 +42,8 @@
 <body data-module-load>
 
     <div data-load-container>
-        <div class="o-scroll" data-module-scroll="main">
-            <header data-scroll-section>
+        <div data-module-scroll="main">
+            <header>
                 <a href="/">
                     <h1>Locomotive Boilerplate</h1>
                 </a>
@@ -56,13 +56,13 @@
                 </nav>
             </header>
 
-            <main data-module-example data-scroll-section>
+            <main data-module-example>
                 <div class="o-container">
                     <h1 class="c-heading -h1">Hello</h1>
                 </div>
             </main>
 
-            <footer data-scroll-section>
+            <footer>
                 <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
                         title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
             </footer>