Instances

To enable the initialization and destruction of components while navigating between pages, we use an array called this.instances = []. This array is used within the contentReplaced() and willReplaceContent() methods in the Main class, as well as in the Core class.

Content Replaced

if (document.querySelectorAll(".js--zoom-b").length) {
    this.instances["ZoomScroll"] = []; <!-- atention here-->
    this.boostify.scroll({
        distance: 50,
        name: "ZoomScroll",
        callback: async () => {
            const { default: ZoomScroll } = await import("@jsModules/ZoomScroll");
            window["lib"]["ZoomScroll"] = ZoomScroll;
            document.querySelectorAll(".js--zoom-b").forEach((element, index) => {
                this.instances["ZoomScroll"][index] = new window["lib"]["ZoomScroll"]({
                    element: element,
                    hero: element.getAttribute("data-hero"),
                });
            });
        },
    });
}

We use the Boostify instance to trigger an event when the scroll position exceeds 50px from the top of the page. At that point, the ZoomScroll class is dynamically imported, and an instance is created for each relevant element.

Will Replace Content

if (document.querySelectorAll(".js--zoom-b").length) {
    this.boostify.destroyscroll({ distance: 5, name: "ZoomScroll" });
    document.querySelectorAll(".js--zoom-b").forEach((element, index) => {
        if (this.instances["ZoomScroll"][index]) {
            this.instances["ZoomScroll"][index].destroy();
        }
    });
    this.instances["ZoomScroll"] = [];
}

When exiting a page, it’s important to ensure all event listeners and scroll-based interactions are properly destroyed to prevent memory leaks and unwanted behavior. This code block addresses two key aspects:

• For Regular Classes: We need to ensure that all event listeners tied to those elements are removed. In this case, the ZoomScroll instances are checked and destroyed for each element if they exist.

• For Scroll-Based Classes (e.g., GSAP ScrollTrigger): Scroll-related events, such as those triggered by the Boostify library, need to be cleaned up. The boostify.destroyscroll() method is used here to unregister scroll-based events associated with the ZoomScroll class.

This ensures both regular event listeners and scroll-triggered events are safely removed when leaving the page.