Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sorciereus

Gsap in a Conditional Statement

Recommended Posts

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! 

Link to comment
Share on other sites

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.  :)

 

 

}

  • Like 1
Link to comment
Share on other sites

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)

:)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×