Jae_H

@OSUblake thanks for all the help

looks quite a bit different on the small codepen preview but ideally it should start from one image and end/fade out on the other (which also happens to be its starting position)

@OSUblake https://codepen.io/JavontaeH/pen/mdXeVYY see how the fireball fades out before it reaches the other pokemon? I want to control the fade out so it happens after or shortly before it reaches its destination.

code snippet: if (attack.name.toLowerCase() === "fire blast") { const tl = gsap.timeline(); tl.to(playerPokemonRef.current, { x: -0, duration: 0, }) .to(playerPokemonRef.current, { x: +25, duration: 0.15, onComplete: () => { gsap.from(getRef("Fire Blast").current, { y: 300, x: -700, duration: 0.8, autoAlpha: 1, onComplete: () => { // enemy gets hit here if (enemyPokemon.hp - attack.damage < 0) { gsap.to(enemyHpRef.current, { width: 0 + "%", }); } else { gsap.to(enemyHpRef.current, { width: enemyPokemon.hp - attack.damage + "%", }); } // modify pokemon hp on attack hit during the animation enemyPokemon.hp = enemyPokemon.hp - attack.damage; setEnemyPokemon({ ...enemyPokemon }); gsap.to(enemyPokemonRef.current, { x: 15, yoyo: true, repeat: 5, duration: 0.08, }); gsap.to(enemyPokemonRef.current, { opacity: 0, repeat: 5, yoyo: true, duration: 0.08, }); }, }); }, }) .to(playerPokemonRef.current, { x: +0, }); } };

@OSUblake I believe the delay on the animation delays the entire animation, while here I just want the fade out to happen later demo.mp4

@GreenSock's suggestion works but I was also wondering is there a way to control when a fade-out occurs using autoAlpha? can't seem to figure it out, and the auto fade is happening too early.

If I have a gif that I want to be activated on click in react what's the best way to do that with gsap? The gif is loaded but it's visibility is set to hidden and when a button is pressed I want to change visibility back to visible (using autoAlpha), and then start the gif from frame 1. Even when visibility is hidden html seems to run the gif so sometimes it just starts in the middle, any fixes for this?