Harnessing motion design, storytelling, and text to convey complex ideas and augment user engagement
Basics — Motion vs. Fluid Typography, Transitivity Theory
Patterns — For Inspiring Your Creativity
Principles — For Designing Kinetic Compositions
Getting Started — For Designers
Getting Started — For Developers
Kinetic typography is the art of moving type. It is the application of motion design to tell stories and evoke emotion through typographic visuals. It is a form of temporal typography (letters/words that are presented over time) that is distinct from serial presentation (the sequential presentation of static typographical elements).
There are two main genres of kinetic typography:
Motion Typography — typographic elements move relative to one another within a 2d or 3d plane, but do not necessarily transform into new elements. Words and individual characters enter, exit, grow, shrink, and move around the screen in a way that maintains readability.
Fluid Typography — the transformation of typographic elements into non-typographic forms. Words and characters can transform into shapes and other words, not just change their position or relative attributes on a page.
Underlying these two genres is transitivity theory— the systemic functional approach to understanding how humans infer meaning and connection from transitions in an object’s state. It studies how we can make meaning more explicit through the application of movement and fluidity.
Create / Destroy — Typographical elements can be created using an aggregation of shapes/patterns that transform into the typographical elements. Likewise, this elements can be deconstructed, dissolved, and destroyed.
Enter / Exit — Typography can be introduced into the view through a transition, either appearing out of the background or sliding in from outside the container. The order of appearance progressively guides the user through the sentence (if it is a combination of words).
Morphing — Lettering can morph into non-typographical elements. This can be used in a metaphorical sense or to transition between words and graphical elements. Morphing goes beyond just color or positional changes by focusing on structural changes to the elements, themselves.
Inventive Metaphors — individual characters can take on real-world characteristics. For instance, the serifs on certain fonts can become feet that walk.
Arc / Path Motion— movement along arcs or abstract lines as text moves along linear or curved paths.
Storytelling — using motion to tell a story or complement a narrative (ex. lyric videos). This is rare in products, but can be found on some product marketing sites that use scrolling or interactivity to trigger motion.
Signaling Motion — subtle movement that signals a larger movement. This is effective at drawing the user’s eye to the inception point for an animation.
Here are some guiding principles to take into consideration when designing kinetic typographic compositions:
Maintain Relativity — The individual typographic elements move relative to each other. This relativism is very distinct from traditional motion design where you don’t need to maintain a linear ordering.
Optimize for Readability — The ease with which a reader can accurately consume digital text. In natural language, the readability of text depends on its content (the complexity of its vocabulary and syntax) and its presentation (such as typographic aspects like font size, line height, and line length).
Optimize Effect Duration — The duration of the effect should be enough to evoke the targeted emotion, understanding, or response from the user, but not more.
Manage Emotion — Effective motion and movement can evoke a myriad of emotions from your users. Make sure that you truly understand how your colors, transitions, and changes in physical state interplay with your audience’s emotional state.
Maintain Linearity — Humans still read in a linear fashion. The order with which letters and words appear or disappear should maintain that linearity.
Motion Sensitivity — We all love really slick, modern animations.. or do we? Motion sensitivity is becoming more concerning as animations become more complex and intrusive. I recommend this article on Designing Safe Animations.
Optimize for Accessibility — Be cognizant of those with screen-readers, color sensitivity, and other impediments. Use kinetic typography as a way to emphasize elements, but not in a way that distracts from the core usability of your product.
Bandwidth Constraints — Users do not want to sit and wait for an animation to load or to read a sentence in 20 seconds instead of 3. Make sure you take into account bandwidth constraints, both technical bandwidth (internet) and personal bandwidth (attention).
Fallback States — If the animation fails to load or if you identify a timeout issue, then it is best practice to have a static fallback state.
Getting Started — For Designers
Adobe After Effects
One of the industry-leading tools for creating complex kinetic typography used by industry professionals. Typically requires a higher learning curve than other software, but has a robust community and lots of support.
Tumult Hype — Create beautiful HTML5 web content. Interactive web content and animations made with Tumult Hype work on desktops, smartphones and iPads. No coding required.
Just a note: I am not including UX prototyping tools like Principle or Framer, which you can still use for kinetic typography — though these are typically more reserved for broader IxD prototypes.
Getting Started — For Web Developers
GSAP — Professional-grade HTML5/JS animation for modern web frameworks, specifically optimized for cross-browser compatibility.
textillate.js — A simple plugin for CSS3 text animations. You can apply CSS animations to any text (try the demo on their site).
React Reveal Text — A small react library for animating the revealing of text in React.
React Spring — One of the industry standards for building animations in React apps. Very easy to integrate and typically lightweight if used appropriately.
Airbnb Lottie — Airbnb’s open source animation library for iOS, Android, and React Native that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets.
Velocity.js — Velocity is an animation engine with the same API as jQuery’s $.animate(). It works with and without jQuery. It’s incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.
Thank you so much for taking the time to read this article :). I frequently write on a myriad of design and tech topics, so feel free to follow for more.