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);