Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
GeorgeErshov

Canvas page transitions and hover

Recommended Posts

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×