I'm trying to make a gear rotate around its z axis. It works as expected, but then reverses after the 5000 duration. How do I stop it from reversing and only make it go forward?

Thanks

var gear_width = $('.gear').width();
var gear_height = $('.gear').height();

$('.gear').velocity({  rotateZ:-360 }, { duration: 5000, easing: "linear", loop: true,});

I'm trying to make a gear rotate around its z axis. It works as expected, but then reverses after the 5000 duration. How do I stop it from reversing and only make it go forward?

Thanks

var gear_width = $('.gear').width();
var gear_height = $('.gear').height();

$('.gear').velocity({  rotateZ:-360 }, { duration: 5000, easing: "linear", loop: true,});

• javascript
• jquery
• animation
• velocity.js

• Does anyone have any ideas? – Camrin Parnell Commented Dec 19, 2015 at 2:24

1 Answer 1

This is a known bug in Velocity and Julian says he will be fixing it but there is no known release date as far as I know:

https://github./julianshapiro/velocity/issues/453 (Rotate negative value rotates back in clockwise)

Since looping in the clockwise direction does indeed work, a quick work around to get infinite looping in the counterclockwise direction is something like this until the bug is fixed:

Fiddle: https://jsfiddle/znyLtfaf/2/

HTML:

<div class="gear gearRight">rotate right</div>
<div class="gear gearLeft">rotate left</div>

CSS:

.gear {
  width: 100px;
  height: 100px;
  position: absolute;
  background: red;
}

.gearRight {
  top: 100px;
  left: 100px;
}

.gearLeft {
  top: 300px;
  left: 100px;
}

JS:

$('.gearRight').velocity({  rotateZ: "+=360" }, { duration: 5000, easing: "linear", loop: true});

loopMeLeft();

function loopMeLeft () {
  $('.gearLeft').velocity({  rotateZ: "-=360" }, { duration: 5000, easing: "linear", plete: loopMeLeft});
}

And here is a bit more plicated example with speeding up and slowing down the gears dynamically albeit a bit rough around the edges but the general idea is there.

Fiddle: https://jsfiddle/AtheistP3ace/znyLtfaf/4/