In this post I want to share thinking on ways to solve split text animations and interactions for the web that are minimal, accessible, and work across browsers. Try the demo.
If you prefer video, here's a YouTube version of this post:
Split text animations can be amazing. We'll be barely scratching the surface of animation potential in this post, but it does provide a foundation to build upon. The goal is to animate progressively. The text should be readable by default, with the animation built on top. Split text motion effects can get extravagant and potentially disruptive, so we will only manipulate HTML, or apply motion styles if the user is OK with motion.
Here's a general overview of the workflow and results:
- Prepare reduced motion conditional variables for CSS and JS.
- Orchestrate the conditionals and utilities on page load.
- Write CSS transitions and animations for letters and words (the rad part!).
Here's a preview of the conditional results we're going for: