Jump to content
Search Community

Gsap in a Conditional Statement

sorciereus test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • Solution

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

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.
×
×
  • Create New...