Dynamic changing Z order

1

Hello,

I’m new to Hype, but already developing my first project with success!

I have 3 elements that call other scenes. I have an animation for each element that scale up filling screen, but I need to have the clicked element over the other two, because it will scale behind. Since I don’t know which element user will click, should it change Z order when clicked?

Thanks,
Ulisses

2

Hi,

Can you post a project to show us what you have so far. This will make it easier for us to give you an answer that works for you and does not incur many more questions & answers due to us not understanding how you need things to work.

Cheers

3

https://dl.dropboxusercontent.com/spa/oki0d2lqz056k3j/Exports/Untitled/Untitled.html

A simplified version to show what I need, when clicked, the rectangle should scale over the other 2, like the blue one.

Tks,
Ulisses

4

Give the rects the same class name and then iterate over them to set the zIndex to 0.
And then set the zIndex of the click element to a higher index number.

The elements also have an id each which match the timeline for the resizing for each.

	var scalers = document.getElementsByClassName('scalers') //— WE GET AN ARRAY OF THE CLASS OBJETCS

for (i = 0; i < scalers.length; i++) { 

hypeDocument.setElementProperty(scalers[i] , 'z-index', 0)
}

hypeDocument.setElementProperty(element, 'z-index', 1000);

hypeDocument.startTimelineNamed( element.id, hypeDocument.kDirectionForward)

OverIay_zIndex.hype.zip (16.6 KB)

3 Likes
5

Great!

Thank you for the help!

Ulisses