I am looking to create an effect sort of like the one featured at this website in Webflow.
I want a full size logo at first, but when scrolling I want the logo to shrink to a smaller, more social-mediaesque type of one.
I understand every thing about the navbar, except how to change an image,
Any guidance?
Here is my public share link: LINK
(how to access public share link)
You can achieve that using Scroll into view interaction. The trick is to apply it on a different section other than your navbar. Because if you navbar is in fixed position we cannot detect scroll position with it.
So we have to apply interaction to another section. And depending on the position of that section we can trigger animation to be applied on your navbar.
Suppose you’ve a Hero Section below your navbar, apply Scroll into view interaction on it. Now create animation for Scrolled out of view, this means when you scroll past the Hero Section changes will appear on the navbar.
And for Scrolled into view reset everything to make it normal. That means when you scroll back to Hero Section your navbar will change to normal.
I hope this makes it clear.
And this “make logo change” option you can change it into another image (ie, the smaller one?)
And yes, this all makes a lot of sense with the triggering on other sections. Very helpful, thank you! 
To change the logo size you just have to animate width/height in the actions.
If you want to have image change effect, place 2 logos and keep small one hidden and when animating hide bigger one and show smaller one. Do this with animating width/height so your changes will look smooth.
To do like your example, place 2 separate logos and while animating to small size, hide the bigger logo.
