Animation Boundaries of Interaction don't work properly


I’m currently building a navigation bar that resizes while scrolling. To have more control over how and when the resizing happens, I added an interaction trigger which has the same size as my navigation bar. Once this trigger starts to scroll out of the viewport the navigation bar should start to change its height:

  • If the trigger is fully visible, the navigation bar should be 260px in height
  • Once scrolling starts, the navigation bar should become continuously smaller until it reaches a height of 80px as soon as the trigger has fully left the viewport.
  • The interaction is set to: 0% when element is fully visible and 100% when element is fully invisible (no offsets are set)

It should be an easy thing to do, but what’s strange about it is the fact that my navigation bar is at ~50% height right after page load. If I live-preview the interaction in the Designer I can see that my keyframes immediately jump to between 70% and 80% (depending on the height of the viewport) after I start scrolling the page only for a tiny bit.

To be able to rule out any other interfering interactions, I recreated the navigation bar in a new project. The trigger element is red for testing purposes – maybe you’ve got an idea what I’m doing wrong here.

Here’s the public link to my test project:

Thank you!