Client brief for an artwork commission involving animate CSS:

A story telling blog about childhood and being a father, for the nicest of clients: digital specialist Chima Amechi.

technologies used

Animate CSS: A cartoon animation from the illustrator Archibald Butler


Preparing the animate CSS Project

Hand drawing the different elements of the commission process:

This is my fourth project out of a hopeful 10. A successful commission I got through one of my new clients Chima Amechi. He called me up and explained he had just seen my website. He really liked the illustrations and the animations I had coded. He asked me about the process involved in creating these CSS3 and HTML5 effects. I explained how I take care of Art business! A great look at what you can do when you animate CSS!

I really wanted to do a good job on this project for him. Therefore I put together a structure of how I was going to deliver the work. The first step in that involves creating the following vignettes so that Chima could select which elements from each drawings he liked best but also would suit his ideas most in the composition. It’s great to go from start to finish: from paper to animate css canvases.

technologies used

mock up stories and CSS animate by illustrator, animator Archibald Butler


the code

Next stage of the project: Creating the Photoshop composition for review

After he was happy with which elements we had chosen, I started to create the artwork in Photoshop. This was again sent to him for edits and amends. I created this Photoshop piece at higher dimensions of 2500px width in size. More than the previous ones I had created. After we got through the second stage of approval I started to cut up the Photoshop file in order to create the HTML and CSS.

As an extra layer of complexity I took it upon myself to involve react JS in this project. It was a great learning curve and the whole page appears through the React JS asynchronous loading system. This is an exciting new development in my career as I wrap my head around the next generation of JavaScript frameworks.

mock up stories by cruz illustration animation archibald butler css animation



Built in React JS no less my good sir….

I added my personal page loader in JavaScript after the Reacts JS render method. On the back of that puppy, I also synced it with our famous and favourite CMS system: WordPress. I then sent this bad boy back to the client for his review. I explained how I had used new technologies and because he already works in digital he knew exactly where I was going with this… He was so happy with it, he insisted on taking me out to lunch to discuss. I kindly agreed to this meeting which we had two days ago. He was really happy with the work to say the least. I also showed him other intricacies and symbols that he hadn’t noticed which are hidden within the composition.

Chima gave me other minor amends to move images around that more suited the idea behind his project. Which was, to remind you, a place to share stories, interviews and videos about:

-What it’s like being a father
-How do you remember your father
-Other diverse social stories

collage art of cruz: illustration and CSS animate by Archibald Butler in React JS

This is why I took the time to draw a photo of his son who features at the centre stage of this work.

-The star on the map of Africa represents where Chima was born.
-You will also find the Turkish flag in other pages: the symbol of his mother.
-The owl in the night evokes story telling.
-The stories (the blog) are in the book Cruz is reading.

I hope you enjoyed looking at this work as much as I did creating it. I will add the link to the live site once I have it. If you want to find out more about how to animate CSS, check out my blog page.