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…
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:
AWESOME! Thank you @jonathan really sweet and I think very cool for everyone working on (not only) mobile things What exactly you mean by using “relative timelines” ? Curious!
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:
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!
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?
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)
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 . I assume you’re on the latest of chrome/iOS on your devices. But if you got it working then that’s great.
@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…
.
What exactly you mean by using “relative timelines” ? Curious! 