Animation: Balloons

by Josh Pullen

HTML

<script src="https://cdn.jsdelivr.net/gh/antimatter15/jsgif/LZWEncoder.js"></script>
<script src="https://cdn.jsdelivr.net/gh/antimatter15/jsgif/NeuQuant.js"></script>
<script src="https://cdn.jsdelivr.net/gh/antimatter15/jsgif/GIFEncoder.js"></script>
<script src="https://cdn.jsdelivr.net/gh/antimatter15/jsgif/b64.js"></script>
<img...

CSS

img:first-of-type {
  display: none;
}

canvas {
  border: 1px solid black;
}

JavaScript

// Settings
const duration = 30;
const frameOffset = 10;
const height = 1.05;

const image = document.querySelector("img");

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

document.body.appendChild(canvas);

canvas.width = image.width;
canvas.height = image.height * height;

const encoder = new GIFEncoder();
encoder.setRepeat(0);
encoder.setDelay(60);
encoder.setTransparent(parseInt("e3f5fa", 16));
encoder.start();

for (let frame = 0; frame < duration; frame++) {
  ctx.fillStyle = "#e3f5fa";
	ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  const angle = ((frame + frameOffset) / duration) * 2 * Math.PI;
	ctx.drawImage(image, 0, image.height * (height - 1) * (Math.sin(angle) + 1) / 2);
  
  encoder.addFrame(ctx);
}

encoder.finish();
const binary_gif = encoder.stream().getData();
const data_url = `data:image/gif;base64,${encode64(binary_gif)}`;

const outputImg = document.createElement("img");
outputImg.src = data_url;
document.body.appendChild(outputImg);