Streaming live at 10am (PST)

Layers changing order when I refresh or reenter project

Hey

I have created a night/day parallax rotation effect and whenever I refresh the page or exit the project the ‘Right Cloud’ and ‘Left Cloud’ layers (inside each ‘Rotator’ Div) always move behind the mountain layers which completely ruins the effect. They need to move in front of all the other elements.

Can anyone confirm this is happening for them and if it’s just being glitchy and won’t actually do this when the website is live? I’m using Chrome on my Mac.


Here is my site Read-Only:

https://preview.webflow.com/preview/argun-dc-c1097dad7ca66277-92a5a4c1f0d4e?utm_source=argun-dc-c1097dad7ca66277-92a5a4c1f0d4e&preview=8b740bc516e10ebc48dc30ddecdc12ce

1 Like

Hello @Reece_Gunningham

Try setting specific z-index for all elements. See here > https://www.loom.com/share/872f7a95a50147588f9fb2f044c381d9

Hope this helps :webflow_heart:

Hi @PiterDimitrov

I have done this and still experiencing the same issue. There’s no visual change to order of elements when I change the z index like there is in your video. Plus, I notice in your video that the cloud is in the correct position at the beginning of the video so it must just be a bug or something wrong with my browser?

1 Like

Hmmm…looks like a bug def

Hey

I’m really struggling with this as it’s just getting worse. I think I will have to contact Webflow directly and point them to this thread.

I’ve come into my project today and everything is a mess. I’ve tried restarting my browser and computer but no change. The layers are not in order relative to their z index, nor do they move when I change the z index or drag and drop and finally the nav overlay and hero text is completely missing when I preview, everything just appears to be glitching out. See attached screenshot of how it looks for me when I preview.

I don’t know why this keeps happening or how am I supposed to work when everything is like this?

Read only link:

https://preview.webflow.com/preview/argun-dc-c1097dad7ca66277-92a5a4c1f0d4e?utm_source=argun-dc-c1097dad7ca66277-92a5a4c1f0d4e&preview=8b740bc516e10ebc48dc30ddecdc12ce

1 Like

Try doing everything from zero. It’s gonna take time, but some times starting from scratch can help a lot.

1 Like

Thanks for all of your help here, @PiterDimitrov! :bowing_man: Extremely helpful! :pray:

@Reece_Gunningham - Thank you again for reaching out!

This is definitely a tricky problem to solve and is one of many 3D animations like this can encounter. It’s known as Z-fighting; you can learn more on it here: https://en.wikipedia.org/wiki/Z-fighting

Essentially, they are intersecting planes that are competing for the same z-index values. You’ll need to increase the z-index so they don’t intersect while rotating.

This solution can help, though it may not resolve the issue for all browsers

3 Likes

Solved :smile: it was the z index in the transform window that was messing things. I’ve reset and everything looks good for me now.

Thank you both, the support here in the forum is great.

1 Like

Happy to hear! Closing the topic :webflow_heart: