I recently made this follower animation for my personal channel.  It involves a mixture of traditional animated GIFs as well as HTML, CSS, and JS.  I’ve done similar things like this alert, but none that were able to bring JavaScript into the mix.

I started by framing out the animation as a whole in Photoshop.  From there I created multiple animated GIFs of the various parts (Link running, Aghanim charing, etc.).  Originally, I was using JavaScript to change out the GIFs at different timings.  This allowed me to have a lower file size, as well as callback functions that let me trigger different events.  However, the notification system I was using was not set up to handle the type of code I was writing… So, in the end I had to make one large GIF of the entire animation, and then use CSS animations to trigger the timing of the text.

An animated follower alert for my stream. It’s even better with sound, so come check it out sometime at Twitch.tv/NerdOrDie

Using CSS isn’t ideal for this scenario, but luckily it worked out well.  Since the GIF is a lot larger than it could have been, I was worried about loading times, since the file would not be stored locally.  To combat this issue I wrote a simple JavaScript function that added the timing classes to each element when the image was loaded.

If you’re interested in having Nerd or Die make you an alert like this, check out our commission request page to get in touch.