As part of a school project I was assigned to create an animation and convert it into code (click on the button to see the animation). Please note that it’s written in Dutch.


School project

My role

Visual Designer and Front-end Development

Start from scratch

Exceptional in this project was to start by sketching. We were free to think of anything, so I decided on a cat because I am a cat person. After sketching the object, the cat was further created in Illustrator in different layers, so it could be exported to After Effects.


After finishing the object, the icons and their interaction were sketched which was needed for the animation. After receiving feedback, the animation included the three icons:  sleep, eat and play.

Zero and Loading state

In switching between the interactions of the icons it was required to create a zero and a loading state. The zero state became a chilling cat. You can see him breathing and the leaves moving. The sound you hear is the sound ofmoving leaves.

The loading state contains leaves


After finishing the movement of the cat and the icons, I started on the animation. Because I was new to this it took a little while, but the longer I got into it, the easier it got.

End result

I liked how the illustration turned out in combination with the colours of the background. My teacher also complimented me about this and rewarded the project with an  8,3 grade.

To see the animation, click on the button bellow.