I decided to animate some of my icons to better the interactivity of my SDG app. When the user taps on one of the icons in the app’s home screen, I’m hoping that a little animation of the icon will pop up.

Not long ago, I learned the basics of frame-by-frame animation in IXD302 and tried it out for the first time. Even though the concept was easy enough to grasp, making the animation itself took a lot of effort and time. Before you even start to make the animation in photoshop, you need to have a general plan of how the elements in the animation will move and interact with each other.

A few seconds of animation usually takes about 20-25 frames. Each frame usually has a slightly different image/content that is manually adjusted by hand in Figma and then saved into photoshop;

I made an animation for five different icons and, in total, made over 100 frames. It was a huge task, but I enjoyed how you have to utilise logical thinking to plan every frame to ensure smooth animation. And in the end, I benefited from this extra learning experience and became more confident in my skill.

Animation 1

The first animation I made is also the simplest one compared to the others. It is just two circles that move closer and closer towards each other. The icon represents gender equality. I wanted to show through the animation that though there are different genders, together we still collectively embody the human race and are one of the same.

initial planning sketch;