Emoji Animator for Product Hunt (by @levelsio)

Use GIPHY CAPTURE (https://giphy.com/apps/giphycapture) to screencap this and make it into a GIF. You can then use it for your Product Hunt launch as a GIF to get extra attention! (by @levelsio, made for @sarah__jackson) https://twitter.com/levelsio

HTML

<script src="//cdn.rawgit.com/antimatter15/jsgif/master/Demos/b64.js"></script>
<script src="//cdn.rawgit.com/antimatter15/jsgif/master/LZWEncoder.js"></script>
<script src="//cdn.rawgit.com/antimatter15/jsgif/master/NeuQuant.js"></script>
<script src="//cdn.rawgit.com/antimatter15/jsgif/master/GIFEncoder.js"></script>
<div id="emoji" style="font-size:125px;line-height:125px;"></div>
<canvas width="125" height="125" id="canvas" style="display: none;"></canvas>
<img width="125" height="125" id="gif">

JavaScript

var delayInSeconds=0.5;
 var emojis=['🙈','🙉','🙊','🐵'];
 
var encoder = new GIFEncoder();
encoder.setRepeat(0);
encoder.setDelay(delayInSeconds * 10);
encoder.start();
 
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "rgb(255,255,255)";  
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = '125px Segoe UI Emoji';

for(var emoji in emojis) {
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.fillText(emojis[emoji], 0, 120);
	encoder.addFrame(ctx);
}

encoder.finish();
document.querySelector('#gif').src = 'data:image/gif;base64,' + encode64(encoder.stream().getData())