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!
You will have to use interaction with scroll trigger (http://help.webflow.com/lesson/scroll-trigger-interaction)
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
Argh!!..I tried but I didn’t come even close. You can see here: https://preview.webflow.com/preview/logo-test-191f6c?preview=c2b6cbe6f81095035e1d426c39cde19d
Well, lets say you walk half way
It will be enough to make only nav widget itself position: fixed
Clean structure of nav (I deleted one container and moved wrapper). In result it should be like this:
In your case interaction can be applied to “blue” section.
So when section scrolls OUT of view on 50% >>> logo-text will shrink and disappear.
For create this, click on section and create new interaction. (that one that you made you can delete).
Here is video of result that you will have https://drive.google.com/file/d/0B-7cg8BSq1Z_YW1vY25TOEdxWUU/view
Thank you so much!!
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.
give “logo text” some height in pixels, not “auto” . It should fix your problem
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.