Loop / Restart Animation with non-reverse speed

Question

I use Velocity to translate an element across the screen. Upon completion, I would like the element to return to its starting point and loop the animation, bypassing the default reverse effect that occurs during the loop.

I have my standard animation function in which I pass my values:

$(element).delay(initialDelay).velocity(animationValues, {duration: duration, easing: easing, loop: loop, complete: function() { callback(); }}); 

Is there a way I could achieve this functionality when translating an element, not just rotating it?

Answer 1

Make sure you initialize the position in your animation function - see the example below:

 $(document).ready(function(){ var el = $('#target'); function anim() { el.velocity({ 'left': 0 }, 0 ) .velocity({ 'left': 300 }, { duration: 2000, complete: anim }); }; anim(); }); 

 #target { background: #999; width: 100px; height: 100px; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/velocity/1.4.2/velocity.min.js"></script> <div id="target"></div>