Jump to content
GreenSock

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

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

dbb34ab0da.png

Link to post
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 post
Share on other sites

Thank you very much, dear Jesper!!!

Link to post
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.

×