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!
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
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!
