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


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

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…

Many thanks in advance!


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.

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


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:

Hi @garymichael1313 & @Garima_Sharma

I am also looking for this effect on my website! Can you share the tip with me please? You would help me a lot :pray:

Thanks in advance.

Please include a read-only link to your Webflow site for the fastest help (community members won’t be able to help without it).

This panel will only appear for your first 25 posts.
Did you get this working? If not I can help.