[Gif Control]

@OSUblake thanks for all the help

[Gif Control]

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)

[Gif Control]

@OSUblake 

See the Pen mdXeVYY by JavontaeH (@JavontaeH) on CodePen

 

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.

[Gif Control]

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,

        });

    }

  };

[Gif Control]

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

[Gif Control]

@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.

[Gif Control]

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?