Jae_H Posted May 3, 2022 Share Posted May 3, 2022 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 More sharing options...
OSUblake Posted May 3, 2022 Share Posted May 3, 2022 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. 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 3, 2022 Share Posted May 3, 2022 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 More sharing options...
GreenSock Posted May 3, 2022 Share Posted May 3, 2022 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 More sharing options...
Jae_H Posted May 3, 2022 Author Share Posted May 3, 2022 @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 More sharing options...
OSUblake Posted May 3, 2022 Share Posted May 3, 2022 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. 1 Link to comment Share on other sites More sharing options...
Jae_H Posted May 5, 2022 Author Share Posted May 5, 2022 @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 Link to comment Share on other sites More sharing options...
Jae_H Posted May 5, 2022 Author Share Posted May 5, 2022 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 More sharing options...
OSUblake Posted May 5, 2022 Share Posted May 5, 2022 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 More sharing options...
Jae_H Posted May 5, 2022 Author Share Posted May 5, 2022 @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 More sharing options...
Jae_H Posted May 5, 2022 Author Share Posted May 5, 2022 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 More sharing options...
Solution OSUblake Posted May 5, 2022 Solution Share Posted May 5, 2022 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. 2 Link to comment Share on other sites More sharing options...
Jae_H Posted May 5, 2022 Author Share Posted May 5, 2022 @OSUblake thanks for all the help 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now