How to create header like in webflow blog? Problem is to make it big right at the top

Design help Animations & Interactions
1

Here is my public share link: LINK
(how to access public share link)

2

Hello @Vlad_Taran

Can you explain more? What you’re trying to achieve?

Here’s the Webflow blog > Responsive web design and development blog | Webflow

Piter :webflow_heart:

3

So, header on the webflow blog page has the X-height. When we start scrolling its instantly change height to X/2. When we scroll back to the top it changes to the first state right at the top. I tried to make it on scrolling (while page is scrolling) but it changes the height on scroll, not instantly. I tried to make it with page on scroll, but it changes the height at the moment I start scrolling up.

4

Okey I see :blush: Give me some time and I will share a link here.

Piter :webflow_heart:

5

You have to use the “While scrolling in view” trigger. And you can use a dummy object (invisible) that will trig the animation. Set the object a bit down the page, for when the object leaves the page from the top, your animation runs. So select this object and create an IX with “While scrolling into view” trigger, then set a new animation for the “while scrolling out of view” event. You’ll also define the reversal of the anim in the ‘out of view’ event.