Shrink Logo From Hero to Nav

[JE551]

Hi, 

Complete newbie here, please forgive me if I'm not explaining this correctly ]= 

I'm hoping to shrink the logo in the hero section to fit the logo size in the header (almost appearing as if the logo in the hero is shrinking as you scroll and getting fixed to the top left section of the header).

At the top of the page the header should be transparent but as a user passes the hero section I'm hoping to change it to have a background of white and swap to a coloured logo.

I'm having a tough time trying to figure out how to make the logo stick to the header since the logo in the hero section is relative to it's parent container and figuring out how and when to switch the header to show a white background with the coloured logo rather than the original logo from the hero section. 

Any help would be appreciated 🙏 

 

See the Pen BaYJPvz by JE551 (@JE551) on CodePen

[Cassie]

Hey there!

 

This demo, and more specifically the FLIP plugin should give you what you need to get this working.

See the Pen zYEqYZJ by GreenSock (@GreenSock) on CodePen

 

[JE551]

Thank you so much!

Wow I had no idea this existed, really helpful ❤️