Are there any web apps offer the ability to author Kinetic Typography presentations (panning, rotating, zooming text animations).

zoomy text thing

Here's an example of what I want to achieve using the web (contains a few swear words):

NSFW: youtube.com/watch?v=Asvtgj6wANw

I had a look at Prezi however it doens't support displaying text with time, everything has to be rendered before.

I am aware you can use post-effects video editors like After Effects however I was wondering if there is a simple web application that can achieve this?

  • It seriously doesn't look like there is anything web based. I ended up using Flash to make one (since I didn't have AE) vimeo.com/22832508. Question is still open if anyone does find something :)
    – Jay Wick
    May 1 '11 at 6:34
  • Nice video, jay! You may be the wrong person to ask, but do you think coding this in flash was easier, more difficult, more time-consuming that using After Effects might be? I'm guessing growing the "amazing just the way you are" tree took some time... Jun 14 '11 at 23:41
  • @charles: having seen the AE tutorials, I'd say go with AE. Flash is horrible for this kind of stuff. Not all my effects were transferred over, converting to video format was a nightmare, and the entire ordeal heavily time consuming. In summary DO NOT use Flash. My next vid is going to be AE (when I have the time)
    – Jay Wick
    Jun 17 '11 at 5:10

In a nutshell, No.

Time based text transformation is a processor hungry task. (Just ask anyone how much time does AE take to 'render' their videos and you'll know what I mean.)

Though I'm making an HTML5 based Javascript based Kinetic Typography. If I find it easy enough, it can be made into an app to allow basic transformations.

June 2018 Update:
Browsers have improved. CSS3 and HTML5 are now prevalent in Firefox and Chrome, and available even in Safari and Edge (laggards).

This experiment shows a neat use with CSS animations (with minimal JS). And you can even fork the code on Github and make your own! (If you find a more elaborate Web-based Kinetic Type experience than this, do comment and let me know!)

For something simpler, take a look at this codepen.

And I highly recommend reading up and learning the animations. This germane tutorial shows how to get started: Make a kinetic typography video with CSS.

  • Seven years later... Did you find it easy enough? Any chances for a publication?
    – trejder
    Jun 17 '18 at 19:49
  • updated :) Thanks @trejder Jun 19 '18 at 10:10
  • Thanks for response and update, however, it seems you have focused on providing CSS/HTML based solutions while OP's question was for a tool that allows you to produce actual presentations (downloadable) or videos (also downloadable). But, since the question is now off-topic, I don't think we want to work over it anymore! :>
    – trejder
    Jun 21 '18 at 8:14

Yes, there is. Check this link: http://ddeubel.edublogs.org/2013/06/17/kinetic-typography-generator/

  • It is worth mentioning that the tool, you're talking about, needs Flash. It wasn't a problem back in 2013, it is a problem now, five years later, when Flash is no longer wanted by most.
    – trejder
    Jun 17 '18 at 19:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.