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?
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