Context

Text is the basis of web content and design yet only in recent years has its potential as an interactive element been realized. You've probably noticed an Awwwards candidate or Codrops tutorial demonstrating the very effect I'm describing. The execution of these types of interactions clearly exists, however the application is more often than not messy and unintuitive.

Awwwards site example

Codrops demo example

Methodology

Let's start with an empathetic approach. One truth to splitting text is that a majority of the process involves creating an inline HTML element for each character, an egregious task without the help of javascript. All text splitters do this —otherwise, they wouldn't be known as such. What isn't handled as often is the consideration for the types of interactions library users are hoping to create, which leads to simple javascript and complex HTML rigging. My thought when creating splt.js was to keep the ease of use on the HTML side and let javascript handle the setup. Selecting a group of specific characters or handling a reveal effect shouldn't add additional steps to writing your HTML or javascript, it should just plain work.

Outcome

When all is said and done, splt.js entered the world as a fully independent library at just over 560B minzipped. It's built with ease of use and simplicity in mind, and comes from a designer who has been looking for a low barrier for entry text splitting library that can easily handle the types of animations we see on well-designed sites.

Inspiration

This project started off like most, something didn't work right and someone told me "if you don't like it, build something that works". I brushed off that notion for two years while I subjected myself to working with text splitting libraries that caused issues left and right, then I became fed up enough to take on the task myself. I ran into some of the same issues other creators have had with their own text splitting libraries when building splt, which led to a deeper appreciation for the concept as a whole. However, there were also times where I found certain features extremely simple to implement that made me question why I hadn't seen them elsewhere.

Roadmap

Splt is by no means a complete package. I've already dreamt up a few features I want to add to later releases. One that comes to mind is adapting the library to work with frameworks, a natural next step in its lifecycle. I'd love to hear if there are any features people want to see added as well, this is after-all a library for the people.

Closing Thoughts

Give splt.js a try, it's got a fun new documentation site or if you don't feel like putting in that kind of effort, just try it out here on Codepen.