cptain Posted March 31, 2022 Share Posted March 31, 2022 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 More sharing options...
Carl Posted March 31, 2022 Share Posted March 31, 2022 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. 5 Link to comment Share on other sites More sharing options...
Carl Posted March 31, 2022 Share Posted March 31, 2022 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 5 Link to comment Share on other sites More sharing options...
cptain Posted March 31, 2022 Author Share Posted March 31, 2022 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: Line is in the middle by default User hovers over icon Line moves to the top, then to the bottom, and keeps repeating User removes their mouse from the icon 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 More sharing options...
Carl Posted March 31, 2022 Share Posted March 31, 2022 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 4 Link to comment Share on other sites More sharing options...
cptain Posted March 31, 2022 Author Share Posted March 31, 2022 @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 More sharing options...
Solution OSUblake Posted April 1, 2022 Solution Share Posted April 1, 2022 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 3 1 Link to comment Share on other sites More sharing options...
cptain Posted April 1, 2022 Author Share Posted April 1, 2022 @OSUblake this worked exactly as I wanted! Thank you and @Carl very much! 1 Link to comment Share on other sites More sharing options...
cptain Posted April 1, 2022 Author Share Posted April 1, 2022 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 More sharing options...
OSUblake Posted April 1, 2022 Share Posted April 1, 2022 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 4 Link to comment Share on other sites More sharing options...
cptain Posted April 2, 2022 Author Share Posted April 2, 2022 Amazing, thanks again! Link to comment Share on other sites More sharing options...
cptain Posted April 6, 2022 Author Share Posted April 6, 2022 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. Link to comment Share on other sites More sharing options...
OSUblake Posted April 6, 2022 Share Posted April 6, 2022 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 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