Jump to content
GreenSock

Jae_H

Gif Control

Go to solution Solved by OSUblake,

Recommended Posts

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?

Link to comment
Share on other sites

Welcome the forums @Jae_H

 

Gifs aren't videos, and the only way to control the playback of them is convert every frame to a still image and create a video player using canvas. So basically the best solution is to just use a video, sprite sheet animation, or some other playback medium like lottie.

  • Like 1
Link to comment
Share on other sites

Or for this use case I guess you could add and remove it from the DOM instead? Swop out a static image frame in the src tag.

Link to comment
Share on other sites

45 minutes ago, Cassie said:

Or for this use case I guess you could add and remove it from the DOM instead? Swop out a static image frame in the src tag.

That's exactly what I was gonna suggest but you don't even need an alternate image if it's hidden anyway - just use the gif so that it gets loaded and then right before you show it, change the src to something else and back again to essentially reload the gif (but at this point it's in the cache so it'll be instantaneous). Worth a try. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Can you make a minimal demo showing what you are trying to do? If something is happening too early, then you can use delay on the animation or the position parameter if you're using a timeline.

 

 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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,
        });
    }
  };
Link to comment
Share on other sites

I'm still a little unsure about what you're having an issue with. Can you make a minimal demo that clearly shows what you are having an issue with? You don't need to include React or anything else not-related to the animation issue. Just something simple like an animation with a colored block. Thanks!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

  • Solution

Thanks for demo. Like I was saying earlier, you can use a Timeline's position parameter to control that.

 

See the Pen XWZmKrG by GreenSock (@GreenSock) on CodePen

 

Also, if you are going to animate the same element more than once, you may want to consider use fromTo animations instead so that you don't create from logic issues.

 

 

  • Like 2
Link to comment
Share on other sites

@OSUblake thanks for all the help

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×