index.html

   <h2>ASCII Animation Editor/Viewer</h2>
   <table style="margin-left:auto;margin-right:auto">
     <tr><td style="text-align:center">
         Enter the frames below, separated by "<code>=====</code>".</td>
         <td style="text-align:center">
         <input type="button" value="Play the Animation" onclick="PlayAnimation();"> 
     </tr>
     <tr><td><textarea id="frameArea" rows=25 cols=55 style="font-size:8pt">
  o  
 /#\ 
 _|_ 
=====
 \o/ 
  #  
_/ \_         </textarea></td>
         <td><textarea id="displayArea" rows=25 cols=55 style="font-size:8pt">
             </textarea></td>
     </tr>
   </table>
 

mJORNO.markdown

mJORNO ('-' * 6)

A Pen by Captain Anonymous on CodePen.

License.

script.js

 function PlayAnimation() 
     // Assumes: frameArea contains the text of an ASCII animation
     // Results: displays each frame of the animation in succession (0.25 sec. apart)
     {
       var frameStr;
       
       frameStr = document.getElementById('frameArea').value;
       if (frameStr.indexOf('\r\n') != -1) {        	// SOME BROWSERS/PLATFORMS
	     frameSeq = frameStr.split('=====\r\n');		// USE \r\n FOR LINE ENDINGS,
       }												// OTHERS USE \n
       else {											// SPLIT INTO FRAMES AND
	     frameSeq = frameStr.split('=====\n');			// STORE IN A GLOBAL ARRAY
       }

       currentFrame = 0;								// STORE THE CURRENT FRAME #
       setInterval('ShowNextFrame()', 750);
     }
  
     function ShowNextFrame() 
     // Assumes: frameSeq is the (global) array of animation frames, and
     //          currentFrame is the (global) index of the current frame
     // Results: displays the current frame in displayArea & increments the index
     {
       document.getElementById('displayArea').value = frameSeq[currentFrame];
       currentFrame = (currentFrame + 1) % frameSeq.length;
     }