Canvas page transitions and hover

[GeorgeErshov 9 Likes (Newbie)]

Dear forum participants. I need your professionalism in coding. I can’t understand what is used to achieve effects such as in these examples:
1. When you click on any project from the bottom up, the rounded form of the divlock block https://jesperlandberg.dev/
2. a very similar effect we can see when you click on the menu at https://www.chiaraluzzana.com/about
3. when you hover over any project + when you click on this project, a similar effect appears https://www.martinehrlich.com/
I hope I threw off enough examples to understand what I mean. I want to achieve a smooth distortion of the standard div block. With CSS, this smooth effect is not possible.
Please tell me the script or explain how to repeat it? I also found a library with a similar menu, but I don’t quite understand whether it is or not: https://tympanus.net/Development/OffCanvasMenuEffects/bubble.html

 

[ZachSaucier 7,126 Likes (Superhero)]

Hey GeS and welcome. Perhaps @jesper.landberg can give his input  

 

SVG is almost always the way to go for this sort of thing as it's responsive and more flexible than divs. That's exactly what the Codrops animation uses. I talk about the steps to create that sort of transition here:

Let us know if you have specific questions.

[jesper.landberg 60 Likes (Contributor)]

@GeS @ZachSaucier In my case I use WebGL for the effect. Here I put together a quick codepen to demonstrate how it can be done.

 

See the Pen rNxpVEd?editors=0110 by ReGGae (@ReGGae) on CodePen

[ZachSaucier 7,126 Likes (Superhero)]

Thanks for posting your approach, @jesper.landberg!

[GeorgeErshov 9 Likes (Newbie)]

Thank you very much, dear Jesper!!!