I wanted to make this animation based on a handkerchief I saw in a shop window.

I recreated the basic shapes in Sketch, a vector drawing tool. At first, I thought I'd do this in the stop-animation style: draw each frame and join the frame pngs into a gif.

You know what's easier? Build one image and film yourself nudging it across the screen.

There are a lot of tools that take a video file and output a gif. From what I've read and proved with my own experiments, gifs are actually larger than video files. A gif is an image file format. But a lot of websites where you might want to post your animation don't support video upload, only image upload. I've heard this is because there are security concerns but I haven't investigated.

This only took me 2 hours, start to finish. I'd like to try it again in the future. It would be nice if the boat could go at an angle to the water lines. And to create the little wave that boats push out in front of them. Or to generate this all programmatically. Next time! :)