CODEWITHSUNDEEP
javascriptjquerycssanimation
asp
asp

Reputation: 765

How to avoid anti-clockwise rotation animation when reseting rotation from 360deg to 0 deg?

I am creating an animation that looks like a fancy wheel, When resetting rotation from 360deg to 0 deg, It animating the wheel in anti-clockwise direction, How to Avoid this???

HTML

<ul class="cm">
  <li><span>01</span></li>
  <li><span>02</span></li>
  <li><span>03</span></li>
  <li><span>04</span></li>
  <li><span>05</span></li>
  <li><span>06</span></li>
  <li><span>07</span></li>
  <li><span>08</span></li>
</ul>

SCSS

$Brdr: #7d868c;
  *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    &:before,&:after{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
  %notaList{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  $node: 8;
  $s: 80px;
  $rotation: 0;

  .cm{
    top: 50%;
    left: 0;
    right: 0;
    width: $s;
    height: $s;
    margin: auto;
    display: block;
    position: absolute;
    transition: transform 0.8s ease-out;
    transform:rotate(#{$rotation}deg);
    @extend %notaList;
    background: rgba(#000, 0.5);
    border-radius: 50%;
    li{
      left: 0;
      top:-($s*2 - ($s/2));
      color:#333;
      width:90%;
      height: 90%;
      display: block;
      position: absolute;
      margin-bottom: ($s*2 - ($s/2));

      & > span{
        display: block;
        padding: 36%;
        text-align: center;
        overflow: hidden;
        background: #CCC;
        border-radius: 5px 5px 50% 50%;
        transition: transform 0.8s ease-out;
      }
      @for $i from 1 through $node{
        &:nth-child(#{$i}n) {
          transform-origin: 50% ($s*2);
          transform: rotate(($i - 1) * 360deg/$node);
          & > span {
            transform:rotate(($rotation * -1) - (($i - 1) * 360deg/$node));
          }
        }
      }
    }
  }

JQuery

var i = 1,
    nodes = 8;

setInterval(function(){
  var rotation = i * 360 / nodes;
  i = i + 1;

  $('.cm').css({
    'transform': 'rotate(' + rotation + 'deg)'
  }).attr('data-rotation', rotation);

  $('.cm li').each(function (node){
    r = (node) * 360/nodes;
    $($('.cm li')[node]).find('span').css({
      'transform': 'rotate(' + ((rotation*-1) - r) + 'deg)'
    });
  });

  if(i >= nodes){
    i = 0;
  }
}, 1000);

JsFiddle link:

https://jsfiddle.net/aspjsplayground/hqczLby7/

Upvotes: 1

Views: 343

Answers (2)

Andrew Rockwell
Andrew Rockwell

Reputation: 454

I've edited your jsfiddle so that it does not animate the rotation when reseting to 0.

When doing this it's helpful to use window.requestAnimationFrame since modifying transition isn't instant.

https://jsfiddle.net/hqczLby7/8/

Upvotes: 1

kva
kva

Reputation: 74

just remove this part from the code then rotation angle will increase
45 90 135 180 225 270 315 360 405 450 and so on..

if(i >= nodes){
i = 0;}

Upvotes: 0

Related Questions