I saw this effect on the frontpage of wolt.com and wanted to recreate it myself. It’s comprised of two different main functions, one that splits the given text into words and letter by wrapping them with span tags and one that then animates those in staggered.
There are two stagger delays at play, each word starts animating it’s letters staggered, and the letters within the word are also staggered. The animation flows nicely this way, instead of just the letter being staggered by themselves.
Before using
I haven’t used this technique in production yet, but you should be able to provide any element contain text to it. Note that existing nodes inside that node might cause some issues with this, I haven’t tested that.