GreenSock, tween function arguments

Question

I got two functions called on mouse events:

function menuBtnOver(e){
    var b = e.data;
    b.setPosition(b.x, b.y+5);
}

function menuBtnOut(e){
    var b = e.data;
    b.setPosition(b.x, b.y-5);
}

and:

setPosition:function(x, y) {
        if(!x) x = 0;
        if(!y) y = 0;
        this.element.css("left", x);
        this.element.css("top", y);
    }

element property is a jQuery object. It is working ok but i want to animate this. How can i do this with TweenLite? I've tried following code:

function menuBtnOver(e){
    TweenLite.to(e.data, 1, {top:500});
}

As well as this:

function menuBtnOver(e){
    TweenLite.to(e.data.getElement(), 1, {top:500});
}

and many other combinations but none of them worked. Only on method which partially work is this:

function menuBtnOver(e){
    TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.setPosition, onUpdateParams:[e.data.x, e.data.y]});
}

But it work only on fist button when I roll over and (after any time) roll out, it moves directly to given position (without tween) and then the tween goes forever giving me error each time(at least - I couldn't get any errors or anything with other attempts).

Uncaught TypeError: Cannot read property 'css' of undefined

at: this.element.css("left", x);

Update

I figured out what is going on. I've changed code as so:

function menuBtnOver(e){
    TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.setPosition, onUpdateParams:[e.data.x, e.data.y], onUpdateScope:e.data});
}

But the problem with this is that arguments to update function which I set to e.data.y/x aren't dynamic references and always stay as those exact values from menuBtnOver state. So the tween works if i change setPosition function to:

setPosition:function(x, y) {
    if(!x) x = 0;
    if(!y) y = 0;
    this.element.css("left", this.x);
    this.element.css("top", this.y);
}

But obviously this is not what I want to do. So I have option to make something like this:

 MenuButton.prototype = {
    setPosition:function(x, y) {
        if(!x) x = 0;
        if(!y) y = 0;
        this.x = x; this.y = y;
        this.element.css("left", x);
        this.element.css("top", y);
    },
    updatePosition:function(){
        this.element.css("left", this.x);
        this.element.css("top", this.y);
    }
}

function menuBtnOver(e){
    TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.updatePosition, onUpdateScope:e.data});

}

Or define external update function in similar manner. The question still stays the same so is there a simple way to do this simpler. Does GS tween has any mechanic which automate this process?

Thanks to everyone for attention :)

can you create a fiddle of this? seems like an easy fix but I could be wrong. — Tahir Ahmed
@tahir I don't know how I can import tween library in fiddle :/ — Paweł Audionysos
should be easy. on the right-hand side, there is an External Resources panel. open that and input the tween library taking from one of the links in this CDN link. — Tahir Ahmed
I got this! thank you :) Here is the link jsfiddle.net/3bf9cyw2/1 — Paweł Audionysos

nzajt nzajt · Accepted Answer · 2015-08-31T17:13:12

this in setPosition is referring to that function and not the this of the onClick event.

you need to do pass this to setPosition. As in the example below, where I passed it as self in the function setPosition.

function menuBtnOver(e){
  var b = e.data;
  b.setPosition(this, b.x, b.y+5);

}

function menuBtnOut(e){
  var b = e.data;
  b.setPosition(this, b.x, b.y-5);

} and:

setPosition:function(self, x, y) {
    if(!x) x = 0;
    if(!y) y = 0;
    self.element.css("left", x);
    self.element.css("top", y);
}

this always refernces the function in which is was called. as you can read about her. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

So you can pass this in a function as a variable.

GreenSock, tween function arguments

Update

1 Answers