Swipe between scenes – the holy grail of mobile

Mobile
1

Hey Guys,

I was doing a lot of search here in the forums regarding left/right swiping to load a new scene. I am aware about the “jump to scene” functions and the “regular” slide in/out page transitions triggered by this actions. My problem is – theyjust don’t feel “native”. Native swiping between views on mobile and also modern swiping frameworks like swiper.js will act WHILE you swipe on your screen – and not AFTER you finished your swipe. I am pretty sure that most of you are knowing what I mean…

I saw a few workarounds here (using the drag function and timelines) or by creating symbols from the pages, mounting those symbols one one master page and using js to swipe between the symbols etc. But these are workarounds an not really cool/usable if you will have to deal with a lot of content (pages) in Hype – let’s say for a digital magazine.

I did a LOT of experiments regarding this:

– trying to use swiper.js (which is one of the best solutions imho).Unfortunately this will definitely not work out of the box, because of the way how Hype is constructing the DIV structure
– cutting my projects in different “pages” and manually injecting the pages (in Angular.js) in a swiper/ionic structure. This is working, but it is really a LOT of work and a pain for larger projects
– the last thing I was playing with was dragend.js (https://github.com/Stereobit/dragend). This is looking for me somehow promissing, but I don’t have the js knowledge to try a serious implementation in Hype. According to the dragend.js documentation:

the structure:

<div id="demo">
  <div class="dragend-page"></div>
  <div class="dragend-page"></div>
</div>

Seems to be achievable with Hype:

<div id="index_hype_container">
<div class="HYPE_scene"></div>
<div class="HYPE_scene"></div>
<div class="HYPE_scene"></div>
...
</div>

calling dragend.js:

new Dragend(document.getElementById("demo"), options);

So this could be maybe something like:

new Dragend(hypeDocument.getElementById("your_hype_container"), options);

since dragend offers something like this for the options parameter: “pageClass: classname selector for all elments that should provide a page” – taking “HYPE_scene” as the classname could be working…?

Have to say that I was not able to put all this together :slight_smile: But maybe one of you guys with some more talent for JS could give this a try? Here is what I did:

https://dl.dropboxusercontent.com/u/75478515/swipe_1.zip

I would really see a nice swiping behavior implemented natively in hype, but I am afraid that this could take a long time (if ever). But for the mean time – did one of you guys found a working solution for this?

1 Like
2

hi,

just use advanced export to separate scenes to documents (you should point to a common runtimeurl).
each div will be a page. put the divs in one html-file, add the dragend wrapperdiv. do the easiest setup from drag end to start testing.

3

Thanks @h_classen,

this should work – but it is similar what we are already doing with AngularJS… I was hoping to be able to export the whole project “as it is” and let dragend do the rest. The project I have posted “should” be doing this (at least I don’t get any error messages) – but it is simply not working and I don’t know how to debug it further :slight_smile:

Thanks anyhow!

4

I won't make promises (things can sometimes get pulled), but code has been written :wink:.

3 Likes
5

@jonathan Hey Jonathan, I wrote you a PM regarding this – did you got the time to read it?

6

I was asked to share some of the things I have done with swiping. Here is a little example with swiper.js … I have posted here a complete example with two different transitions (slide and cube). Just open the index.html and have a look. Play around with the swiper.js API – is quite impressive :slight_smile:

swiper_js.zip (699.7 KB)

3 Likes
7

@sandor Wow thank you so much! This is ideal for what I need right now!

Do you know if there is a way to make the page load from the middle scene (2_hype_container) from your example?

No worries, figured it out!
swiper.min.js - “initial” to watever page index you want.

8

Yeah - just play around with the swiper.js API – it is pretty cool…

9

Just curious, but is there any news regarding this? I’m working on a lot of digital magazine and I’m able to fake a page transition with the built in “On Swipe Left” and “On Swipe right” actions but it’s not quite there, unfortunately.
I haven’t tried using swiper.js yet, but I would love for this to be a standard feature in Hype :slight_smile:
… oh and a feature to export to .hpub as well :slight_smile:

10

There will be news on it soon :wink:.

2 Likes
11

Please see:

12

This is great! It works like a charm :slight_smile: Had a bit of trouble with vertical scrolling on long scenes, but a simple style=overflow:scroll on the “swiper-slide” div solved that issue. Thank you for posting this.

13

I may be creaking along in my old-school wheelchair, but there’s no reason why you can’t drop in a pause action at the logical end of a scene, animate the transition after the pause, place a jump action at the end, and trigger the sequence with a drag.

DragTransition.hype.zip (18.7 KB)

14

Sorry if this is sounding too ironical, but just compare :slight_smile: This is what we expect to see @jonathan – hint :slight_smile:

1 Like
15

Sure, it’s one way to do it, but it gets a bit of a hassle to copy paste everything from scenes if you have a lot of elements on each scene. It’s a lot easier if it was done with code/actions IMO.

16

You are absolutely correct. It is definitely is easer via JS. The “mechanical" approach is for non-coders.

Coming from a background where the loading of every object can be controlled individually by just dropping a script into a frame, things are not quite as easy with Hype.

I learned to load what was needed and then do a switcheroo - if the scene starts with a number of objects and then other objects appear or actions happen, all I have to worry about are those few objects. The user never knows that they’ve switched scenes because the visuals haven’t changed. When taking this mechanical approach, I simply duplicate the scene, toss the stuff I don’t need, then build the rest of the scene.