Quiero resolver un problema relacionado con el tamaño del documento después de cambiar el tamaño. Además, el tamaño de la página no es correcto en el primer cambio de tamaño, pero se configura correctamente después de 2 o 3 cambios de tamaño. Intenté poner alertas en las funciones scrolltrigger llamando al método de actualización de locomotoras pero la alerta no aparece por lo que concluyo que la función de actualización y la que llama a la actualización no funcionan

El problema después de cambiar el tamaño:

Meta:

Código Js para locomotora:

 gsap.registerPlugin(ScrollTrigger); // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll const locoScroll = new LocomotiveScroll({ el: document.querySelector(".smooth-scroll"), smooth: true, smartphone: { smooth: true, }, tablet: { smooth: true, } }); // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on("scroll", ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(".smooth-scroll", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, // we don't have to define a scrollLeft because we're only scrolling vertically. getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, }; }, // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). pinType: document.querySelector(".smooth-scroll").style.transform ? "transform": "fixed", }); // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); gsap.to("#progressbar", { height: "100%", ease: "none", scrollTrigger: { scrub: 0.3, }, });