I started out with the idea that i wanted to animate my logo for our third project, where we have to code our own website. The reason why i chose to animate the logo, is because i wasn’t sure what logo design i wanted to stick with.
My 9 takes on my future logo
My main concern was how long the foot of the ‘P’ should be.
For this reason i didn’t create a moodboard, because i wanted to work more hands-on and experiment with the transformation of my logo in the animation.
I started out creating a grid in Illustrator, with a size of 300×300 per frame. So in total i ended up with 22 frames in total. I had to adjust the total frames since i started out with 10 frames which looked too choppy.
I knew i wanted to play with the length of the P’s foot, so i started out creating a fluid animation where the foot was drooling down the left side of the H.
Due to lack of time before we had to show our animation, i chose not to go with the fluid animation. I chose to go with a linear animation, which i also believe looked the best in the end.
I went with the fifth principle of animation: 05. Follow through and overlapping action.
Where the principle is to have two different actions that move at the same time and enhance eachother. Usually this principle is used in more realistic animations, but i used it in this case to make the animation a bit more interesting.
The code used is quite simple, it’s basically a strip of a picture/illustration in one file, where the code runs the strip through a hole that only shows a single frame at a time. So the strip moves behind the hole, making it seem like the animation is moving, while it’s actually just a strip of different frames that’s dragged horizontal behind the hole.
As seen below, the width and height is both 300px which is the same as each frame in the picture file.
Steps are set to 22, since i have 22 frames.
@keyframes play: is set to 0px at 0% and to -6600px at 100%. The -6600 is due to 22*300px.
HTML
<body>
<div class="sprite"></div>
</body>CSS
.sprite {
width: 300px;
height: 300px;
background: url(logoani.png) 0 0 no-repeat;
animation: play 1s steps(22) infinite;
}
@keyframes play {
0%{background-position: 0px;}
100% {background-position: -6600px;}
}