This is the 4th submission for the “5-in-5” Major Studio.
After being done with three, it suddenly hit me that I haven’t done anything creatively with code yet. I had to let something off me into code. I decided to keep my remaining two projects within a very tight 2-hour sprint and code whatever was possible with an idea and goal just before the sprint.
For this 2-hour sprint of creative coding, I decided that I will FINALLY decide to animate my blog banner. If you see above, my blog title font isn’t a downloaded font, but that’s just my casual signature of my actual handwriting, that I framed over the iPad. I always wanted to make something of it, animate it, and finally today I decided to animate the cursive writing style of this. To give you a quick picture, this is what I want to achieve:
The idea is simple and pretty clear from the above gif. I know that there are a million easier ways to get this done, but curiosity is going to kill me here, and since I have time pushing me, I might as well finally explore this. I still do need to learn many aspects of CSS and JS animations, and they always fascinate me. However, this to my surprise turned out to be only CSS animations, and I tried to keep JS out of this.
Process and Goal
This again is simple and clear cut. I just need to make my blog header in cursive writing style animation. I started off with the files on my desktop that I already had a month ago, to build my portfolio website. This is one where I hand coded, from scratch the entire site. I just dove right into it, focussed on the header and began my CSS code. My main code of inference was from CodePen and I took this example. However, this I believe was my mistake and ate up a good amount of my time, because this code was extremely HTML heavy, which according to me is lesser logic!
I took a detour, went with my own pre-defined styles and ID’s in my current project and built from that, instead of using the Codepen example as a reference. Then, time pushed me again to get into another shortcut. I could not define the spaces of the image completion with HTML and all these numbers and figures. Therefore I had to create a very large file with my signature, just that I erased, little by little each pattern. Basically, this is like a string of frames that the CSS will run with keyframes and it will give an illusion of cursive writing.
- You have two-hour sprint! Go!
- The JS example was a long road, so just stick to CSS and check if you can keep this simple.
Goal and Success
- Contrary to the idea of “making” something, I just wanted to learn the animation process in this sprint of an example to get hands dirty with creative coding. As I said, there are a ton of really easy ways of doing this.
- I was overjoyed even with a 2-hour sprint that I literally got CSS to run handwriting for me! A little bit of polishing and I should be done.
- I am recognizing a pattern in my 5-in-5 projects so far, that my planning with Photoshop is a little too much at random, and I should not be underestimating the time consumption with Photoshop activity and dealing with a ton of images, even though I am proficient with it.
- Attention to detail, even unconsciously by habit, in a crunch time can be very threatening to reach the finish line.
Here’s what I could manage finally: