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.
- Kinetic Typography Quickstart Tutorial by Cocombee Studio — A comprehensive tutorial using Adobe After Effects with downloadable lesson material.
- Kinetic Typography Advanced Tutorial by Jesse Rosten — An advanced tutorial on Kinetic Typography using Adobe After Effects.
One of the most practical ways to apply kinetic typography to presentations and simpler exports. This would not be recommended for actual production web applications.
- 4 Part Tutorial on PowerPoint Kinetic Typography by PowerPoint School — In this PowerPoint animation tutorial, you will learn how to make kinetic typography animation in PowerPoint.
- 3 Part Tutorial on Masking and Motion Graphics in PowerPoint by Abhinav Rawal — Creative application of masking, layering, and advanced kinetic typography using PowerPoint
For Apple users, you can also create kinetic typography in keynote. Though, if you have PowerPoint, then you may prefer it due to being more widely adopted and available on both PC/Mac.
- How to Use Kinetic Typography Animations in Keynote by Andrew Childress — A 60 second tutorial for kinetic typography in Keynote
CSS Animation Libraries
If you like to play with CSS and some simple JS frameworks, then these libraries can be helpful:
- Animate.css — very simple, lightweight css transitions with sandbox area
- AniJS — a library to apply typographic animations without coding
Alternative Desktop Software
- Apple Final Cut Pro (Motion) — A powerful motion graphics tool that makes it easy to create cinematic 2D, 3D, and 360° titles, fluid transitions, and realistic effects in real time (Mac only). You can check out this Typography Tutorial for Final Cut Pro X.
- 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.
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.