Hi all,
is there a way of masking the text as it appears while you’re scrolling, something like this.
Thanks
Just a quick example here.
- Use the default animations in Blocs (Fade In - Up).
- Place the animated text within a div container and apply a class to this container with the overflow set to hidden.
This is the result, which could be further tweaked.
Here is the example project to take a look at.
Text Animation Example.bloc (858.0 KB)
3 Likes
This is a cool website!
Nice 
something new to learn
Hi @Norm thanks for this, it’s not quite as slick as this, and can only do lines, not words, is there anything else you can think of to achieve something nearer please? Cheers
Here’s another nice example:
If you inspect this website you will see each word is placed within a div and then animated individually. This is also possible In Blocs using Classes, div containers etc.
However, there is a big catch. I’d be surprised if the creator of the website was doing this manually in Webflow. It’s very likely done with additional JS that is run at the startup and wraps each word into a div and then adds inline animation.
Hey @Stubbsy we just launched a custom Bric (Fancy Text) to achieve this animated word effect quick and easy within Blocs, you can read more here.