Forcing a sticky header to resize elegantly on scroll

Hello! I am working on a website for a friend but am having trouble making a design element come to life. It’s something I know how to do on a normal page, but on wordpress I’m not sure how to make it work. I would like the sticky header at the top of the page to resize smaller when scrolling down on the page, like this: https://callmenick.com/_development/resize-header-on-scroll/

I’ve managed to get it to kind of work, but without any kind of animation (it just jumps from big to small and looks terrible). Does anyone have any advice on how to accomplish this? I did find a few other people who asked kind of the same question, but reading those threads didn’t help.

Thank you!