Jump to content

Help with Pixi.js or Phaser Text Animation System - Javascript/HTML5 Canvas

Recommended Posts

I'm wanting a simple way to animate blocks of text in Pixi.js or Phaser. I want to be able to animate the text either: letter-by-letter, word-by-word, or line-by-line. I also need to be able to align the text to the left, middle, or right.

I currently use DOM text and use Blast.js and Velocity.js to animate text like you see in this GIF, but I want this same capability in Pixi or Phaser. I can use Blast.js to get the word or characters into an array, but I'm having trouble animating the resulting text with proper formatting.

Here's my code for that:

$("#svgtext").blast({ delimiter: "character" });

var characters = $('.blast').map(function(index, element){

return $(element).text();


Here's a video of DOM text animations I have created, and the types of text animations I want to easily be able to do in Pixi or Phaser. Thanks!

Video: https://drive.google.com/file/d/0B_keHsApNkfLTVY0ZXNGeTNHclE

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...