ScrollTrigger reposition and resize logo on scroll

[fuzzybugs]

I am struggling to get this effect to work. There is a hero image with parallax that is working. But the logo, which starts full size and fixed to the bottom of the hero container (with a slight overlap of about 75px at the bottom), needs to resize  smaller to fit in the sticky header at the top. This should scrub with the scrollbar and be sticky at the top shortly before the hero is fully scrolled past. I've spent days trying to get this to work, and I can't find any examples anywhere that have helped me get to the bottom of the issue. Any help would be greatly appreciated!

See the Pen eYoMabm by fuzzybugs (@fuzzybugs) on CodePen

[Rodrigo]

Hi,

 

I don't have time to update your demo now, but you should look into the Flip Plugin:

 

https://gsap.com/docs/v3/Plugins/Flip/

 

This demo uses Flip and ScrollTrigger scrub and is fully responsive, it should provide a solid starting point:

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

 

Hopefully this helps.

Happy Tweening!

[fuzzybugs]

Thank you! I have implemented Flip and now it's finally almost perfect! For some reason, when I scroll back up, the logo doesn't reposition in the correct spot. Trying to troubleshoot that now.