Jump to content
GreenSock

therookie

Animating Images - When one goes behind another, it disappears

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

Hey guys,

 

I am trying to animate some photos but when one goes behind the other (as soon as the edges touch) it disappears. Any thoughts on this?

images.zip

Link to comment
Share on other sites

Hi and welcome to the forums.
 
The issue has to do with the not too easy understanding of the stacking order given by the z-imdex property, I remember having quite a hard time getting along with it.
 
The thing is that your element resides inside a container, which is a DOM element. This container doesn't have a defined z-index value, therefore is given an auto one, even if it doesn't have a position property defined (relative, fixed, absolute, etc), I know, what a nightmare. According to the specification in this case a 0 value is given and since the element being animated has a negative value it gets behind the container. You can check this if you comment out the background property of the container.

 

The solution is to tween your element's z-index to a smaller value than the others but not negative:

window.onload = function(){
    var red = document.getElementById("s1");
    var yellow = document.getElementById("s2");
    var lightblue = document.getElementById("s3");
    var lineblue = document.getElementById("s4");
    var grey = document.getElementById("s5");
    TweenMax.to(red, 2, {rotationY:360, zIndex:2});
    TweenMax.to(yellow, 2, {x: -75, zIndex:1});
}

Like that the yellow shirt gets behind the red one as the tween progresses and it doesn't suddenly disappear.

 

In order to know a little more about the z-index property read the following:

http://www.w3.org/TR/CSS2/visuren.html#layers

 

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

That totally makes sense. I didnt even consider the containing divs z index. Cheers!

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.
×