I really do think that complicated CSS animations are a lot like magic tricks. You have the most basic of building blocks to start with: CSS, HTML and JavaScript and only a handful of very basic rules to use, in order to trick the user into thinking they’re seeing something much more complicated than they really are.
It’s something I put into practice quite recently for our client MTech. The task was to build a widget that could be used in place of a banner, to help users discover what MTech service is right for them. In other words, it’s a bit like a solution finder. Sounds simple enough right? And it was… until our UX Designer Jake was let loose on it but luckily for him, I like a bit of CSS magic....
The first problem with this particular build, was the design. It’s based on the client’s logo and that’s based on a lot of circles. The trouble is, HTML doesn’t do circles. So how can I trick the user into thinking their seeing things circling one another, when I don’t have circles as a basic shape in my toolbox?
Well first things first, how to make just
one circle? Thankfully this is about as easily said as done, which is rare, but nice. It’s just a case of applying a boarder radius to the HTML squares that is significant enough so that those squares appear as circles.
Second things second, getting circles to circle circles (yes really). The answer here, surprisingly enough, is good old-fashioned trigonometry – it turns out some things they teach you in school actually are useful. So, here’s what I did. First of all, I needed to create the elements required to build the final widget and I also needed to create the relationships between these elements. In Kentico, the best way to do this is through custom tables. Once I have the right data in the custom table, I can then add that data to the webpage.
At this point, I could then start using JavaScript to control the elements on the page, according to the relationships I established in the custom table. This gives me the bones of the structure so now, I can bring in the visual elements, which I like to add in a layering process.
Remember I mentioned trigonometry? Well this is where the maths starts. In order to position the small circles shown in the design around the central larger circle, I needed to work out the appropriate angles, and I needed to do this per circle.
So, here is my first equation:
(360/total number of circles (that’s 7 in the scenario) * the circle number
The circle number is zero-indexed (starts at 0) and 1 is added each time the next part of the equation is run, Yes that’s right, more maths.
For the next bit, I need to use
X =
R sin(
θ) and
X =
R cos(
θ) to basically translate the angles back into a X/Y co-ordinate because of course, HTML doesn’t do circles!
In this equation the
X position = (width of square container / 2) * SIN (angle) and the
Y position = (height of square contained / 2) * COS (angle)
Et voila! This gives each circle it’s correct position on the page.
On top of all this work, there were also all the necessary CSS transitions and CSS animations needed to bring the whole thing to life and working properly. This involved creating the initial states, or in other words, what the user sees before any interaction happens, the transition states, what happens after an interaction happens and then the final states, what it looks like when the transition has finished.
This is where timing and precision are critical, just like they are with magic tricks and sleight of hand. If I get the states and transitions in the wrong order or running at the wrong speed, then the illusion is compromised and the trick doesn’t work. It’s also important that JavaScript is used correctly to control the position of all the on-page elements through these transitions and animations as well, and that too, is easier said than done.
In the end, it took quite a lot of patience and a fair bit of hard work – especially when remembering how sin, cos, tan works, but in the end, all the elements came together in the right order and in the right way, creating a smooth, stylish interactive widget that really improves the user experience on the MTech website.
Why not have a go using it yourself:
www.mtech.uk.com