Z-index interaction

Eyed · March 19, 2020, 10:17pm

Hi,

I try to do an interaction that change z-index between the images (Founder1, Founder3).
you can see the interaction on the div buttons at the bottom hero section…
No matter what i try, its faild

Here is my public share link: LINK
(how to access public share link)

garymichael1313 · March 20, 2020, 1:35am

Hey @Eyed,

You can’t animate the z-index of objects. But do this to get it right:

In the Designer, the layer stack (without z-index set) goes from “Bottom to Top”. So the lowest object in the stack will be first in your interaction, especially if they’re set to absolute.
In the Layers panel, note each item and animate them in the order they’re stacked. The top most item will be last in the animation.
First item in the layer stack (the lowest item) will animate first

This a simple way of figuring out how to move them through your interaction. If you do use z-index numbers. Make the first in the animation to move is the lowest in the #'s; I.e, z-index: 1

Hope this helps. Let me know how it goes

Eyed · March 20, 2020, 8:08am

thanks!

Let me be sure I understand
Actually, I arrange the images in overlays according to the z-index of each image. So far it’s clear to me
But how do I create an interaction that moves them?

IVG · March 20, 2020, 5:03pm

I think you can animate z index on hover - with transitions… add a z-index transition to your element, go to “hover” selector and then change the z-index of the element

ShadowForger · April 24, 2021, 11:48pm

I came across the same issue, and I found a unique way to solve it.

If you notice the transform z-axis usually don’t really work, but it does work on 3d objects.
So what you do is rotate a parent by .00001 degree(degree) and turn on children perspective, then you will be able to change it’s children z axis in the interaction or in style

My logic behind this is that a web page is in 2D form which only have an (x,y axis). There is no z-axis, so you are given z-index which give you the illusion of a z-axis, but all it does change the order of the layers but you are still in 2D form. To get access to a z-axis, you need your object to in the 3D state. So by rotating a 2D parent will allow it to get access to the 3D State, and by turning on children perspective, you turn the 2D parent into a 3D parent, which give its children access to the z axis.

[ OBJECT ] => 2D State
[Change Object z-axis] => Deny, require 3D State to add z-axis
[Rotate Object] => Your object is rotated but is in a 2D state, would you like to make it 3D to make the rotation more cooler and realistic so that it looks like it is rotated in 3D form?
[Yes] => Ok, please turn on Children Perspective to turn 2D into 3D, but if your rotation on all axis 0 degree it will naturally be reverted back into a 2D state
[Turn on Children Perspective] => Object is Capable of 3D State
[Rotate Object .00001 degree x-axis] => Object is now converted into 3D State, Object is given z-axis
[Move Object z-axis] => Granted

For those who don’t know why you want to do this.
Example:
I made a game catalog on a grid where it only show icons on display. When you click it, A description fades in and everything is moved to the center of the screen.

The problem lies where the other icons were on top of the description because of order and layers and I wasn’t able to change it z index through interaction.

I want it so that when click a icon, that icon and its description will be in front of all the other icons

I found that that if i go to transform in style and rotate the grid by (.00001) the display doesn’t change, but you are able to change the z axis on the icon if you turn on children perspective.

So i rotate the grid by .00001, Set children Perspective to 20 then set each icon (div) to click interaction where the z axis will move by +.4 px

Kim1 · November 18, 2022, 10:25am

This is such a great explanation! The only thing that would have improved it is screenshots (for the visual learners)

szollar · April 23, 2024, 10:41pm

I tried to implement this solution, but I get the same behavior as before. Specifically:

I skewed the grid (little page stack) on the x axis by .00001 (I also tried the other ways of crossing into the z dimension but those messed up the interactions)
I set the child perspective to 30 px

Within each cell of the grid, there is a div, each div has an image in it
For each div within the cell, I:

I created a 1st click interaction for each image that scales it 2x and moves it on the x and y axis to cover the other images and on the z axis to 25px
I created a 2nd click interaction that moves the x, y, and z axis back to 0

I’m still getting this behavior:

Here are the screenshots of the skew and child settings:

Thx!
Suzan