Streaming live at 10am (PST)

Using 'while scrolling in view' correctly for a header

Hi all,

I’ve had this on several projects but have my mind set on finally fixing this issue…

I have a header which is 500px high with an image and a title. I want to create sort of a parallax effect when scrolling, where I move the title that’s on there.

However, always when I try this, the scroll % is set dependant on the height of the viewport. So on my big monitor, when I load the page, the scrolling animation is already at 60%. I’ve tried changing the settings of ‘fully visible’ ‘starts entering’ and the offset settings, but I can’t get it properly… I simply want the animation to always be at 0% when the page is scrolled all the way to the top, regardless of the size of someones viewport, and to be at 100% when the 500px header section is completely invisible…

Any help would be greatly appreciated!


Here is my public share link: https://preview.webflow.com/preview/boutique-holland?utm_medium=preview_link&utm_source=designer&utm_content=boutique-holland&preview=24b22d00e08248a948db90f10a1afb86&pageId=602bdb64261ee0797b5a080a&itemId=602be07c79e2a57ff25c2233&mode=preview