Originally posted on my old (deleted) profile from dev.to in 2019-07-18. I don’t have anything against the site, but I wasn’t using it anymore.
Once I saw a website for a really bad anime (seriously don’t watch it) with an odd effect when you hover an item in a list. I reproduced a similar thing in my old personal site (I deployed it again here, for nostalgia sake). Recently when remaking my site I extracted the code to a npm lib called “embaralha” which means “to shuffle” in portuguese.
Here’s a GIF demonstrating the effect:
You can install it with npm i embaralha. The function exported has two arguments: the DOM element and the millisseconds for the effect duration. You can use it like the following example:
import { embaralha } from 'embaralha';
const elem = document.querySelector('.your-embaralha-class');
elem.addEventListener('mouseover', async () => embaralha(elem, 1000));
I also did it to learn some things about testing, and some of it is not working, so if you’d be so kind to help me, go to the github repo.