Slider with proper right and left transition

Using JavaScript with Hype
1

I am implementing a simple slider, basically there are some dots on the bottom of each scene and each dot has an action attached to it (goto scene number).

My problem is that I would like to apply a different transition based on the current selected scene. So for example if I am in scene 1 and I press the 2nd dot then a Push (Right to Left) transition should be applied. Otherwise if I am in scene 2 and I press the 1st dot then a Push (Left to Right) transition should be applied.

How can I accomplish this behaviour?

2

I would suggest using Javascript.

Get the current scene name using the hypeDocument.currentSceneName() . And the also use Javascript if else clause or Switch statement to determine and control the slide using:

hypeDocument.showSceneNamed(sceneName, optionalTransition, optionalDuration)

Changes to the specified scene. If the optionalTransition is not specified it will default to the instant transition.

Valid transition constants:
hypeDocument.kSceneTransitionInstant
hypeDocument.kSceneTransitionCrossfade
hypeDocument.kSceneTransitionSwap
hypeDocument.kSceneTransitionPushLeftToRight
hypeDocument.kSceneTransitionPushRightToLeft
hypeDocument.kSceneTransitionPushBottomToTop
hypeDocument.kSceneTransitionPushTopToBottom

optionalDuration is given in seconds; the default value is 1.1.

1 Like
3

Thanks a lot, it works really well now.

1 Like