I am trying to create a interaction where I will have the logo(enlarged) hovering and on clicking the logo it shrinks to navbar area and the main page presents itself.
I am doing this in the following way
- I have a div which overlays the entire page on which the logo hovers.
- The div has a navbar whose logo I have enlarged.
- On clicking the logo the logo reduces in size and the div disappears.
- And the logo on the div matches exactly with the logo on the homepage
So the issue is
- In order to center the logo on the page I have to add margin to the top of the navbar and in this case I have brought the navbar down by a few pixels
- But during the shrinking of the logo the navbar needs to go back to its original place so I have to reduce the space above which is very choppy and ruins the animation.
Can someone please suggest a better way I can achieve this?
Here is my public share link: https://preview.webflow.com/preview/joy-4b0fe4?preview=8821f73883d9e99c3d089352e4577e85
(how to access public share link)