Harnessing motion design, storytelling, and text to convey complex ideas and augment user engagement — Dribbble Ninglin Contents 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 Basics 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: — 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. Motion Typography Digital Synopsis — 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. Fluid Typography Digital Synopsis Underlying these two genres is — 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. transitivity theory Patterns — 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. Create / Destroy Creation — David Stanfield — 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). Enter / Exit Enter/Exit in PowerPoint — Skillshare Course — 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. Morphing Morphing by TAPE Morphing State Transition — Al Boardman — individual characters can take on real-world characteristics. For instance, the serifs on certain fonts can become feet that walk. Inventive Metaphors Inventive Metaphor — Hyemin Hailey Lee — movement along arcs or abstract lines as text moves along linear or curved paths. Arc / Path Motion dudenas — 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. Storytelling The Rolling Stones — Paint It, Black (Official Lyric Video) Storytelling — Web Ascender — subtle movement that signals a larger movement. This is effective at drawing the user’s eye to the inception point for an animation. Signaling Motion Signaling Motion — David Stanfield Principles Here are some guiding principles to take into consideration when designing kinetic typographic compositions: — 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. Maintain Relativity — 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 for Readability — The duration of the effect should be enough to evoke the targeted emotion, understanding, or response from the user, but not more. Optimize Effect Duration — 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. Manage Emotion — Humans still read in a linear fashion. The order with which letters and words appear or disappear should maintain that linearity. Maintain Linearity — 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 . Motion Sensitivity Designing Safe Animations — 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. Optimize for Accessibility — 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). Bandwidth Constraints — If the animation fails to load or if you identify a timeout issue, then it is best practice to have a static fallback state. Fallback States 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. by Cocombee Studio — A comprehensive tutorial using Adobe After Effects with downloadable lesson material. Kinetic Typography Quickstart Tutorial by Jesse Rosten — An advanced tutorial on Kinetic Typography using Adobe After Effects. Kinetic Typography Advanced Tutorial Microsoft PowerPoint 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. by PowerPoint School — In this PowerPoint animation tutorial, you will learn how to make kinetic typography animation in PowerPoint. 4 Part Tutorial on PowerPoint Kinetic Typography in PowerPoint by Abhinav Rawal — Creative application of masking, layering, and advanced kinetic typography using PowerPoint 3 Part Tutorial on Masking and Motion Graphics Apple Keynote 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. by Andrew Childress — A 60 second tutorial for kinetic typography in Keynote How to Use Kinetic Typography Animations in Keynote CSS Animation Libraries If you like to play with CSS and some simple JS frameworks, then these libraries can be helpful: — very simple, lightweight css transitions with sandbox area Animate.css — a library to apply typographic animations without coding AniJS Alternative Desktop Software — 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 . Apple Final Cut Pro (Motion) Typography Tutorial for Final Cut Pro X — Create beautiful HTML5 web content. Interactive web content and animations made with Tumult Hype work on desktops, smartphones and iPads. No coding required. Tumult Hype 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 There’s a wide array of JavaScript animation libraries on the market. Here are some of the most popular, lightweight JS libraries that are commonly used in production apps: — Professional-grade HTML5/JS animation for modern web frameworks, specifically optimized for cross-browser compatibility. GSAP GSAP Animation — CodeMyUI — A simple plugin for CSS3 text animations. You can apply CSS animations to any text (try the demo on their site). textillate.js — A series of simple animation libraries for delightful interfaces. Can work with Vue, React, React Native, or any JavaScript environment. Popmotion.io A small react library for animating the revealing of text in React. React Reveal Text — — One of the industry standards for building animations in React apps. Very easy to integrate and typically lightweight if used appropriately. React Spring React Spring — 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. Airbnb Lottie Airbnb Lottie — The Verge — Velocity is an animation engine with the same API as jQuery’s . 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. Velocity.js $.animate() Velocity.js — CodeMyUi 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. Happy designing! -Justin

Adobe

AirBnB

Apple

Microsoft

Velocity

YouTube

Too Long; Didn't Read

Get hands-on learning from ML experts on Coursera 

Kinetic Typography UX — Principles, Patterns, and Getting Started

Too Long; Didn't Read

Companies Mentioned

@justindesign

RELATED STORIES