Utilizing the TweenMax library, I am adding styles to a div while scrolling. However, I am facing a challenge where I need different styles based on varying page resolutions. To address this issue, I implemented an if condition. Is there a way I can use a variable to streamline the code within the if block? I attempted using $direction and simply direction as variables, but it appears to be ineffective.
if (($(window).width() <= 900) && ($(window).width() >= 409)) {
var $direction = 'left';
} else {
var $direction = 'top';
}
$(".softwares").children(".row").each(function(a) {
$(this).delay(150 * a).fadeIn(0, function() {
TweenMax.to($(this), .3, {
$direction: 45 * a,
opacity: 1,
ease: Back.easeOut
})
})
});
After exploring numerous queries on Stack Overflow, I tried implementing [] to resolve the issue, but unfortunately, it didn't work as expected.
I aim to avoid incorporating additional code like the following:
$(".softwares").children(".row").each(function(a) {
if (($(window).width() <= 900) && ($(window).width() >= 409)) {
// opacity: 1, ease: Back.easeOut are extra codes in both conditions
var options = {left: 45 * a, opacity: 1, ease: Back.easeOut};
} else {
var options = {top: 45 * a, opacity: 1, ease: Back.easeOut};
}
$(this).delay(150 * a).fadeIn(0, function() {
TweenMax.to($(this), .3, options) // use options object here
})
});