It's been a while since I have updated the header, mainly because I was waiting on some animations to be finished up. However last night I received an email with a bunch of them, so I thought I should implement them into the header immediately

The first issue was that the animation couldn't be a constant thing due to:

• Dragging the user away from the content
• The animation's repetitive nature

So to do this I needed to have a way to randomise both the time that the animation played and which object was animated. The obvious first step was to give all animatable objects a common class, and to create two gifs for every single image (a static gif and an animated one). With this in place I thought I had it done, I created a small script that chose a random object with the animObject class and change the background image from X.gif to X_anim.gif (I had been using background-image for all of the header items as work around to previous problem).

Issue 1: Animations not running

Since I only really wanted the animations to play once (or at least for a short period of time) I decided to edit all the gif animations to play once. This caused the issue of the pre loaded gifs never ever running (it seemed that they 'ran once' while not appended to an object). So evidently I had to change this tactic and rely on timers instead. All animations were changed to loop forever.

Issue 2: Background image src changing

But then I hit my first problem. When you change the background image, no matter if the image is cached or not, you get a transparent flicker. This was so infuriating. After doing a quick search about this problem I came to the conclusion that this was not something that could be easily fixed. Instead, I decided to create a sprite sheet gif, with the top half static and the bottom half animated, while the object it is displayed on is the full width of the image and the height exactly half. By changing the background position I am essentially changing what part of the image is shown, without any reloading needed. This way there would be no flicker and it was easy to just target the class and change the background-position to view 50% down the total height of the background.

Issue 3: Background sprite sync and animation start time

After finishing the creation of the these animated sprite sheets I ran the site and everything looked a lot smoother. For a while I was quite pleased with the result until I noticed two issues:

• Sprites were being animated half way through the animation (as the animation was constantly playing regardless of sprite sheet focus. Essentially the gif is constantly playing as it is on the stage at all times, regardless of which section of it is being viewed).
• Sprites were all moving in sync due to loading at approximately the same time

This looks quite silly when all of the birds on the grass start pecking in time. So I looked for the obvious solution, a way to restart the gif. Turns out this wasn't something I could handle with jquery without reloading the gif, and I had already discovered the problem with reloading background images, so the only way to solve the problem was to move them to IMG objects.

Issue 4: Animations ending mid animation

All animated objects were changed to the standard img tag with enforced height and width (to keep proportions during reload, in case). The src was changed from X to X_anim.gif?v=LOOPCOUNTER every time an image changed, this made sure all gifs were loaded from their start position. 

However now I had a couple of new issues. Animations were ending on odd frames, jumping from half way through the animation to the static position. To fix this I added a .one('load') call that changed the img src back to the non animated version on a timer based off a common frame that all the animations were in the static position during. 

I also discovered that now, due to the removal of the cached images, if an animation started mid previous animation the animation would jump again, so a quick query to check if mid animation (based off a search of the src string for '_anim') solved this problem.

Solution: IMG tags with forced download, timers based off load

So, my solution was:

• IMG tags, not background images (removes flicker)
• All animations repeat forever and controlled by timers
• Timer based off the load of the new src, and set for a common end time
• Cancel all animation changes if the string '_anim' exists in the filename

Overall, an exciting and fun experiment.