Depth in timeline

Hi to everyone, anyone knows how to animate or work in timelines with depth without Javascript? I accomplished the result, but I think there is a better way!

this is by code: hypeDocument.setElementProperty(element, ‘z-index’, 1)

Thanks to everyone anyway

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:

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.

Thanks so much, now it’s clear how to use custom functions in Hype… Just starting out! :sweat_smile:

Well this is not the usual way. It’s a workaround for the lack of Hype offering to call arbitrary functions with custom parameters from within the GUI.

1 Like

@jonathan @Daniel I wish it is possibly on the radar for version 4.5?

Sorry, this is a valuable feature to add, but will not be for 4.5. (Mainly because we don’t know a good way to do it within the UI and HTML constraints)