Estoy desarrollando un sitio web con una resolución máxima de 1200 px que se ingresa para garantizar que el contenido se vea bien en pantallas más grandes. Ahora estoy atascado con un problema, estoy creando una animación con GSAP al pasar el mouse con una serie de formas que siguen al usuario, sin embargo, la animación está "desplazada" ya que GSAP tiene en cuenta todo el ancho de la ventana gráfica en lugar de la tamaño de contenido fijo:

 <main> <section> <div class="shapes"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> <div class="shape shape-4"></div> </div> <div class="content"> <h1>Hello! Some text</h1> </div> </section> </main>

CSS:

 section { max-width: 1200px; margin: 0 auto; display: block; padding: 0px 20px; } .shapes { position: relative; height: 100vh; max-width: 1200px; background: white; overflow: hidden; } .shape { will-change: transform; position: absolute; border-radius: 50%; $shapes: (#63A088: 600px, #56638A: 300px, #483A58: 100px); @each $color, $size in $shapes { &.shape-#{index($shapes, ($color $size))} { background: $color; width: $size; height: $size; margin: (-$size/2) 0 0 (-$size/2); } } } .content { top: 0; left: 0; position: absolute; display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; max-width: 1200px; background: white; mix-blend-mode: screen; } .h1 { color:black; margin: 0; text-align: center; }

JS

 window.addEventListener('mousemove', (e) => { const { clientX, clientY } = e const mouseX = e.clientX; const mouseY = e.clientY; // const mouseX = Math.round((e.clientX / window.innerWidth) * 100); // const mouseY = Math.round((e.clientY / window.innerHeight) * 100); gsap.to(".shape", { x: mouseX, y: mouseY, stagger: -0.1 }) })

Intenté agregar una clase específica y apuntar al ancho de la sección, pero desafortunadamente esta solución no funciona.