Depth in timeline

[MaxZieb (Loves Hype)]

You can use the layer and position your element twice on the timeline and use the display property to hide one and show the other.

You could also create a function in Hype on scene init:

hypeDocument.setDepthOnElement = function(depth, selector) {
    var sceneElm = document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
    var elm = sceneElm.querySelector(selector);
    this.setElementProperty(elm, 'z-index', depth);
}

Now use this in your head:

Hype Command Pipeline

Hype CommandPipeline [Hype-commandPipeline] Usage and inspiration [image] As I saw this approach used in simpler ways on the forum. The idea behind it is that one maps different function calls originating by triggering custom behavior onto the same handler function and then uses event.customBehaviorName to run an action. This allows you to call functions in the hypeDocument scope using the timeline or actions panel without wrapping them in a Hype function first. This is specially useful for…

From here on out you should be able to use timeline commands triggering a custom behavior that looks something like this:

setDepthOnElement | 1 , ".myRedSquare"

Code is untested as I am on the road and only have access to my iPhone. Should work.