Hey, thanks for the suggestion, but it didn't work, im doing everything inside the event handler anyway, please see the full function, its really custom, but you'll get the point.
Essentially i have the Tween inside the event handler, because on click i need to get some data and construct the Tween base on it.
I've put your suggestion on one of the possible scenarios (when 'next' is clicked):
var phoneSlide = function(){
$('.phone-control').on('click', function(e){
var _this = $(this),
parent = _this.closest('#outer-target'),
slide = parent.find('.screen-slides'),
index = +slide.attr('data-tooltip-info'),
slideBgPosition = slide.css('background-position').replace(/%/g, '').split(' '),
leftPosition = +slideBgPosition[0].slice(0, -2),
slideWidth = 254,
newPosition, prevTooltip, tl;
if(_this.hasClass('next')){
newPosition = leftPosition - slideWidth;
tl = TweenLite.to(slide, 0.5, {backgroundPosition: newPosition + "px 0px", ease: Cubic.easeInOut});
if(tl.isActive()){
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
index !== 5 ? index++ : index = 1;
slide.attr('data-tooltip-info', index);
prevTooltip = $('#screen-info-' + (index - 1));
prevTooltip.length ? prevTooltip.css('opacity', 0) : $('#screen-info-5').css('opacity', 0);
$('#screen-info-' + index).css('opacity', 1);
}
else if(_this.hasClass('prev')){
newPosition = leftPosition + slideWidth;
tl = TweenLite.to(slide, 0.5, {backgroundPosition: newPosition + "px 0px", ease: Cubic.easeInOut});
if(tl.isActive()){
return false;
}
index !== 1 ? index-- : index = 5;
slide.attr('data-tooltip-info', index);
prevTooltip = $('#screen-info-' + (index + 1));
prevTooltip.length ? prevTooltip.css('opacity', 0) : $('#screen-info-1').css('opacity', 0);
$('#screen-info-' + index).css('opacity', 1);
}
});
};