How to reference objects zIndex ?

[kbeats 19 Likes (Newbie)]

Hello, I am yet again back at the forums with what (I'm hoping) is a very simple question.

 

With the help of this forum, I was able to achieve the effect I was aiming for with this codepen - 

See the Pen mGqLKJ by kbeats (@kbeats) on CodePen

I'm taking this logic and applying it to an HTML page which I'm then embedding into an Adobe Captivate project, and it is working well! However I just noticed that's it's possible to 'zoom' both items at the same time, and I'd like it so that the user can only 'zoom' an item if the other is at it's normal size. 

 

My first thought was to add a statement to if my statements, saying something like the item should only 'zoom' if the ID matches and the other item's zIndex is set to the initial number (2 in this case). 

 

So I tried writing it like this - 

 

window.addEventListener("mousedown", function(e){
    if(e.target.id=="image2" && image1.z-index==2){
        tl_2.reversed() ? tl_2.play() : tl_2.reverse();
    }
})

 

However, that is breaking the animation. I guess my question is how can I reference the zIndex of an item like this? I know how to set it using TweenLite.set, but I'm not sure how to just call to it and check if it equals the proper number. 

 

Many thanks! 

See the Pen mGqLKJ by kbeats (@kbeats) on CodePen

[kbeats 19 Likes (Newbie)]

Nevermind, I think I just found it out! 

 

myVariable.style.zIndex seems to do the trick! 

[PointC 8,599 Likes (Superhero)]

Yep, you got it. element.style.zIndex should take care of that logic for you.

 

I also wanted to point out the isActive() method:

https://greensock.com/docs/TimelineMax/isActive

 

That will allow you to prevent additional clicks while a timeline is playing. Maybe it could be helpful for your project.

 

Happy tweening.