Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Alexey Matlash

ScrollTrigger: pinning and z-index question

Recommended Posts

What`s up, GSAP!

I`ve briefly looked through docs to find any mention of the same issue, but seems like i need to ask it here.
It looks like pin-spacer (wrapper of pinning element) doesn`t copy exact same CSS styles from pinning element. First of all I`m interested in z-index, as I`m developing complex sections` behaviour with revealing, pinning, swapping and covering sections. And missing of z-index in pin-spacer breaks some of my hacks.

Currently, I`m using 3.6.0 you guys gave me a month ago to solve other issues. But it looks like previous versions doesn`t clone z-index as well.

I think I could develop a workaround for my specific problem, but I wonder:
Why z-index and some other styles are not translating to pin-spacer?

While writing this, I`ve solved my issue by setting position: relative (position wasn`t set before) for all my pinning elements. While z-index is still not translated to pin-spacer, it`s layering looks OK. MB It`s some of html/css essentials but nested (in pin-spacer) element`s z-index somehow counts different dependent at various css position values.

OFC, If you request I would add some codepen to better illustrate what is written, but it`s no more an issue.

Link to comment
Share on other sites

Yes, it works great without manually setting position: relative to pinned elements.

As I said, my methods are pretty non-standart. My solution helps me to simulate powerPoint slideshow and standart scrolling. Your lib. build solves the problem, here is 2 screenshots with z-index and without.

after_upd.thumb.png.8509b72af5bd1c397bb631f81fe2dd56.png
Shot-1 (after upd)
Section pointed with blue marker is translateY(-720) (green underline leads you to that value) So for users view this section have pretty same Y as browser-higlighted section (currently on the screen). That current section should reveal us next section, so its z-index should be greater.

before_upd.thumb.png.7386dcd51a89313bb908d5e692a217f0.png
Shot-2 (before upd)
With z-index turned off at pin-spacer`s styles "blue" section stands on top of current. BC of traditional html layering: next child have (z-index) priority. And please note pink highlighting. Pinned element still have proper z-index but it doesn`t affect layering.
before_upd_position.thumb.png.57c0a697b361cbda56983dcf17e98800.png
Shot-3 (before upd. position relative)
until i manually set position relative for all pinned elements and its siblings. Now it counts somehow. without any z-index at pin-spacer

Link to comment
Share on other sites

here`s how it looks like. 
1 sections scrolling normally
2 sections swaps
3 white section reveals picture
 

 

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.

×