Touch and Multitouch with interact.js

ios

#1

Hey Guys,

I am experimenting with a nice and slick js library called interact.js (http://interactjs.io). The library has some really nice features like “inertia”, pinch to zoom, pinch-rotate etc. etc. Actually everything that is needed if you are designing for mobile devices. Implementing this with inner-html is a no brainer – but as always, would be amazing if this could be used by simply assigning an ID and a class to a hype element to make it interactive.

I dropped a small demo using the lib in inner html so that you can play around a bit if you like…interact.zip (36.8 KB)

I suppose that this could be tricky because of the way how hype is creating the div-structure (but maybe I am wrong). I found here in the forums a demo that is using “kinetic” – a JQuery plugin that is offering inertia and I also implemented another plugin that is more mature than kinetic – “pep” (http://pep.briangonzalez.org) – but having something like interact.js working on native hype elements would be really, really nice…

So any idea anyone? :slight_smile:


(Jonathan Deutsch) #2

Interact has a really great API for integration with Hype! Their code has a pretty arbitrary listener, so the only thing to do is to set it up to use the Hype API’s setter/getter methods.

Here’s an example of it using a native Hype element and hooking into the Hype runtime:

Interact.hype.zip (31.7 KB)

With this you could even use things like relative timelines and it would work correctly :smiley:.


#3

AWESOME! Thank you @jonathan really sweet and I think very cool for everyone working on (not only) mobile things :slight_smile: What exactly you mean by using “relative timelines” ? Curious! :wink:


(Jonathan Deutsch) #4

Typical animations have a starting keyframe and an ending keyframe with absolute values. The first keyframe in relative timelines have the meaning of “wherever it is at right now” rather than the explicit value. More info:

http://tumult.com/hype/documentation/3.0/#absolute-and-relative-keyframes


#5

Thanks I got the concept of relative timelines. Just don’t got it what you would/could do there with interact :slight_smile:


(Jonathan Deutsch) #6

More specifically I was just bringing up that relative timelines require that the Hype runtime gets updated via the setElementProperty() call that I use, without it they would not work. The UFO example in our gallery doesn’t use drag and drop but is a good illustration of having unordered but fixed points that could be visited. If your document also had specific targets or some sort of animation to “put away” the element that went to a specific spot it might be useful!


(Luca Maroni) #7

Hi Jonathan. your sample is not working if you try to run for example in google simulating ipad. or also if you try to run it on ipad directly.

it play nice on desktop but not on mobile with taps.

did you have some advice for this issue? thank you in advance


(Jonathan Deutsch) #8

My direct example appears to work for me in both contexts. Are there any console log errors? Did you make any modifications or are you running it as-is?


(Luca Maroni) #9

Thank you for your reply. I downloaded you sample, saved on my Mac and exported the sample as html without doing any change on it. then executed in google chrome using inspector to simulate iPad pro. no error in console but drag and drop is not working. just start dragging the element and it stop immedialty. I’m using Hype 3.6.3

I had other sample working since i was using interactjs for other projects with hype 3.5.x without problems and now I’m not able to make the same on new projects using hype 3.6.3. it could depends from hype versions?

i solved adding a simple function that does nothing on your element within the “on drag” gesture. Could be some conflict within the drag gesture between interact e new hype? see attached
Interact-mod.hype.zip (32.8 KB)


(Jonathan Deutsch) #10

I can’t think of any specific changes from 3.5 -> 3.6… the fact that it works for me doesn’t help figure it out much :slight_smile:. I assume you’re on the latest of chrome/iOS on your devices. But if you got it working then that’s great.


#11

@maronl Hi Luca, I have also made some pretty good results using the greensock library (draggable) specially with their “throwable” plugin (this one is a payed module). Very easy to implement in Hype and offers everything the hearth needs for draggable/scrollable stuff including nice inertia etc…