Im looking creating a shrinking header where the height of the header gets smaller as you scroll down the page.
Any ideas how to achieve this?
Something like this, https://avktooling.dk/
Im looking creating a shrinking header where the height of the header gets smaller as you scroll down the page.
Any ideas how to achieve this?
Something like this, https://avktooling.dk/
Hi there
For something simple like the example you provided you could use the .scrolling class that bricks natively adds to a fixed / sticky header on scroll.
Say in your header you have a wrapper that contains your logo, nav etc. Increase the top / bottom padding to something like 60px and then add the following css:
%root% {
transition: .4s all ease-out;
}
.scrolling %root% {
padding: 15px 20px;
}
You could of course also directly animate the height but personally I feel like the paddings are easier to control and harder to break accidentally
If you’re looking for something fancier you could use the Node Editor with some Scroll Events and GSAP animations.
thanks for your reply manc.
I like the simple solution and will look into implementing it.
Was looking into the Gsap too, but for this usecase might be overkill.
Keep it simple, easier to fix