Animate chars using splitting.js … The animation in the example is done with CSS injected by JavaScript but could also be done with a library like anime.js … as my goal was to keep it as simple but still bound to a trigger and not dependent on CSS in head HTML, this the approach I used. Hence, there are some hints on CSS animation with JS in there too.
This example just scratches the surface of animation with Splitting as it can do words, grids and much more complex stuff. Furthermore, If anybody is wondering what an cubic bezier animation is than just visit the following page to see how you can create your own and have a way to visualize it: https://cubic-bezier.com/ (you can also just replace it with linear in the example)
PS: There are some cases where different font-types don't split correctly. I assume this is because I am running minimal setup. There is also a splitting CSS file I am not loading in this example because for my test case I didn't need it. Checkout the homepage of splitting if you run into that issue.
