Tengo una animación GSAP como esta:
window.addEventListener('keydown', ()=>{ GSAP.to(this.box, { x: this.box.position.x + 4, duration: 1, } }); Quiero incrementar la posición x del cuadro en múltiplos de 4, y mi código actual anterior funciona, pero solo si el usuario espera hasta que haya pasado 1 segundo antes de presionar otra tecla. Luego va 0 -> 4 -> 8 etc.
Si no esperan un segundo, lo que sucede es algo así como 0 -> 3.76 -> 6.45 . Estos números cambian dependiendo de cuánto tiempo espera un usuario antes de presionar otra tecla. Esto tiene sentido porque estoy cancelando efectivamente la animación y usando la posición actual (dado que aún no ha pasado 1 segundo, aún no llegaría a 4) y luego solo vuelvo a ejecutar la animación con la posición actual (eso no fue 4).
Esencialmente, quiero evitar que se active el detector de eventos 'keydown' hasta que la animación de 1 segundo se haya completado por completo.
¿Como podría hacerlo?
Esto debería funcionar:
class Test { constructor(el) { this.box = el window.addEventListener('keydown', () => { if (!this.tl || !this.tl.isActive()) { this.tl = gsap.to(this.box, { x: "+=4", duration: 1, }) console.log("Moving to:", Math.floor(this.box.getBoundingClientRect().x)) } }); } } const test = new Test(box) #box { width: 25px; height: 25px; background: blue; } <div id="box"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/CSSRulePlugin.min.js"></script>Probablemente no sea la solución más limpia, gsap es una gran herramienta y seguramente tiene una mejor manera de manejar este escenario, pero este es el primer enfoque brutal que me vino a la mente.
EDITAR: Usar el método isActive() ya es un poco mejor.