Logo scaling animation timed equally in pages of different heights

Hello,
I want to create the known animation of the top logo scaling down when scrolling starts and scaling back up when scrolling back up.
Note that the pages in my website have different heights and 3 different layouts.
I tried with page trigger > while page is scrolling which would be perfect but because pages have different heights, with this method the animation occurs at a different speed in any page, which I don’t want.
Another way could be page trigger > page scrolled but again animation reacts different on the basis of different heights.
I thought about creating an empty div and use it with the element trigger > scroll into view method but I don’t like the idea of empty div for obvious reasons.
Any suggestion for a clean solution?
Thank you.

https://preview.webflow.com/preview/retablo-feudi-castellazzo?utm_medium=preview_link&utm_source=dashboard&utm_content=retablo-feudi-castellazzo&preview=920cc9e979ba3f4fc03f5ef0e7f40301&mode=preview