Animating text by letter, word, or line?

[mustardseed]

I'm creating some new animations for a project at work. They currently are using VelocityJS and BlastJS to animate DOM text. This method allows me to animate custom text based on a per-letter, word, or line basis. This GIF below shows what exactly I'm talking about.

 

I want to figure out how to do this level of text animation within Phaser (or Pixi).  I'd like the text to be contained and rendered within the canvas for lots of reasons: performance, WebGL filters, rendering to video with CCapture.js, saving screenshots, and better scaling across browsers.

 

I worked out how to do per-letter animations, but per line and word are wrinkling my brain. Any helps or tips would be greatly appreciated. Thanks!

 

[MichaelD]

var words = String("This is a nice sentence").split(" ");for(var i=0;i<words.length;i++) {   game.add.bitmapText(0,0,'font',words[i],20);}

This will create bitmaptext from a sentence. Same way you can split at (".") for sentences.

[mustardseed]

Brilliant. Thanks!