How fun could it be to animate in code?

Image for post
Image for post
Example of animation in CSS

Animation has a special place in my heart, and probably always will. Years after taking my first trembling steps in the world of animation and motion design I’m still amazed by the feeling of giving life to a still object. But what if, instead of the viewers just looking at it, they could interact with it?

This intriguing thought is one of the reasons I’m now taking up coding again. I built my first webpage at the age of 11 and loved it. But when I later struggled with building an animation portfolio, I stopped and started using templates instead. A lot has changed in the world of web development, forcing me to learn most of it from scratch, but wow, the possibilities feel endless!

I have just started with CSS animation. I had this vision of how hard and different it would be compared to the software and the way of thinking that I’m used to when animating. But actually, it makes sense. And why wouldn't it? Programming is a lot more logical in its nature than animation is. In both cases it is the same parameters that we change over time; position, scale, rotation, opacity… I still need some time before I get the curves and eases as smooth as I am used to, but the basics are a lot easier to grasp than I thought.

Example of HMTL and CSS animation from one of my projects during Technigo Bootcamp (https://weather-project-cornelia.netlify.app/)

The above example is from when we were creating a weather app in the Technigo Bootcamp. In the app, the different animations show up depending on the current weather in the selected city. (I’m suspecting the code would be a lot more optimized using React components which we just started with but that’s another topic.)

It triggers my imagination to be able to connect and control the animation to/with interaction on a website instead of rendering an mp4 video or gif and just posting it as it is. So far I’ve just taken a peek at this, but I’m eager to learn more and try things out in upcoming projects. Have you done a similar journey and have some useful insights? I would love to hear your thoughts about the possibilities (and limitations) of animation in code.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store