Estoy jugando con algunas animaciones GSAP simples y me doy cuenta de que hay un problema con ellas funcionando sin problemas en un navegador móvil (Brave y Chrome Android). Por ejemplo, el siguiente código se ve perfecto en dispositivos de escritorio, mientras que en dispositivos móviles las animaciones parecen retrasarse.

 <div class="container" id="contentContainer"> <div class="content-start"> <div class="medium-box box-1"> The Mekong river originates in the Himalayas in China, where it is known as the Lancang. It flows through the Lower Mekong Basin countries of Myanmar, Laos, Thailand, Cambodia and Vietnam, where it reaches the South China Sea. </div> </div> </div> let mySplitText = new SplitText('.box-1', { type: "words,chars" }), chars = mySplitText.chars; //an array of all the divs that wrap each character gsap.fromTo('.box-1',{y: '100%', opacity: 0},{y: 0, opacity: 1, duration: 1, scrollTrigger: { trigger: '.box-1', start: 'top 60%', end: "bottom 50%", pin: true, pinSpacing: false, markers: true, onEnter: () => { gsap.to('.box-1',{duration: 1, y: '0', opacity: 1}) gsap.from(chars, {duration: 0.5,opacity: 1,scale: 0,ease: "back",stagger: 0.01}) }, onLeave: () => { gsap.to('.box-1',{duration: 1, y: '-100%', opacity: 0}) }, onEnterBack: () => { gsap.to('.box-1',{duration: 1, y: 0, opacity: 1}) gsap.from(chars, {duration: 0.5, opacity: 1,scale: 0,ease: "back",stagger: 0.01}) }, onLeaveBack: () => { gsap.to('.box-1',{duration: 1, y: '100%', opacity: 0}) } }})

Creo que una de las razones por las que la animación se retrasa es por la barra de navegación en los dispositivos móviles que aparece al desplazarse hacia abajo, cambiar el tamaño de la ventana gráfica y cambiar los activadores de inicio y final.

También me doy cuenta, dado que soy bastante nuevo, que mi código podría no ser muy eficiente y eso podría afectar el rendimiento.

Agradecería cualquier consejo sobre cómo hacer que esta experiencia de desplazamiento sea fluida para todos los usuarios en todos los dispositivos. Gracias de antemano.