How fun could it be to animate in code?

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.

--

--

--

Frontend developer student at Technigo Bootcamp with a background in motion design. My portfolio: https://frontend.corneliaryas.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Amazing Benefits of Using Ruby on Rails for Your Web Project.

HNG Internship: An iconic 4 Fortnights dream of an Intern

Hello world

Practical use of Design Patterns in Java

Tkinter GUI Programming

Data storage architectures

How to be Agile (Developer perspective)

Simplicity

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
Cornelia Ryås

Cornelia Ryås

Frontend developer student at Technigo Bootcamp with a background in motion design. My portfolio: https://frontend.corneliaryas.com/

More from Medium

Responsive Web Design: An Adaptive Approach to Web Development

A glimpse of common image format and their usage

WHAT MAKES ME A GREAT FRONT-END DEVELOPER

User Experience: Jakob Nielsen’s 10 general principles for interaction design.