Wiggle on hover

[CBJ Digital]

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 }

)

})

 

[ZachSaucier]

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

 

[GreenSock]

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

[CBJ Digital]

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?

[ZachSaucier]

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