Jump to content
GreenSock

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

z-index on animated image

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 all, once again apologies for the lack of Codepen link, it keeps complaining that I am spam when I try to fork, even though I am not even logged in.  Anyways, I have made a JSFiddle instead.

 

I am hoping my issue is pretty simple, not even sure it is related to GSAP.  So I have two sections.  Within the top section, I have an image which I have placed at the bottom using flex.  The idea is simple, as I scroll down, the image should slide up into place.  

 

I have got this to work, but I have noticed that when the image is within section 2, it sits on top of this section, instead of behind it.  Ideally, you should not be able to see any of this image within section 2.  I have tried giving some z-indexes, but this does not seem to make a difference.

 

Is there any way to stop the animated image from sitting on top of section 2?

 

Thanks

See the Pen by z69w9u4g (@z69w9u4g) on CodePen

Link to comment
Share on other sites

Hi @nick2price :)

 

You are correct - this has nothing to do with GSAP. I'm honestly not sure where the z-index problem might be since you're loading the Bootstrap CSS along with your own style sheet. It's a lot to look through and I've never used Bootstrap. My advice would be to try it without Bootstrap even if it isn't pretty. If the z-index works correctly without that external CSS, you'd at least have a place to look. Here's a basic example of an image sliding up from behind the next div. You'll notice setting a z-index is not even necessary because of the natural stacking order of the DOM elements. 

 

See the Pen gXOMZV by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

:)

  • Like 2
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.

×