Kinetic typography is an animation technique that uses moving text to capture attention, set a tone, and entertain. It seems to be everywhere right now—commercials, music videos, mobile apps, and websites use it to make their words more impactful and add an element of artistry.
But in no way is moving type having just a moment. It’s been around since the 1960s, when feature films started using animated opening titles instead of static text, and it’s not going anywhere any time soon. Alfred Hitchcock’s North by Northwest (1959) is credited as the first feature film to extensively use kinetic typography. Watch the two-minute opening title sequence:
And now, our featured presentation: For your inspiration we’ve gathered our favorite examples of kinetic typography found on Dribbble. Grab some popcorn and start scrolling.
Hypnotism vibes. Mesmerizing work by Cecilia Erlich.
InVision designer Connor Murphy used Grimes and Odesza as inspiration for this UI animation, made with Studio.
Kinetic Aesthetic 2.2, a concept piece by Feint that we feel compelled to stare at for hours.
Indecisiveness—animated. Love the liquid element Alena Hovorkova used as an interesting way for the words to transition from black to white and back again.
Super smooth motion wordplay for a branding project for a co-working space in Frankfurt, Germany. By atanas giew at FourPlus Studio.
To experiment with animation, designer Irma Hasanic played with the Mobil logo. Says Irma: “I wanted to focus on its gas station chain through the use of a fuel gauge. It appears as empty at first and as it starts to fill up with a red bar, it quickly transforms into the iconic red ‘o’ of the logo.” Clever!
A stunning animated logotype by Sander van Dijk that incorporates geometric shapes and lots of vibrant colors.
Related: The 8 most important UI animations of all time
If you’re looking for loading animation inspiration, here’s a solid example from RVIZ. This is an early exploration for Nike’s SNKRS app.
Rick Shaffer painted this as a mural in Workday’s San Francisco office and was kind enough to create an animated version of the design for the rest of us. (Check out the process video!)
Did we forget to include your favorite kinetic typography Dribbble shot here? Share it with us on Twitter so we can add it in: @InVisionApp.
