Text scaling animation 1 side only

hi guys,

I’m new here and I’ve been learning about animations and I saw this cool animation: https://jonvieira.com.

How can I make the text scale from one side only? And how to make these cool hover over effects?

Many thanks!

Kind regards,

Veerle


Here is my public share link: LINK
(how to access public share link)

Hay,

Do you mean the loading animation?

Hi,

No I mean the text scroll animation of the white titles (Facebook reality labs, automative…etc). Especially on desktop, there is a scaling scroll animation there which I love

Hey @Veerle_van_Hooijdonk , since this is a lot to fit into a simple reply, I’m working on a tutorial for you, stay tuned!

1 Like

Many thanks for helping Radka, that is amazing!

@Veerle_van_Hooijdonk I’m happy to share a full tutorial with you. Don’t hesitate to ask if you have any more questions!
Read only

1 Like

It worked, thanks a million for this tutorial!

I have 1 follow up question:
When scrolling down, the headings on the jonvieira.com website seem to disappear right before they touch the top of the screen. How can I apply this effect?

There are probably more ways to achieve this effect, but this is the first one that came to my mind: Create a ‘hider’ with the same background color as the section has, and stick it to the top of the section.

-create a new div block inside the blue section, it must be the first child of the section
-give it a class, set it to position sticky, 0 from the top, and z index at least 1 (or higher than the container)
-set its width to 100%, height to whatever you like (mine’s 130px)
-set background color to linear gradient, first color should be the same as background color of the section. Second color should be the same, but with opacity 0%

I updated the read-only so you can find everything here: https://preview.webflow.com/preview/how-to-webflow-ff7627?utm_medium=preview_link&utm_source=designer&utm_content=how-to-webflow-ff7627&preview=cc32dfdb85d021c7538ce6e70de7f8cf&pageId=61f7c78de9db8a307d435067&workflow=preview
Live example: https://how-to-webflow-ff7627.webflow.io/text-scaling

Thanks Radka, here is what i’ve build so far: https://www.veerlevanhooijdonk.com/. (not finished yet, but I am already so happy with this animation!)

There is one final thing: it looks like when I scroll the page of https://jonvieira.com/, that there is a bit of delay in the movement, and when I stop scrolling with my mouse, it looks likes the movement does not immediately stop, but after a slight delay. Is that something we can build in Webflow as well?

Have a wonderful day!

Happy to Help Veerle! Yes you can do that very easily - just set smoothing in animation settings


0% means it is instantaneous, 100% has the biggest delay. So play around with this number until you find something you like!