I wrote a program called Hover Shake. Import it into your program to shake select HTML elements on hover

Like Quincy wrote in a recent Medium post, we should take advantage of existing code and we don’t necessarily have to write everything in-house.

If you want to make HTML elements shake on mouse hover, you can import Hover Shake which is a small program that I wrote.

Try it out on CodePen where it is currently a picked pen.

Get the code on my GitHub page. There are instructions in the js file itself and the same instructions are also in the README if you like.

Enjoy!

1 Like

Nice, i redid it in just css. No pesky javascript :slight_smile:

1 Like

Very cool! Nice implementation. Keyframes are definitely smoother. Instead of ‘Hover Shake’, this one looks like ‘Hover Wobble’. :joy:

Nice thing about the JS is that you can call the function with speed and angle params so it’s lightning fast to customize new types of shaking with just 1 line of code.

Could probably do something similar with the CSS though? I wonder if there is a way to make the CSS version quickly editable for elements on the page that you want to shake more or less or faster or slower. Closest thing I can think of is $(’#element’).css()

Anyways, good job! Nice animation.