I am trying to create a ‘While Scrolling In View’ interaction in a section with a height of 200VH.
What I want to create is a BG color animation: black (0%) to red (100%).
I noticed the interaction only will go to 50% (100vh) instead of 100% (200vh)
Is this normal behavior or a bug?
(I understand you can build this with a gradient background instead, but I also want to animate other elements within a 200vh section)
See image below (Scrolled down the whole section, interactions ends at 50%)
This is one of the weird things with the scroll ix. It is impossible to create what you want with just one element being present on the page. As in it is impossible to set start of interaction when element’s top is at the top of the browser window and end when element’s bottom is at the browser’s window bottom. The logical setup would be start “when fully visible” and end “when element starts exiting” and add 1 px div underneath so that this element could actually start exiting. But this just doesn’t work. Who knows why.
It will work if you set your end at “starts exiting” with offset of 50% but this just doesn’t make any sense honestly and is illogical. Or I am stupid to understand it.
