Drag Transition


(Paul Baird) #1

Hi All.

We’re working on an animation that is for desktop and also mobile devices… We detect the screen size and present a mobile sized scene upon detection of a mobile device. Thats working

We have 8 scenes within the mobile part of the animation… All the backgrounds are the same. On mobile there is a Swipe transition from scene to Scene – Its very easy to implement and works well –

We have been asked to also implement a drag transition (Im sure people are familiar with this on mobile where you hold your finger on the screen and move left and right and you see the page before and after) - Only after releasing at a certain point will it then transition.

Im looking at the drag option in hype. It can control the timeline however we have different scenes

Has anyone invented or got an easy way to do a drag scene transition – I would be very grateful if they have as it will save us a lot of design time ?

many thanks


(Hans-Gerd Claßen) #2

making each scene a symbol, stitch all symbols together in one scene -> may be a way to go :slight_smile:you may handle preloading yourself


(Lucky) #3

You can do on drag run JavaScript function and in there you’ll see the hype built in functions. Under drag you’ll see drag state. There are 3 - start,move and end.

In the head HTML you can declare a global variable.

Then in the function you can do

If hype event is start
Startposition =client x
Else if hype event is move
Move position = client x
If move position-startposition> 50
Move to next scene

Really sorry replying from phone but that’s the general idea so on move you update the move position and if it’s a positive number and bigger than 50 or something small it means they’re swiping right so transition scene right, and if it’s -50 they’re swiping left so you transition left. It’s definitely more complicated but it will let you use different scenes

Hope that helps


(Hans-Gerd Claßen) #4

a playcase :slight_smile:

dragScene.hype.zip (52.4 KB)

all scenes are placed as symbols in one scene. few classes via ui attached. js will handle the rest. no jquery.
not well tested (just safari desktop)


(Paul Baird) #5

Thanks for that will give it a try


(Manny) #6

If you have time, can you list the steps to turning a scene into a symbol and then stiching the symbols together? Will the animations within the scenes remain after they become a symbol? Any help is greatly appreciated.


(Manny) #7

Acutally, I figured out how to turn the scene into a symbol. But I’m still having trouble stiching the symbols together. Any help?