Streaming live at 10am (PST)

‘while scrolling in view’ interaction don't start at 0%


#1

Hello,

I found a bug which is very annoying with the ‘while scrolling in view’ interaction.
I made a separate project to showcase it. Please find the Read-Only below.

I want the Navbar’s background opacity to progressively change from 0% to 100% while the Header Section leaves the screen. According to the animation preview, the Animation boundaries seems to be correctly set.

However the animation starts at ±50% instead of 0%…

Is it really a bug or am I doing something wrong?
Any way around it without using the ‘Scroll into view’ interaction?

Thank you in advance for your help,
Eliott.


Here is my site Read-Only: https://preview.webflow.com/preview/bug-while-scrolling-into-view?utm_source=bug-while-scrolling-into-view&preview=a4d7571675e66514c6b9a23dba4ba8cf


#2

Hi @eliott

Thank you so much for getting in touch about your ‘while scrolling in view’ interaction. :webflow_heart:

We were able to take a look at your Read-only link, and also noticed that the interaction begins at around 63%.

This is due to the placement of the element being already visible.

The following short screencapture provides a possible workaround: https://cl.ly/7a5bf33d28ce

Hopefully, this was helpful. Feel free to let us know if this is helpful, or if you have any additional questions. :bowing_man:


#3

Hi @mistercreate,
Thank you for taking the time to look into this issue.

Unfortunately, your suggestion isn’t working for me because this works only if the Header Section remains the same size. I want to use it across the whole website and the height might differ. Also, the height can change depending on the screen resolution.

I am surprise there isn’t a way to have a progressive animation from the top of the page. It is a pretty common usage and you already have the ‘while scrolling in view’ feature in Webflow.

Thank you anyway,
Eliott.