I’m looking for a way to achieve the following in Webflow:
Split a text element (usually Headings) into different spans for each word dynamically. In some cases I might need to split it letter by letter.
Create a custom animation like fade in, slide in or CSS-blur in.
Apply that animation dynamically on each “span” in my text element, with a delay to “reveal” the text word by word.
Ideally I could replicate this effect easily across pages and sections on the same project and control parameters like duration. A solution that won’t need premium libraries would be preferable.
Also, for solutions that I need to write custom code myself (highly likely) instead of copying, any additional tutorials or documentation would be greatly appreciated.
Greensock has some amazing tools and they’ve really helped me extend what I do on Webflow. I wasn’t aware of the SplitText animation, thanks for linking it.
Yes, Greensock popped up fairly quickly while I was researching this on my own. Their tools are definitely something I keep in my mind for future projects but not sure if it’s the best solution for my current requirements. Since the only feature I need right now is animated titles for sections on pages I was looking for a solution that’s a bit more price friendly and reusable on future projects.
I’m considering making my own mini-library for this. Probably using some JS & JQuery to split the text and trigger the animation. Even better If I manage to tie it to custom attributes.
Something along the lines of adding the following to a Heading element: attr-split-type=“word” or “letter”, and attr-animation-type=“fade-in” or “blur-in”. Bonus points if I add attributes that control details like duration, etc.