Cool Custom Code SVG Hover States

Hey all!

I just came across these super cool effects:

https://tympanus.net/Development/DistortedLinkEffects/

And wondering if anyone would be able to give a walkthrough or point me in the direction of learning how to implement something like this? I see the link to Github in the top corner but honestly I’m not sure what to do with all of that information, any insight much appreciated!

TIA :smiley:

This is a “code” solution and so you would need to work directly with the code to use this yourself. On the GitHub page you would download the entire project as a zip file and extract it on your computer. All the files you need to work with are in the “src” folder. The effects are being controlled by a JavaScript file called animatedLink.js. You could adjust the behavior of the effects by changing the values of elements like “duration, ease or startAt” etc. I think the best way to learn this would be to have a good grounding in HTML, CSS and JavaScript first. If you click on this link you can see a preview of the Javascript file that controls the effects.

1 Like