Estoy tratando de implementar una sección de desplazamiento horizontal usando gsap. Sin embargo, al cambiar el tamaño, la línea de tiempo se desordena. Es especialmente visible al final de la sección horizontal, donde la cantidad de espacio en blanco aumenta o el sitio se corta (dependiendo de si está ampliando o reduciendo la ventana). invalidateOnRefresh: true soluciona esto y vuelve a calcular los valores de la línea de tiempo al actualizar, pero no tiene ningún efecto en mi ejemplo. ¿Cómo lo implemento correctamente?
gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline(); var sectionWidth = $(".section").width(); const ST = ScrollTrigger.create({ animation: tl, trigger: ".container", start: 0, end: sectionWidth * 4, scrub: true, invalidateOnRefresh: true, pin: true, }); tl.to(".container", 5, { x: -sectionWidth }) .to(".container", 5, { x: -sectionWidth * 2 }) .to(".container", 5, { x: -sectionWidth * 3 }) .to(".container", 5, { x: -sectionWidth * 4 }); .section { width: 100vw; height: 100vh; background-color: red; } .section:nth-child(2n) { background-color: blue; } .container { width: 500vw; display: flex; } body { margin: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/ScrollTrigger.js"></script> <div class="container"> <div class="section"></div> <div class="section"></div> <div class="section"></div> <div class="section"></div> <div class="section"></div> </div>