How to design images for an Animated Goat with Bursting Bubbles

Purity Works animated goat

Note: This animation was designed in Fireworks but should work in any animation program. It was designed for Purity Works, a goat milk site which is no longer online. The goat was drawn by the owner's daughter Michelle age 11 and animated by Lori's Web Design. The goat is sniffing a bowl of soap as it's cooking and when the bubbles burst it wags it's tail. The animation of the goat's tail was at a different speed than the rising bubbles because the bubbles float gently to the top but the tail wags faster. Below are the separate images that make up this animation and the speed for each one so you can see the changes needed to make the bubbles appear like they are rising and bursting. See more Animations.


Animation of The Bubbles (images #1 to #12)

The goat is sniffing a pot full of soap made from goat's milk. The goat's tail is not moving yet. The bubbles start out small and start rising.

As the bubbles rise they gradually get larger. The goat's tail is still not wagging.

As the bubbles rise higher they pop and dissappear. Notice the third image in the above row, showing the bursting of the bubbles. The animation moves so fast that you don't actually see that image, it tricks the eye into thinking that the bubbles popped.

Animation of the Goat's Tail (images #13 to #20)

The tail wags after the bubbles have popped and left the frame. You have to look closely at the images above to see that the tail is actually moving left and right giving it the appearance of wagging. The series of 4 images above are repeated so the tail can wag twice.

The Finished Animation

Purity Works animated goat

This animation was set to run for 20 frames, with frames 1-11 of the bubbles rising slowly set at 15 miliseconds and the rest of the frames, with the tail wagging faster, at 6 miliseconds each. On slower computers this animation will be slower.

Lori's Web Design
Copyright © 2005 - updated 1-12-19.
All rights reserved.