When I scroll down the logo closes up, you will see the word “chase” and the chase “icon” move into each other and masks the word “chase” within the icon and then places the logo icon into the center. Any thoughts?? Thanks in advance!
You will be not able to create EXACTLY same animation, because there is involved “active scroll” (animation progress depends on how much % of page scrolled)
By using interaction with scroll trigger you can have pretty similar animation.
I would put word “CHASE” and logo image inside the wrapper div and centered it inside the navbar. Both elements inside the wrapper is cantered too
During the interaction header with word “CHASE” can change its width from “auto” to “0” and change its opacity from 100% to 0%
Logo will go to center by itself, without any interaction
Thanks your message! I am really not an expert in CSS, and I am a newbie to Webflow. Is it possible to, please, give me quick run down on what I need to do in Webflow to achieve this interaction? I mean, I know and understand how to play around with the interactions, but I am still not there yet. Thanks in advance!
I would add the div on the top of all site and set interaction on that div:
when div goes out of view >>> logo “shrinks”
when div goes into view >>> logo back to its width
As I mentioned earlier:
navbar - text-align: center;
wrapper = div with width: auto, display: inline-block, text align: center;
logo-word and logo-image: both display: inline-block
Try to play with it If you will have more questions we will try to figure it out
I made the changes and it worked, but one thing doesn’t appear right. The text for the logo keeps stacking on top of each other when the scroll is triggered.
Also, another thing is when I view the page in mobile view, I no longer see the hamburger icon, it’s gone.