November was a VERY heavy month workwise and schoolwise, so I had to take yet another break, but as things eased up in the last week, I got to spend a little time working on the rotation of the cakes and I’ve finally nailed down their movements! In a clockwise direction, that is.
I was delayed a bit by the fact that they would resume their movement from their start point every time I triggered the onClick event. Turns out the problem was that positioning isn’t animatable. Once I figured that out, I had to set positioning via Javascript, which took some time. I then had to code movements for each of the three cakes (and their attendant figcaptions) because, given their differing start points, I, unfortunately, couldn’t just duplicate the movements for each cake. TBH, I’m still not entirely clear as to why I couldn’t, which probably means I’m missing something in the math.
Anyhoo, I started with coding the chocolate cake’s movement:
Then I tried coding them all together in a for loop, but given the aforementioned issues with reusing code between the cakes, I had to code the movement of each cake individually.
It took a while to tweak the code for each individual cake (and their figcaptions) to set them in the correct positions with JS and adjust the CSS translations to shift them in the correct ways, but I think it came out well in the end.
Now… this is not remotely responsive, so odds are I’m going to have to redo it all anyway, which is fine because I am SURE there’s a more elegant solution using vanilla JS. I just have to figure it out/find it.
Updated repository here.
undefined 