bitworker
(Alessandro)
July 2, 2019, 8:34am
1
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
MaxZieb
(Loves Hype)
July 2, 2019, 8:59am
2
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 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.
bitworker
(Alessandro)
July 2, 2019, 9:04am
3
Thanks so much, now it’s clear how to use custom functions in Hype… Just starting out!
MaxZieb
(Loves Hype)
July 2, 2019, 9:06am
4
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?
jonathan
(Jonathan Deutsch)
July 2, 2019, 3:46pm
6
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)