I have items arranged in a circle. How can I rotate the whole thing while keeping the inside elements upright?

Question

Im using code based off of this demo (https://codepen.io/KittyGiraudel/pen/vEJXGm) in order to arrange a few items in a circle. I want create an animation to rotate the circle however keep the elements inside upright as it rotates.

So I thought I could use simple jQuery to do a css "transform: rotate()" and then use the same thing with a negative rotation on the elements inside, however because of the way the demo is set up, the inner elements are moved to the center of the whole circle when rotated.

$('.button').click(function() {
  $('.box').animate(
    { deg: 72 },
    {
      duration: 1200,
      step: function(now) {
        $(this).css({ transform: 'rotate(' + now + 'deg)' });
      }
    }
  );
});

Alternatively, is there a way to use jQuery to change the value of the "$rot" variable? I sass variables can't be accessed by js but maybe there is a workaround?

Answer 1

Since JS is not blocking, I would suggest to simply rotate your inner elements in the opposite direction of your main rotation. It would look something like this:

$('.button').click(function() {
  $('.box').animate(
    { deg: 72 },
    {
      duration: 1200,
      step: function(now) {
        $(this).css({ transform: 'rotate(' + now + 'deg)' });
      }
    }
  );
  $('.box .inner').animate(
    { deg: -72 },
    {
      duration: 1200,
      step: function(now) {
        $(this).css({ transform: 'rotate(' + now + 'deg)' });
      }
    }
  );
});

Using the codepen you submitted, I modified it a bit for you to see what would be the actual result.

https://codepen.io/Dvermette018/pen/podGmXR

Dave