Scroll Animation: Text to shrink and move when scrolled in and move back to position when scrolled out

Hello,

I am wanting to achieve a similar effect to this where the screens scroll and the hero heading becomes the logo in the navbar, and when scrolled back to the top it again becomes the while the heading. Below is the link
https://the-live-dept.com/?ref=maxibestof.one

I don’t know how to create this I’ve tried using move and scale in when scrolling into animation, but not able to achieve that if you could point me towards a tutorial or a cloneable site, that’d be awesome, and this is what am able to achieve so far… https://preview.webflow.com/preview/garimas-trendy-site?utm_medium=preview_link&utm_source=designer&utm_content=garimas-trendy-site&preview=3e8e5b1868ac670ac00610a14c81ecb9&workflow=preview

Many thanks in advance!

@Garima_Sharma,

Did you get this working? If not I can help.

Hi, yes please help me out.

Oh I see it on the “Work” page. Yeah let me see the best way to do it… something like this:

Yes exactly like this :star_struck:, how you did do this please let me know

Hey, did I answer you? I got busy and can’t find my brain from last week :slight_smile:
Sorry, if I didn’t.

Hey,
No actually, I was wondering how did you animated it? If you could explain me the steps exactly that would be a great help.

Thanks

Sure, I’ll send you a message with steps. Do you want a video walkthrough or text step by step?

Video walk-through would be the best, If it is not too much to ask :sweat_smile: