How to change element order dynamically?

clkdiv · August 25, 2019, 2:51pm

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!

mackavi · August 25, 2019, 9:12pm

You can changed the zIndex of an element using JavaScript:

doc.getElement("bottomDiv").dom.style.zIndex = 1;

ToanLS · August 26, 2019, 2:01am

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

Regards

clkdiv · August 26, 2019, 6:47am

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

clkdiv · August 29, 2019, 6:34pm

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

ToanLS · August 30, 2019, 2:31am

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.

clkdiv · August 30, 2019, 5:07am

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

ToanLS · August 30, 2019, 6:12am

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.

Regards