Streaming live at 10am (PST)

Typography animation

Hi, is it possible to do this in Webflow where each word raise from the ground with a mask?

I could do in After Effects then export with Bodymovin plugin, but wondering if there is a native solution in Webflow.


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

Not the best way to achieve the goal - but at least Native :webflow_heart:

https://preview.webflow.com/preview/thankyouverymask?utm_medium=preview_link&utm_source=dashboard&utm_content=thankyouverymask&preview=69509e50363753b5b8f4174df4587dc0&mode=preview

1 Like

You could probably get something reasonably close in Webflow using IX, but the splittext plug-in from gsap is probably the way to go for this type of work.

Looks like a great solution, but I’m using Webflow because I don’t know how to code.

Thanks for helping I’ll try to see if there is more I can do using your idea.

@rafdesign fair enough, @shokoaviv said you can do something similar, but managing text animations can be time consuming and challenging depending on what effect you are trying to achieve. Usually having a “mask” div that is positioned over the text and then moves to reveal the text behind it is a good way to go that isn’t too difficult depending on how much text you are trying to animate.

For this part of the animation

You could have the entire container of that text block moving up into place while the mask div is moving down simultaneously inside of that container, however, this will become difficult to manage as the text breaks onto different lines on mobile devices.

EDIT: @shokoaviv’s example is pretty much what I’m describing and is probably the way to go, just keep in mind the text breaking on mobile.