Using splitting.js in Hype

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. (96,4 KB)

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: (you can also just replace it with linear in the example)


Pretty cool.
I think I created a script that split text into spans on the forum a while back to make each word clickable.
Actually each line

Looks like this library goes way beyond that and would have save some time..

CleanShot 2021-03-18 at 20.08.03

Another simple example… the CSS stylesheet approach is a bit more refined, but it also could be done easily with something like anime.js

Download: (39,0 KB)

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.