passively tween a property with tweenlite

Question

I'd like to be able to passively tween a property on my object, so that during the tween I can update this object and TweenLite will carry on.

For example, the following code will tween coordinates in an object from 0 to 15 over 15 seconds. Whilst this is happening, I also want to update the x and y variables of target.position, and I cannot do this as TweenLite seems to "hog" the object until it's done (as in, until 15 seconds have passed).

// target.position starts at { x:0, y: 0 }
TweenLite.to(target.position, 15, {
    x: 15,
    y: 15,
    ease: Power4.easeOut
})

// for examples sake i'd like to do the following, yet it does not have an effect
setTimeout(function(){ target.position.x += 10 }, 1000)
setTimeout(function(){ target.position.y += 15 }, 2500)
setTimeout(function(){ target.position.x -= 17 }, 7500)

Answer 1

I solved my question by using the ModifiersPlugin that Tahir Ahmed recommended.

The ModifiersPlugin gives you two values in the callback, it's current value and the running total of the tween, I have named this cX and rT. What is returned in the callback will used by TweenLite in the next call, and given again as rT. This is handy so I can let ModifiersPlugin look after it's own running total, tween to x and y yet not actually update the target.position.. pretty useful.

All I do is work out the change needed, so the delta, which I call dX and add that to my target position, and passively tweening a variable is possible!

My code now looks something like this:

// just some dummy example data
target.position.x = 200
target.position.y = 300

x = 300
y = 400

TweenLite.to({ x: target.position.x, y: target.position.y }, 0.3, {
    x: x,
    y: y,
    ease: Power4.easeOut,
    modifiers: {
        x: function(cX, rT) {

            // get delta (current change in) value from running total - current
            const dX = cX - rT.x
            target.position.x += dX

            // update running total with current delta
            rT.x += dX
            return rT.x
        },
        y: function(cY, rT) {
            const dY = cY - rT.y
            target.position.y += dY
            rT.y += dY
            return rT.y
        }
    }
})