fix: header scroll looping and firefox slow animation

[Xaroz]

Scroll loop fix

Fixed an issue where on some specific threshold it would cause the header to loop the scaling animation because of the height changes. Move timeoutId so the variable is not re-created everytime and added a missing logic that would prevent proper debouncing

Caveat: If the scroll is extremely fast it might cause the header to be stuck on a certain threshold until a new scroll happens

Firefox animation fix

Fixed an issue with Firefox choppy and slow animation, basically some browsers struggle with animation because of the way they render a page, so the "trick" is to make the browser go into hardware acceleration mode by adding a slight rotation and this way the animations will run smoother

On Firefox if you pay really close attention there's still a bit of a delay/blurriness that is almost not noticeable when the animation finishes

[vercel]

@Xaroz is attempting to deploy a commit to the Abacus Works Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
hyperlane-explorer	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 21, 2024 4:42pm

[jmrossy]

Thanks for fixing this. It does seem to work but your debounce function is a bit sloppy and I don't think you're handling your callback memoization correctly yet. Please have a closer look.