Jump to content
GreenSock

Jae_H

Members
  • Posts

    7
  • Joined

  • Last visited

Jae_H's Achievements

  1. Jae_H

    Gif Control

    @OSUblake thanks for all the help
  2. Jae_H

    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)
  3. Jae_H

    Gif Control

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

    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, }); } };
  5. Jae_H

    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 demo.mp4
  6. Jae_H

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

    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?
×