Jump to content
GreenSock

cptain

Unable to create animation on hover to reverse on mouseleave and then pause

Go to solution Solved by OSUblake,

Recommended Posts

Hello everyone! I'm trying to create some simple animations when the user hovers on an icon, however, when they remove the mouse from the icon, I'd like if the animation first went back to its original state and then pause there.

 

Is there a way to do this?

See the Pen xxpLzPR?editors=1010 by Cptain (@Cptain) on CodePen

Link to comment
Share on other sites

hi @cptain

 

Here is a demo from my lesson Constant Loop with Return to Start in GSAP B-sides, Bonuses, and Oddities

 

See the Pen ExwVxvq?editors=0010 by snorkltv (@snorkltv) on CodePen

 

The basic idea is that on each repeat a callback checks to see if the user is still hovering. This is different then reversing immediately on mouseleave but maybe it's a suitable option to consider.

  • Like 5
Link to comment
Share on other sites

Here's a slight modification. 

 

I changed my tween to a timeline so that I can tap into tweenTo(0) on hover off. 

The cool thing about this is that if you mouseleave BEFORE the first iteration ends when the ball drops down, the animation will appear to reverse.

If you mouseleave when the ball is moving back to the start position it will just continue to the start position.

 

I think I found a new lesson for my students. thanks!

 

See the Pen VwyMjWG?editors=0010 by snorkltv (@snorkltv) on CodePen

  • Like 5
Link to comment
Share on other sites

Thank you so much @Carl! I didn't reach this point, unfortunately, when I started your courses in December. This works almost 100% correct! However, in the very first icon (the scanning one), isn't working just exactly as I want, which isn't the biggest deal if you can't help further.

 

What I was going for is this:

  1. Line is in  the middle by default
  2. User hovers over icon
  3. Line moves to the top, then to the bottom, and keeps repeating
  4. User removes their mouse from the icon
  5. Line returns to default position and animation ends

All of this worked perfectly, other than step 3. Because the animation goes back to its default position, it moves to the center and then back to the top. Is there a way to bypass this? 

See the Pen xxpLzPR by Cptain (@Cptain) on CodePen

Link to comment
Share on other sites

good job incorporating what I had provided.

to make the line go directly back to it's start position we need to pause the timeline that is controlling it (called tween).

we then create a new tween to animate the line to y:0.

when we hover again the original tween needs to restart()

 

code commented below:

See the Pen LYezyZZ?editors=1010 by snorkltv (@snorkltv) on CodePen

 

oddly enough I had created a lesson using this exact technique just a few week ago (hover the "book now") button

 

See the Pen VwrrNMy by snorkltv (@snorkltv) on CodePen

  • Like 4
Link to comment
Share on other sites

@Carl I appreciate you putting the time to help out. I did a bad job explaining the last part. Currently, everything is working perfect. The only thing I was hoping to better was, while hovering, the line moves from -7 to 7  without stopping at the starting position and then restarting. Then on mouse leave, function as it is doing now. Is this even possible?

 

Here is how I initially made it with CSS animations.

See the Pen PoEKmVV by Cptain (@Cptain) on CodePen

 

This is my end goal, in addition to the mouse leave effect (reverting back to default state).

 

 

Link to comment
Share on other sites

  • Solution

Hi cptain,

 

Another option would be to just create a new animation in every hover state.

 

See the Pen PoEJeNP by GreenSock (@GreenSock) on CodePen

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

One final question. Since I'm planning to create hover effects for all of our icons, would I need to create these functions separately for each icon? I would assume there is a much more efficient and smart way, right?

Link to comment
Share on other sites

26 minutes ago, cptain said:

Since I'm planning to create hover effects for all of our icons, would I need to create these functions separately for each icon?

 

Yep. I'd a make a function for each type of animation. That will also make it easier if you need to use the same icon in more than one place.

 

See the Pen ZEvaGqz by GreenSock (@GreenSock) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Hey @OSUblake I tried incorporating your methodology with the functions for each animation. However, I'm having trouble making it work. I'm getting some errors in my console log and I'm not sure what I am doing wrong. If you have any better understanding on what I'm doing wrong, let me know.

 

See the Pen xxpLzPR?editors=1010 by Cptain (@Cptain) on CodePen

Link to comment
Share on other sites

Hi cptain,

 

You would only use the element.querySelector to target elements inside the SVG, so to rotate the SVG itself, you would just use the element that is passed in.

 

// let update = element.querySelector(".icon__update");

// gsap.to(update, { ... });

gsap.to(element, { ... });

 

Another issue is that the rotate to 0 will never happen here because the first animation is infinite.

 

.to(update, { rotate: -360, repeat: -1, ease: "linear", duration: 1.25 })
    .to(update, { rotate: 0, repeat: -1, ease: "linear", duration: 1.25 }); // will never happen

 

So I'm assuming you were going for something like this.

 

See the Pen qBpoNer by GreenSock (@GreenSock) on CodePen

 

  • Thanks 1
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.
×