Back to portfolio

03 Basic Animation 03.01

"Simple" Animation

Simon greeting you
Try the story (tablet and up)

The Project

We had make a simple animation using the different transform functions in CSS3 and combine that with JavaScript.

What did I learn?

I wanted to do more that "just" animate a still image, and I was doing the Inktober challenge at the time so I pulled my inspiration from the ink style.

I create a spritesheet animation in Illustrator using the symbol function so that I had simple elements to work with when testing the movement and coding.

When everything was looking good I edited the symbols and "fleshed out" the creature. Making it pure white fitted with my style and speed up the design because of little to no detailing.

And thous, Darkness was born!

"I showed him I did!"

I was not very happy about how box-shadow worked on my creature, it being a .png, so I thought about doing a special animation DBZ-style!

That would take more time than I had, so I used my black belt in Google-Fu and found the filter effects. More precise, the drop-shadow effect.

I played around with it and it seemed to ignore the transparency of the png, and locate the edges of the image, PERFECT!

The most challenging?

I'm use to animate in Flash, now Animate, Photoshop or After Effects, so not having the luxury of having onion skins, or really go back and forth frames to test movement was kinda hard.

I also had some trouble with the JavaScipt not wanting to do as I wanted, and it's still won't toggle off when a new button is pressed, but that error made me very aware on my future projects.

Try the story (tablet and up)