Spent a couple hours working on the slider movements for the menu page header. It was fairly simple to create th enecessary animations in CSS:
The tricky part is the Javascript. I actually wrote the code to handle the first cake’s movements with an if/else statement and an onclick event handler, but the issue is that each click resets the cake back to its original position rather than continuing from the new position (adding ‘forwards’ to the animation property didn’t fix it):
I didn’t have time to try much, but I’m thinking the solution could be a single rotational animation using the Javascript to pause and resume onclick, CSS rules stating the new positioning for each relevant class or additional code indicating the new positioning in the Javascript if/else statements.
Next chance I get, I’m trying them all (and searching other possible solutions).
Updated repository here.
undefined 