Scroll animation on text elements while keeping the page in place


I’ve been researching this for 2 days now, posted in Webflow Discord, but still unable to solve this.
I’m trying to achieve following in my header - make a scroll animation for text elements while the header stays in place not moving until the animation on the elements is finished.
I’ve found some read-only previews where this is achieved, but I was unable to reverse-engineer these for my page.
In the preview I’ve seen that they’d make the header background pretty long while having the text elements stacked on top of each other with opacity animation so that they come into view after the scroll of previous text element is finished.
However, my header is fixed size picture and I cannot really make it any longer. So I need the header to stay the same size, but make it fixed in position until the scroll animation of the text elements is finished.
I’d very much appreciate any help with this.

I’m not 100% sure what you are wanting! But I would recommend having a heading-wrapper div, that is say, 300vh in height. Then have a sticky section (heading-content) within that which is 100vh high. From there you can have your photo/picutre in the heading-content section and play the animations as the user scrolls through the heading-wrapper section.

Does that make sense? Is that similar to what you are wanting? The text can come and go, the photo will remain in the sticky section. You’ll require a bit of animation work to get it looking smooth!

Thank you so much, Tommy! This is exactly what I needed. At least it makes sense reading it :sweat_smile:
I’ll test the process later today and get back to you if it works to confirm for others with similar predicament.
Really appreciate you for answering, you’re the only one that reached out across several platforms where I asked.

1 Like

Ok so I managed to achieve the exact type of text scroll animation that I had in my mind.
I did it a little differently than you suggested, but you definitely pointed me in the right direction.

For anyone trying to achieve the effect I described in the OP:
I created a new div block, let’s call it buffer div, right under the header section.
Then I set the header section position to “Fixed” and alignment below the position to “Full”. The alignment is important otherwise my whole header was all over the place.
Then I created new class for the buffer div and set it’s position to “Static”.
And then I made the height of the buffer div to 700 VH.

The buffer div effectively works as a railroad for the header and since that is in the fixed position, it stays in view as I scroll and the animation of the text have enough time to play out before the buffer div ends and the animation is finished.
The VH of the buffer div can be used to control the amount of scrolls it takes to play out the whole animation.
Also make sure all your new div blocks with other content are set to relative and are positioned below the buffer div inside the navigator to render them correctly.

1 Like