While scrolling in/out view (continuous) - slow at getting back to 0% keyframe & unreliable

Our animation is that when the orangey-red section continues to scroll into view, the project slides from the previous section would gradually shrink. The opposite happens when user scrolls the orangey-red section out of view. We are using “while scrolling in view” with the ‘about section’ as the trigger.

In designer preview, things work quite well. But on the published site, the project slides shrink and enlarge at different speed, even when we try to keep the scrolling pace consistent when we scroll up and down within the key frames. Sometimes, the project slides don’t even enlarge back to default size until we pause scrolling (even though we are using ‘while scrolling into view’).

We tried to get the same animation result using ‘scroll into view’. But that didn’t work because the project slides would shrink and enlarge once triggered, and wouldn’t stop animating if the user stops scrolling.

Would anyone have any solution on how we can keep the project slides shrink and enlarge around the same speed please? Or perhaps other, better ways that can create the same animation?

Thanks so much in advance as always!

Our read-only is here.

To test out our current “while scrolling into view” animation on the published site, you can try it here.