While scrolling in view animation

Design help Animations & Interactions
1

Hi,

I’m trying to make a simple animation with the element trigger “while scrolling in view”.
It suppose to work like this: http://scroll-in-view-working.webflow.io/

When the red section starts entering the viewport the yellow element starts animating from y-100px y to y+100px. When the red section is in the middle of the viewport the yellow element is in it original state at the middle of the section.

My problem is: http://scroll-in-view-not-working.webflow.io/
When the red section is to close to the top, this animation starts too fast and is over long before it should.

What to do? Is this a bug?

/SAMUEL

2

Here are the read-only link: https://preview.webflow.com/preview/scroll-in-view-not-working?preview=6e5b610b6cd2b289a12ebf4c7771b912

3

Even this webflow videocourse project wont work on large screens:

https://preview.webflow.com/preview/parallax-movement-on-scroll?preview=12c1d0749077ddc42bd697298add0b4c

4

The scroll animations are percentage-based. A percentage of the viewport. If your browser is short (like on a laptop vs. a large monitor) the animation will look different. I took a look at your read-only link and if I make that top grey section taller (1000px instead of 500px) the effect is achieved. Right now you don’t have enough content at the top of the page to allow for a complete 0-100% movement.

6

I know, thats my problem. How to make it work even though the trigger item is near the top.
If it starts half way into the screen, one could think the animation would be at 50% but this is not the case