Sweep to the right transition

[Jtwa11]

I got the transition to work, but I don’t understand why it only works when I have transform:translateZ(0) on my main div?

http://codepen.io/Jtwa/pen/vNmaYw?editors=110

[Jtwa11]

The problem is the text. I don’t need transform:translateZ(0) and z-index:-1, but without them we can’t see the text.

Can anyone help?

[Beverleyh]

As I understand it (and I’m no expert by any stretch of the imagination), a transform with a value other than ‘none’ triggers a new stacking context, which is relative to that element, rather than the doc root. So it’s a way of creating a local stacking order on that one particular div and its children, without manipulating the div’s stacking context in relation to anything else on the page. If the transform wasn’t applied, you could set z-index:0; on the div instead to achieve the same visual result, but that would then have a knock-on effect with layering of the div in the overall web page.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

[Jtwa11]

Well is there a way to do the same effect a different way?

[Beverleyh]

Without using the transform on the div? See my previous answer re: z-index:0;

I have to ask, why is the current way an issue though?

@Shikkediel, yes “promoting to a new layer” is the other phrasing I came across. I had a fixed position ‘back to top’ button that juddered horrendously when scrolling in Chrome – adding an empty transform promoted it to a new layer and fixed the issue.

Looks like “will-change” will become (is becoming) the preferred property for smooth transforms/animations http://tympanus.net/codrops/css_reference/will-change/

[Jtwa11]

I have no issue with it at all! I’m just trying to understand what is happening. I don’t want to use the code if I don’t know what it’s doing!

I’ve broken down to it’s simplest form. Maybe this will help someone explain it.

http://codepen.io/Jtwa/pen/GpENNB?editors=110

[Beverleyh]

I already have explained it https://css-tricks.com/forums/topic/sweep-to-the-right-transition/#post-209370

Expanding on that, here are the layers as they are painted in order within a stacking context http://www.w3.org/TR/CSS21/visuren.html#layers

Note that backgrounds go right at the bottom.

When we’re talking about your demo, the parent div background is #1, the pseudo background is #2, and the text is #5

[Jtwa11]

@Beverleyh @Shikkediel

I figured it out! Correct me if I’m wrong!

The secret lies behind the negative z-index ! It doesn’t work unless there’s a z-index of -1 on the absolute positioned div.

Even though green layer has a z-index of 1, the purple layer with the z-index of -1 overlays the green. So the stacking order looks like this

Purple (z-index: -1)
Green (z-index: 1)

That’s weird? -1 is not larger than 1 so why does this happen? Well if you change the green layer to have a z-index of 0 the stacking order looks like this

Green (z-index: 1)
Purple (z-index: 0)

This makes a lot more sense! So why does a z-index: -1 overlap the z-index:0 ? And why does the text from the z-index: 1 still show?

Here’s the explanation: Everything in the green layer has a z-index:1, BUT a negative z-index will overlap any background because a negative z-index is the 2nd lowest index! The z-index of “background” is the lowest! Here’s a photo to illustrate the z-index order

https://cdn.tutsplus.com/webdesign/uploads/2013/11/stacking-order1.png

Hope this clears everything up!

[Beverleyh]

What I find really confusing is that you appear to be skipping between referencing your demo http://codepen.io/Jtwa/pen/GpENNB and the illustrative image https://cdn.tutsplus.com/webdesign/uploads/2013/11/stacking-order1.png – and that makes it hard to decipher your explanation.

The secret lies behind the negative z-index ! It doesn’t work unless there’s a z-index of -1 on the absolute positioned div.

Positioned div? You mean the :before pseudo element in your demo.

I think the secret lies more with the fact that a local stacking context has to be triggered on the parent div before the -1 z-index on the :before pseudo causes it to sit atop the orange background of the parent, rather than under it.

The parent div has both a position (set to something other than static) and a z-index applied, which creates a new, local stacking context. This is what the empty transform was doing initially too. The div now contains its descendants, including pseudo elements, so that none of them can ‘escape’, regardless of how negative a z-index is applied to them. The orange background on your demo is therefor the bottom-most layer (#1) and the :before pseudo can now only ever go as a layer above it (not under it) as #2, thanks to the local stacking context.

Even though green layer has a z-index of 1, the purple layer with the z-index of -1 overlays the green.

I don’t understand what your saying here.

What green layer? In the illustrative image? No, the green layer – equivalent to the text in your demo – has no z-index at all.

The text in your demo is layer #5 – the green box in the illustrative image. It does not have a z-index. It appears in the flow/order of other descendants, following the ordering rules in the specs http://www.w3.org/TR/CSS21/visuren.html#layers

What I believe you’re describing is the state of the parent div when no z-index is applied. At that point, the global stacking context is in effect – from the doc root – so the -1 z-index on the :before pseudo allows it to be manipulated within the global stacking context and sit underneath the parent div, which would be in the normal layer flow.

Well if you change the green layer to have a z-index of 0 the stacking order looks like this: Green (z-index: 1), Purple (z-index: 0)

Again, I don’t understand what you’re saying with this. Following the assumption that you’re still referring to the green layer in the illustrative image, which relates to the text in your demo, I’ll reiterate that no z-index is being applied to it.

So why does a z-index: -1 overlap the z-index:0 ?

When you add z-index:0; to the parent div in your demo, a local stacking context is triggered, which means that the child :before pseudo element cant ever go underneath the parent.

And why does the text from the z-index: 1 still show?

Because it is layer #5 according to the ordering rules http://www.w3.org/TR/CSS21/visuren.html#layers

Everything in the green layer has a z-index:1

Um, no. Nothing in the green layer has a z-index. If we’re using the image you found to illustrate, a z-index of 1 would be the red layer (1 is a positive number) within that stacking context.

BUT a negative z-index will overlap any background because a negative z-index is the 2nd lowest index!

“any background”, no.

A child element with a negative z-index will be layered above the background of its parent, provided that a local stacking context has been triggered on the parent.

[Jtwa11]

My entire explantion was based on this demo:
http://codepen.io/Jtwa/pen/GpENNB

Not the animation itself

[Beverleyh]

Based on the above demo? Really? So what green element are you referring to if not the image? The demo only has orange and purple backgrounds to refer to.

And why mention the animation? My response clearly identifies when I was talking about the illustrative image or your CodePen demo – the purple and orange one. They were both linked at the start of my detailed response.

Your explanation is very confusing and very inaccurate in places so I hope my explanation helps clarify things for you.

[Author]

Posts