Creative Coding: Web Animation

Kinetic CodeCraft: Art from code

No graphics applications were used to create any of these elements – just original HTML, CSS, and vanilla JS, written by hand, in a code editor.

Buzzed Animation by Greg Klamt

99-BOB.com

This is an app I created with hand-coded HTML, CSS, and JavaScript, as an exercise to improve my JavaScript. It also gave me a chance to my CSS animation and interaction design skills. I chose it because of the challenges of adding engagement to one of the stupidest songs ever written.

All the bricks, bottles, labels, landscapes, etc., and animations are styled with CSS.

It is just a start at this point, and still needs fixes for some devices and browsers, as well as development of the game elements for better engagement.

Despite having been focused in web design for years, until recently, I did not think of the code used to create websites as an artistic medium, but rather, more of a vehicle to display content (words, pictures, video) that had been created outside of the coding environment.

In the pieces shown on this page, every element was drawn, positioned, and animated using code, without any external images or other elements, and without any starting plan or sketches. In a similar way to how I would create something in Photoshop or Illustrator, I built one element at a time, and assembled them using CSS layer ordering and opacity, eventually adding interactions and animation to bring them to life.

drips

These pieces all began while playing with code to test styles, transforms, transitions, animations, and other functions to see how far I could go. Departing from my familiar workflows, yet still using my layering, color, form as I might in a graphics app, I was inspired to work and think in new frameworks,  and ended up combining my passions for art, animation, and web design while learning a lot about what works and does not work so well.

There is something wonderful in overcoming the challenges and confines and pushing me into new explorations.

lotus

NOTE: These only seem to work properly in modern versions of Firefox, Chrome, and Opera. For some reason, Apple scores low on implementation of some of the best new CSS operators with Safari and iOS. I hope to find time to gracefully degrade these for other browsers