CSS3 animation workshop – Battle Snail
On the 10th of November, our class took part in a CSS3 animation workshop. The task was to make a storyboard for our animation to help us to know how many steps we would need.
Probably the hardest part of this work was to come up with an idea that would be complex enough so that I could include as many animation principles as possible.
I managed to make all the sprite sheets on time, however, I had problems with exporting them in the right size, and therefore I did not complete the animation on time and couldn’t participate in the contest at the end of the workshop.
I made 35 pictures, 32 of them are in 3 sprite sheets.
1) Squash and stretch
5) Follow through and overlapping
6) Slow in and Slow out
8) Secondary action
11) Solid drawings
I wanted my animation to be 500px X 500px. First I created new file in Adobe Illustrator that was big enough to fit all the steps of one part of the animation. Then I divided in a number of tiles equal to the number of steps I wanted and started working on the images. When I was done, I exported them to the same folder I had my html file in. Lastly, I coded all the parts of the animation in, made sure each part of the animation was overlapping the other parts as it should with z-index and put the whole thing in the middle of the page.
Here is the final animation: Battle Snail