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.

For those that do know how to code, but are very new to Webflow (a few days in), where would we put this custom javascript to be able to edit the text?

Or would you have to run the completed written copy through the splittext script, then copy/paste all the divs and letters into Webflow somehow?

Have any other solutions popped up since this thread in 2019? @sam-g @shokoaviv

Thanks!!

you can add your code on the page settings @claramorgan
Screen Shot 2022-05-17 at 7.43.25 PM

Found it thanks!

Also found this pretty sweet extension called finsweet that enables all sorts of extended functionality.