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.
I suggest that you take a look at SplitText from Greensock. It’s is pretty much the standard animation tool for text tweening on the web. SplitText Text Animation - Products - GreenSock
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.
Hello Jeff, thanks for the reply.
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.
What are your thoughts on this approach?