Stacking order change when on hover or on click

1

I have multiple graphic square elements that i want to scale up and have text appear when hovered or clicked on, but there’s an issue with my layer stacking order, so it scales up, but is blocked by the other squares, because well thats the way my layers are stacked. But i can’t just relayer my stacks, because then the other one is blocked when I hover over IT. Is there a simple way to tell Tumult Hype to let the hovered element temporarily be higher in stacking order only when hovered over or clicked on?

I don’t know anything about custom behaviour or actual coding, so talk to me like i’m an idiot.

Screen Shot 2017-07-28 at 3.55.19 PM.png1094×380 71.1 KB

2

Hi Andrew!

In the following demo there will be no attempt to explain the JavaScript as You don’t know anything about it. What we will focus on is where to plug in the numbers so You can change the effect of the animations.

Demo here.

Hype Project Demo: z-indexDemo.hype.zip (14.7 KB)

===========================================

There are two “functions” that make things work:

setZindexTop() - used by the “On Mouse Over” handler to bring the rectangle to the top of the stacking order and scale it to a certain factor.

setZindexOrig() - used by the “On Mouse Out” handler to scale the square back to its original size, and return the square to its original location in the stacking order.

Note: An “On Mouse Click” handler is more complex and You indicated a “mouse over” (hover) was fine. So let’s keep it as simple as possible here.

These (2) functions are found in (2) tabs at the top of the “Animation” pane. Click on a tab to show the code for that function.



Here is the code for the setZindexTop() function - called by the “On MouseOver” handler:

window.originalZindex = hypeDocument.getElementProperty(element, 'z-index');
window.originalScaleX = hypeDocument.getElementProperty(element, 'scaleX');
window.originalScaleY = hypeDocument.getElementProperty(element, 'scaleY');
hypeDocument.setElementProperty(element, 'z-index', 100);
hypeDocument.setElementProperty(element, 'scaleX', 1.75, 1);
hypeDocument.setElementProperty(element, 'scaleY', 1.75, 1);

The only parts of this code we are interested in are the numbers in the last three lines. Let’s take them in a couple of chunks…

hypeDocument.setElementProperty(element, ‘z-index’, 100);

The “z-index” is the stacking order of the elements. Typically the first element placed would have a “z-index” of “1”. The next one above it would be a z-index of “2”. A higher number is on top of a lower number in the stacking order. Keep in mind this does not just apply to the rectangles you are manipulating but all elements in your scene; which is why I gave a z-index number of “100” - this number guarantees this rectangle will be on top (unless you have more than 100 elements - pretty unlikely - but if there were more than “100” then make the z-index “500” or whatever it takes).

hypeDocument.setElementProperty(element, ‘scaleX’, 1.75, 1);
hypeDocument.setElementProperty(element, ‘scaleY’, 1.75, 1);

Similar settings just affects a different axis. Here we are scaling the to 1.75x of original size (i.e. 175%). And we are doing this scaling over the course of “1” second. One and a half seconds would be “1.5”.

======================

Code for setZindexOrig() function - called by the “On Mouse Out” handler:

hypeDocument.setElementProperty(element, 'scaleX', originalScaleX, 1);
hypeDocument.setElementProperty(element, 'scaleY', originalScaleY, 1);
setTimeout(function(){ hypeDocument.setElementProperty(element, 'z-index', originalZindex); }, 1000);

All the “scale” & “z-index” settings of the rectangle are returned to their original state. Do note that the “scaling” back effect (in this example “1” second) should be matched by the number in the “setTimeout” portion of the function (last line) the “1000” represents milliseconds - in this case it is 1 second. If it was “1500” that would be the same as “1.5” seconds

Scaling back effect “1” second…
hypeDocument.setElementProperty(element, ‘scaleX’, originalScaleX, 1);
hypeDocument.setElementProperty(element, ‘scaleY’, originalScaleY, 1);

should be matched by the time (in milliseconds) in the setTimeout - 1000 (i.e. “1” second)
setTimeout(function(){ hypeDocument.setElementProperty(element, ‘z-index’, originalZindex); }, 1000);

1 Like
3

This is exactly what I want, except, I want to change the z-index of some other layer than the mouse is being hovered on.

For example, I am hovering my mouse on element A, I want to change the z-index of element B. Is it possible? What part of the above code do I need to change? I believe it’s the ‘element’ part, but, not sure.

4

Your code would just need to reference a different variable. If you were to get it by ID, it would just be something like:

var elementB = hypeDocument.getElementById("myOtherElementID");
//... use elementB instead
hypeDocument.setElementProperty(elementB, 'z-index', 100);
1 Like
5

Yeah, I just came back here to update it that I could get it to work in the same way you mentioned. Thanks a lot.