Jump to content
GreenSock

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

How to reference objects zIndex ?

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

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

Link to comment
Share on other sites

Nevermind, I think I just found it out! 

 

myVariable.style.zIndex seems to do the trick! 

  • Like 1
Link to comment
Share on other sites

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.

:)

 

  • Like 3
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.
×