In the first two images, when you hover over them, the animation distorts the image.
I think it’s very difficult to build it from scratch, so my thought is to find a plugin or a very close effect to it as an alternative and adjust it, but I am not sure as I am not an expert to these animations
Is this something doable? Or maybe a solution close to it?
I am not sure what’s going on, the black screen with the white zeros is the pre-loader, after that It gets you into the site (it makes an animation too).
It works in Firefox on mac but not in Chrome. I notice some of the other demos using the same routines don’t work in Chrome either. That site is impossible to navigate also as the cursor is missing.
They are using some libraries like greensock and Pixi for that effect like this.
Unfortunately that could be quite a task if you want the exact same effect. You would be better off trying to find something that is close to what you want but simpler perhaps. Try searching for “css html Liquid distortion effect” on google and see if you can find something you can use or is close to what you want.
Otherwise you really are going to have to use all those libraries and get your hands dirty with the code unless you can find a plugin that does exactly what you wanted.
This one is quite close but would need a js expert to make it work under the cursor.
I notice that some of those examples I posted end up killing my browser eventually and the whole browser grinds slowly to a halt. These effects while they look great ultimately drain the browser of its resources and if you have a lot of tabs open then things stop working.