I just made this small MD sliding tab. I am using also some JS/CSS from http://materializecss.com and JQuery. I am pretty fine with the results so far. For now I am sliding in the scenes from the bottom. Does one of you JS wizards having an idea how I could slide-in-out the scenes horizontally from left OR from righ according to the tab I am clicking? I think this is not doable without JS…
give a id of destScene_currIndex to your tabs.
e.G. -> START_1 and so on …
then attach this script to the element
var info = element.id.split(’_’), //results in [destScene, index]
newIndex = parseInt(info[1]),//index as nbr
transition;
if(newIndex > window.index){//compare currIndex with new index
transition = hypeDocument.kSceneTransitionPushRightToLeft //go forward
}else{
transition = hypeDocument.kSceneTransitionPushLeftToRight //go back
}
window.index = newIndex; //newIndex now currindex
hypeDocument.showSceneNamed(info[0], transition, 1.1)//show scene
"create window.index = 1 in the head ..." so I left this step out (sorry for my ignorance)…
I have done the rest and the transitions are starting from left or from right depending on which button I push. So this is fine – but only my first scene is transitioning – hope this is making sense Anyhow: I attached the new project – would be great if you have a minute to check it out…
@h_classen AWESOME!!! And no, you are wrong: explaining is not the problem – in fact seems that CODING is not MY strenght Thank you very much for the help! BTW: experimenting with some other stuff from materializecss inside Hype. Really cool stuff that you can make with that combo…
that’s true, but I am building mostly for mobile with local development on the device. I have to see what’s better during the process. The charme is that stuff like some CSS properties (like “pulse”, “waves” or “scale-transition”) are really out of the box. So creating material design elements is really a breeze I will post some examples if I have some spare time …