Gsap in a Conditional Statement

[sorciereus 5 Likes (Newbie)]

Hi there. I'm trying to call some code on an interaction, for example,on a close button click, but I want the code to execute only if certain conditions are met. I think I might have formatted that portion (the if statements) as AS3 (as that's what I'm more comfortable with). Can you take a look and tell me why my if statements aren't firing? It's a huge piece so a codepen would be tricky to recreate, but here is the code in question, hopefully it's enough to solve:

function minimizeShoe()
{
//TweenMax.set("#plus1", {css:{zIndex:501}});
TweenMax.to("#panel2_box1", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:0, delay:.2, transformOrigin:"left bottom", onComplete:layerShoe});
TweenMax.to("#panel2_info1", .15, {y:"+=128", delay:.1, force3D:false});
TweenMax.to("#plus1", .35, {y:"+=386", delay:.2});
TweenMax.to("#plus1_2", .35, {rotation:"-=90", delay:.2}); 
scale1.removeEventListener('click', minimizeShoe, false);




}


function minimizeJacket()
{
//TweenMax.set("#plus2", {css:{zIndex:501}});
TweenMax.to("#panel2_box2", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:167, delay:.2, transformOrigin:"left bottom", onComplete:layerJacket});
TweenMax.to("#panel2_info2", .15, {y:"+=128", delay:.1, force3D:false});
TweenMax.to("#plus2", .35, {y:"+=386", x:"+=168", delay:.2});
TweenMax.to("#plus2_2", .35, {rotation:"-=90", delay:.2});  
scale2.removeEventListener('click', minimizeJacket, false);


}


function minimizeFitbit()
{
//TweenMax.set("#plus3", {css:{zIndex:501}});
TweenMax.to("#panel2_box3", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:333, transformOrigin:"left bottom", onComplete:layerFitbit});
TweenMax.to("#panel2_info3", .15, {y:"+=117", delay:.1, force3D:false});
TweenMax.to("#plus3", .35, {y:"+=386", x:"+=336"});
TweenMax.to("#plus3_2", .35, {rotation:"-=90"});
scale3.removeEventListener('click', minimizeFibit, false);


}


function layerShoe()
{
scaleText1.style.display = "none";
TweenMax.set("#plus2", {css:{zIndex:501}});
TweenMax.set("#plus3", {css:{zIndex:501}});
TweenMax.set("#panel2_box1", {css:{zIndex:500}});


scale1.addEventListener('click', scaleShoe, false);
scale2.addEventListener('click', scaleJacket, false);
scale3.addEventListener('click', scaleFitbit, false);


expandBtn1.addEventListener('click', scaleShoe, false);
expandBtn2.addEventListener('click', scaleJacket, false);
expandBtn3.addEventListener('click', scaleFitbit, false); 
}


function layerJacket()
{
TweenMax.set("#plus1", {css:{zIndex:501}});
TweenMax.set("#plus3", {css:{zIndex:501}});
scaleText2.style.display = "none";
TweenMax.set("#panel2_box2", {css:{zIndex:500}}); 


scale1.addEventListener('click', scaleShoe, false);
scale2.addEventListener('click', scaleJacket, false);
scale3.addEventListener('click', scaleFitbit, false);


expandBtn1.addEventListener('click', scaleShoe, false);
expandBtn2.addEventListener('click', scaleJacket, false);
expandBtn3.addEventListener('click', scaleFitbit, false);
}


function layerFitbit()
{
TweenMax.set("#plus2", {css:{zIndex:501}});
TweenMax.set("#plus1", {css:{zIndex:501}});
scaleText3.style.display = "none";
TweenMax.set("#panel2_box3", {css:{zIndex:500}});


scale1.addEventListener('click', scaleShoe, false);
scale2.addEventListener('click', scaleJacket, false);
scale3.addEventListener('click', scaleFitbit, false);


expandBtn1.addEventListener('click', scaleShoe, false);
expandBtn2.addEventListener('click', scaleJacket, false);
expandBtn3.addEventListener('click', scaleFitbit, false); 
}

function ifStatements(){
if(scale1.position().y == 0) {
minimizeShoe();
}


if(scale2.position().y == 0) {
minimizeJacket();
}


if(scale3.position().y == 0) {
minimizeFitbit();
}
}

function exitHandler(){ ifStatements(); }

 

scale1, scale2, and scale3 are all variables of divs that get moved to the top - I want that checked with the if statement, and then it minimized using the minimize function I've created. It's all working great except the if statements they aren't executing properly. Hopefully this makes sense what I'm asking! 

[PointC 8,599 Likes (Superhero)]

Hi there sorciereus  ,

 

Try these:

if(scale1.offset().top === 0) {
minimizeShoe(); 
}

if(scale1.position().top === 0) {
minimizeShoe(); 
}

if(scale1.offsetTop === 0) {
minimizeShoe(); 
}

The first two are jQuery and the third is plain JS. The jQuery position() and offset() only return left and top properties. 

 

 

}

[PointC 8,599 Likes (Superhero)]

I almost forgot - you can also use this if you need all the coordinates:

var p = scale1.getBoundingClientRect();
console.log( p.top, p.right, p.bottom, p.left)

[sorciereus 5 Likes (Newbie)]

Thank you. Was needing the pure Javascript answer. Just didn't have the syntax quite right. Appreciated.