CBJ Digital Posted July 17, 2020 Share Posted July 17, 2020 Hey, I have an element that i'd like to wiggle when you hover over it. Basically it should wiggle continuously whilst hovering and then you mouse out it should complete the wiggle and return to it's default state. I have the below which partially works but not fully. Any help? Thanks, Neil CustomWiggle.create("myWiggle", { wiggles: 6 }) document.querySelector(".site-title").addEventListener('mouseover', _ => { gsap.to( "header.layout .site-title", { duration: 2, rotation: 3, ease: "myWiggle", yoyo: true } ) }) Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 17, 2020 Share Posted July 17, 2020 Hey Neil and welcome to the GreenSock forums! Thanks for supporting GreenSock. I assume you want the wiggles to gradually get faster after the element is hovered and gradually slow down once it's unhovered? While CustomWiggle is great for making preset wiggle effects, it takes a little more work to get it working with dynamic/interactive effects. You could try creating a timeline where it has a tween gradually speeding up, a label, then a tween that animates at a constant wiggle rate, then a .call() function to go back to the label while the element is hovered, then a tween to slow it down after the .call() function if it's no longer hovered. But that's a little complex. It might be easier to use a modifier function to create the wiggle instead. If I had more time I'd make a demo for you, but here's a demo that does that sort of thing paired with ScrollTrigger (the same technique was used to create this interesting pen): See the Pen 03a0bf209de49a8cef8fffb1b0eb4eab?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
GreenSock Posted July 17, 2020 Share Posted July 17, 2020 Yeah, there are a lot of ways to accomplish it. Here's a fork of the CodePen Zach mentioned: See the Pen 60851185de23b604dd72d5396520f49f?editors=1010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
CBJ Digital Posted July 18, 2020 Author Share Posted July 18, 2020 Thanks for the replies. Actually, I've realised I just want one round of wiggling when i hover over and then if the mouse moves off and back on then it would do a second wiggle. Is it not possible with the snippet I posted? It sort of works but the element ends up at an odd angle when i mouseout? Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 18, 2020 Share Posted July 18, 2020 Are you saying that you want it to wiggle while it's hovered and unhovered but not if the cursor stays hovering it? If so, I'd likely do something like this: See the Pen 2afcd0880a5c480636eeab23c02288b7?editors=0010 by GreenSock (@GreenSock) on CodePen 3 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