I have two functions that are 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);
}
Additionally, there is another function:
setPosition:function(x, y) {
if(!x) x = 0;
if(!y) y = 0;
this.element.css("left", x);
this.element.css("top", y);
}
The 'element' property mentioned above is a jQuery object. While the existing setup works fine, I am interested in adding animation. Is it possible to achieve this using TweenLite? I've experimented with different code snippets such as:
function menuBtnOver(e){
TweenLite.to(e.data, 1, {top:500});
}
And also tried:
function menuBtnOver(e){
TweenLite.to(e.data.getElement(), 1, {top:500});
}
However, none of these methods seem to be working as expected. The only method that somewhat works is:
function menuBtnOver(e){
TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.setPosition, onUpdateParams:[e.data.x, e.data.y]});
}
Although, it only works for the first button and encounters errors when trying to tween endlessly.
Uncaught TypeError: Cannot read property 'css' of undefined
This error occurs at:
this.element.css("left", x);Update
After some investigation, I discovered the issue.
function menuBtnOver(e){
TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.setPosition, onUpdateParams:[e.data.x, e.data.y], onUpdateScope:e.data});
}
The problem here lies in the static values used for 'onUpdateParams'. To solve this, I modified the 'setPosition' function:
setPosition:function(x, y) {
if(!x) x = 0;
if(!y) y = 0;
this.element.css("left", this.x);
this.element.css("top", this.y);
}
Unfortunately, this workaround is not ideal. A potential solution could be:
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});
}
Alternatively, an external update function could be defined in a similar manner. The main question remains whether there is a simpler approach to handle this scenario. Does GS Tween offer any automation for this process?
Thank you to everyone for your attention :)