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.com/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.net/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", complete: loopMeLeft});
}
And here is a bit more complicated 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.net/AtheistP3ace/znyLtfaf/4/