Jump to content
GreenSock

Ivan Mocs

How to reveal image on hover and fade out to top on mouseleave

Go to solution Solved by Anastasiya33,

Recommended Posts

Hi,

 

The problem is related to the fact that the mouse leave animation, animates the opacity of the container to 0. Then on the next mouse enter event, the animation takes the container from opacity 0 to it's current opacity value, which is also 0. The GSAP instance actually happens, the issue are the current and starting values for the from instance.

 

This seems to do what you want:

hover1.addEventListener("mouseenter", (e) => {
  tl.fromTo(container, 1.5, {
    yPercent: -100,
    autoAlpha: 0
  }, {
    yPercent: 0,
    ease: Power2.out,
    autoAlpha: 1
  });
  tl.from(image, 1.5, {
    yPercent: 100,
    scale: 1.3,
    delay: -1.5,
    ease: Power2.out
  });
});

Also I'd encourage you to find a way to use a single animation for hover effects and play/reverse it on each mouse event. It's far cleaner and easier to use, something like this:

const tl = gsap.timeline({ paused: true })
	//Add instances to the timeline

const button = document.findElementById("button");

button.addEventListener("mouseenter", () => tl.play());
button.addEventListener("mouseleave", () => tl.reverse());

Also you can toggle the reversed property of a GSAP instance:

tl.reversed( !tl.reversed() ); 

Happy Tweening!!!

  • Like 1
Link to comment
Share on other sites

2 hours ago, Rodrigo said:

Hi,

 

The problem is related to the fact that the mouse leave animation, animates the opacity of the container to 0. Then on the next mouse enter event, the animation takes the container from opacity 0 to it's current opacity value, which is also 0. The GSAP instance actually happens, the issue are the current and starting values for the from instance.

 

This seems to do what you want:

hover1.addEventListener("mouseenter", (e) => {
  tl.fromTo(container, 1.5, {
    yPercent: -100,
    autoAlpha: 0
  }, {
    yPercent: 0,
    ease: Power2.out,
    autoAlpha: 1
  });
  tl.from(image, 1.5, {
    yPercent: 100,
    scale: 1.3,
    delay: -1.5,
    ease: Power2.out
  });
});

Also I'd encourage you to find a way to use a single animation for hover effects and play/reverse it on each mouse event. It's far cleaner and easier to use, something like this:

const tl = gsap.timeline({ paused: true })
	//Add instances to the timeline

const button = document.findElementById("button");

button.addEventListener("mouseenter", () => tl.play());
button.addEventListener("mouseleave", () => tl.reverse());

Also you can toggle the reversed property of a GSAP instance:

tl.reversed( !tl.reversed() ); 

Happy Tweening!!!

thanks in advance, I fixed it and it worked

but why after animation both elements disappear

See the Pen WNJvOLy by ivan-nizters (@ivan-nizters) on CodePen

Edited by Ivan Mocs
Link to comment
Share on other sites

9 minutes ago, Anastasiya33 said:

Hey Ivan,

I have forked your demo and changed a little bit. Please, check it.

 

 

 

Thank you

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