Change image exit effect to fade out

[cerealbeast]

I have a image reveal when hovering text, currently the image exits vertically when the mouse leaves the text but I'd like to make it quickly fade out instead, is that possible?

See the Pen c967b1495f6e9aeab1d7add0233f6e6e by gwjr (@gwjr) on CodePen

[Cassie]

Heya! Sure thing - Anything is possible 🌈 That's the magic of GSAP

I can't fork this as it's a private pen - but you'll ned to tweak the tweens in the showImage and hideImage functions...

It looks a little complex to me, not sure what revealInner is in this case... but revealImg is what you want to target.

 

  showImage() {
    //...

    this.tl = gsap
      .timeline({
        onStart: () => {
          this.DOM.reveal.style.opacity = 1;
          gsap.set(this.DOM.el, {
            zIndex: 1000
          });
          // make sure it's visible again before the showimage animation!
           gsap.set(this.DOM.revealImg, {
            opacity: 1
          });
        }
      })
      //...
  }
  hideImage() {
    //...
    this.tl = gsap
      .timeline({
        onStart: () => {
          gsap.set(this.DOM.el, {
            zIndex: 999
          });
        },
        onComplete: () => {
          gsap.set(this.DOM.el, {
            zIndex: ""
          });
          gsap.set(this.DOM.reveal, {
            opacity: 0
          });
        }
      })
      .add("begin")
      // Add whatever animation you want for the 'hide' bit here... 
      .add(
        gsap.to(this.DOM.revealImg, {
          duration: 1,
          ease: "sine.out",
          opacity: 0
        }),
        "begin"
      );
  }
}

[cerealbeast]

Perfect thanks!