Search code examples
javascriptthree.jstweengsap

Tween - Infinite repeat without starting from the beginning position

I have a div and I want to move it forever to in the down position, Tween repeat -1 starts from where the element is began to move. I want it to continue like it's a loop.

var tlMain = new TimelineMax({repeat:0});
tlMain.to(group.position, 2 , {y: '-=10', ease: Power0.easeNone, repeat:-1});

With above timeline it works like:

Start: 10
1st  : 10
2nd  : 10

So each time it turns, 

Start: 10
1st  : 0
2nd  : -10
3rd  : -20

Is it possible to achieve this with Tween or do I need to do it in my render method primitively?

function render(...args) {
    group.position.y -= 10;

    requestAnimationFrame(render(...args))
}

Or do I need to setup a for loop to run this infinitely instead of using repeat? (this works)

Solution

  • This does no work with .repeat() since the animation always starts at the original position (and you can't influence this behavior without changing the library). For such a use case, I would animate the object's position manually like demonstrated in your code example. Or if possible, choose are really low y value and a long duration. In this way, you can define a single tween.