Estoy tratando de construir mi propia máquina tragamonedas usando PixiJS para mi renderizado y animándolo con GSAP . Tengo algunos carretes que giran después de hacer clic en un botón, también las texturas de los símbolos se intercambian cuando ya no están a la vista. Así que hay un comienzo decente, pero como no estoy seguro de si la forma en que construyo la base funcionará para funcionalidades futuras, estoy jugando para ver si puedo hacer que algunas de estas funcionen.

Aquí hay un sandbox del proyecto hasta el momento: https://codesandbox.io/s/black-sea-13g0e?file=/src/js/Reels.js

Lo que estoy tratando de hacer ahora
Estoy tratando de ver si puedo hacer cosas con la animación cuando se cumple una condición. En las tragamonedas, a menudo verás que se crea un suspenso cuando el usuario está cerca de obtener un juego de bonificación. En el siguiente ejemplo, necesita 3 peces en los carretes para obtener la bonificación y, como puede ver, cuando se golpean 2, la animación del último carrete tarda más.

lo que probé

1. En mi Reels.js , multipliqué ciertos valores como la duration e y cuando se cumple la condición. Esto no parece funcionar bien con setTimeout y no noto ninguna diferencia.

2. Tratando de trabajar con una línea de timeline gsap donde luego administro los tiempos en lugar de usar un setTimeout Algo como:

 animate(reel, i) { const self = this; let delay = 0.2 * i; if (this.factor > 1) { delay = 0; } const tl = gsap.timeline(); for (let j = 0; j < reel.children.length; j++) { let lastY = reel.children[j].y; tl.to(reel.children[j], { duration: 1.25 * this.factor, y: `+=${this.totalY * this.factor}`, ease: "back.inOut(0.4)", onComplete: () => self.calculateResults(reel.children[j], i, j), modifiers: { y(y) { let newY = parseFloat(y) % 800; let difference = newY - lastY; if (newY < lastY && difference < -100) { reel.children[j].swapSymbol(reel.children[j]); } lastY = newY; return newY; } } }, delay); } } calculateResults(symbol) { if (symbol.texture.textureCacheIds[0] === 'symbolYellow') { this.factor = 3; console.log('Add some suspense!') } }

Lo que estoy buscando
¿Hay alguna manera de hacer esto con la forma en que organicé mis carretes?