The most challenging part about this project was definitely the artistic design. This was my first real attempt at CSS art. My drawing skills in real life are limited to stick figures and snails(long story). Instead of taking the wise course of action and designing beforehand, I just improvised the parts and pieces as I went along. I believe animating the CSS pieces also added an extra layer of challenge as I had to consider whether the pieces made sense within the context of the animation.
There were some hiccups while coding the CSS but they weren't anything too difficult. I wanted to make the design responsive, and I accomplished that partly by defining a unique $baseSize vmax variable for each of the parts' container/wrapper. Picking out the correct z-indices was also a bit tricky. Clip-path helped a bit with the design but it set an automatic overflow: hidden, so I had to be considerate when animating/placing children parts.
Happily, animation was the easiest part of this pen. Since everything was already assembled, 90% of the animation was just using GSAP's TimelineMax's .from function. Since I built the parts around the idea that they would be assembling, I typically had already decided on how the parts would animate before I even finished styling.
This is actually part of a larger project. I had been practicing React and in the spirit of modularity, I set out to create a project where users could pick out modular robot parts which would then assemble. The samurai robot is made up of five of those parts and it's the first one that I've completed. In the future, as the project grows, there will be different parts to mix and match with. For this pen, however, I just had all of the samurai parts assemble simultaneously.
The original project, which has not been updated at the time of this writing, can be found at https://jx2bandito.github.io/robotBuilder/ .
Thanks to CodePen for featuring this pen, and thanks to everyone who viewed it. I learned a lot about CSS from this samurai robot. I'll be making more robots parts when I can.