Jump to content
Search Community

Gif Control

Jae_H test
Moderator Tag

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

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

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

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

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.
×
×
  • Create New...