How to change element order dynamically?

Problem: Hello, I have two overlapping symbols that should bring themselves to the front, when a mouse hover happens. Is there a way to let Saola Animate change the order while the animation runs? Thanks a lot!

You can changed the zIndex of an element using JavaScript:

doc.getElement("bottomDiv") = 1;


Another method is changing translateZ property in Properties pane > Position & Size tab > Transform section.


Thanks a lot, got it working. Never dealt with zIndex and mixed up the order asc vs. desc. Tanks!

Nevertheless I wonder why zIndex can’t be animated within the GUI?

Saola Animate already allows animating translateZ within the GUI, so we don’t support zIndex.
translateZ can change not only the display order but also provide 3D perspective effect.

I don´t understand how translateZ can be a substitute for zIndex. It scales when changing, no?

Increasing translateZ will move the element towards the viewer, so the element will look larger.
But this effect is subtle if translateZ is changed just several pixels.