The demo surprises me because of the blank space between the two headers, so that if you’re scrolling, the first one slides away, and then shortly afterwards the second one slides in. That makes for a lot of movement on screen, and movement is distracting, which is almost always a bad thing in design.

The behaviour if you instantaneously scroll from the top to the bottom (`scrollTo({top:scrollMaxY})` and `scrollTo({top:0})`; to toggle between the two every two seconds, `x=1;setInterval(()=>scrollTo({top:(x=!x)?0:scrollMaxY}),2000)`), where it transitions from one header to the other, is much more what I would expect from something like this. (If you scroll any less than instantaneously, you get a glitch in the animation as it briefly starts hiding one before deciding that no, it should actually just transition to the other.)

If the headers are continuous, and you’re transitioning between them, this sort of thing makes sense, but headers sliding in and out is… risky, at best. I’d strongly recommend against it. I haven’t thought too deeply about this way of expressing it, but I think animations or transitions should almost always go with the grain, that is, in the direction the user is panning. Going against the grain (in which I include the most common examples, 90° and 180°) is distracting. For some personal background so you can see potential biases I may have (though I make this whole comment in good-faith belief about fundamental principles of usability and accessibility), I heartily dislike pages that have content slide in you scroll and they enter the viewport, yet that’s a very common technique on front pages of websites. I find it both distracts and slows me down. Fortunately by disabling JavaScript by default I don’t see many such things ever.