Can I add inertia to the onDrag "control timeline" feature?


(Dave Green) #1

Hi Everyone,
I am hoping one of you clever people may be able to help.
I am using a persistent symbol as a navigation element and am using the onDrag Control Timeline feature to enable the user to scroll and select a heading. It is all working just fine but was wondering whether it’s possible to add a little inertia so that the navigation element slows to a stop rather than stopping abruptly. The “continue after drag” option isn’t quite right in this case as the menu items list will be quite long.

I have attached a uploaded my very rough proof of concept file here:
Proof of Concept Hype File

If anyone has any idea whether this is possible it would be much appreciated.
many thanks in advance
Dave


#2

Hi Dave, (@macmonkey)

By the way. You can drag a .zip of your file over the reply window and it’ll upload here rather than have it external. And, your dropbox link doesn’t contain the file.

D


(Dave Green) #3

Thanks DBear,
It’s now attached :smile:
Dave

SCC_mobile_poc1.zip (69.6 KB)


#4

OK. cool. What about playing with the transitioning and increasing the length of the animation so that it would play slower

Below is a quick file i made with a custom transition and keyframes to kind of simulate a month chooser on a date picker on an iOS app type scroll effect :slight_smile:

inertia.zip (16.0 KB)

Is this what you were thinking?

D


(Dave Green) #5

Hi DBear

Thanks for your reply, it’s much appreciated, and nice job on the hype file, that works really well :slight_smile: but not quite what i had in mind.
Because i have a long list of headings I want the user to be able to scroll through multiple headings in a single swipe rather than one swipe per heading. So… the functionality is there in my example but I was just wondering whether it’s possible to have the headings slow to a halt when the user stops their drag similar to how the selecting the minutes in the timer in the clock app works on IOS.

Any Ideas?! It seems like it might be possible with some of that javascript secret sauce but I have no idea how :wink:
Thanks again
Dave


#6

Hi Dave,

How are you at applying the secret sauce? :wink:

There are probably a few plugins that could do what you say. One I know of is jQuery.kinetic

If you need any help applying it to your project let me know. Just bear in mind you will have to call your function on scene load for all of your scenes or possibly add it to your head HTML in a document.ready function.

D


(Dave Green) #7

Hi DBear,
Thanks for the link, that looks ideal. Do you know if it would work inside a persistent symbol?!
It would seem that I suck at applying the secret sauce. I watched a tutorial about using jQuery in Hype but I can’t seem to get it to work for me. My steps are:

  1. Add element to be dragged onto the canvas
  2. Go to the info panel and give it a unique id e.g. “box1”
  3. Go to the resources tab and add jQuery.js
  4. then add jQuery.kinetic.js
  5. go to the scene tab and add on scene load run javascript
  6. Create a new function and add the following script:
    $(document).ready(function(){
    $("#box1").kinetic();
    });
  7. Test file

I’m sure it’s something obvious that I 'm not doing, but if you could point me in the right direction it would be much appreciated.
Dave


#8

Hi Dave,

Not at my computer right now but I’m thinking most of what you’ve done is ok. In your new function don’t use document.ready just add the code as

$("box1").kinetic({
 //here place your options

});

Also, the contents of your element (“box1”) must be bigger than the element and also that the element’s visibility is hidden in the inspector. If you’d like I’ll include a document in a bit once i’m back at my computer.

D


#9

Hi Dave,

jquery-kinetic.zip (38.1 KB)

Have a look around to see what I did here. Instead of using ID’s a used a CLASS so that I could apply it to more than one element

D


(Dave Green) #10

Hi DBear,

Thats fantastic!! It would appear that you are indeed a master of the secret sauce :smile:
Using class instead of id’s is a great time saver.
The only thing I’m stuck on now is having clickable buttons inside the container that don’t activate whist the user is dragging.
I found the following code that would probably work if I put it in the right place but again I am coming up short:

$('#wrapper').kinetic({
filterTarget: function(target, e){
    if (!/down|start/.test(e.type)){
        return !(/area|a|input/i.test(target.tagName));
    }
}

});

I tried putting the filterTarget part inside your existing drag() function beneath your maxvelocity line but it didn’t seem to work out for me.
If there’s any chance that you can enlighten me that would be very kind. But if you don’t have time I will understand you have been more than generous.
Thank you once again
Dave


#11

Dave,

To be honest the filterTarget is not very well documented on how to apply it. It is a little confusing but it is basically a regular expression that tests the type of mouse event and then tests the target tag and then returns it. The whole thing must return false to disable the drag.

for example if you put

filterTarget: function (target, e) {
return !$(target).is("img");
}

This returns false and prevents the drag happening on that type of element but doesn’t prevent it on other elements with different tags.

I’ll have a look into this tomorrow and see if there is a workaround to work in Hype. The problem here is the way elements are created in Hype and how they are nested, etc.

I’ll try and get back to you soon.

D


(Dave Green) #12

Hi DBear,
Many thanks once again. And if you did get a chance to figure that out that would be great… but if it turns out to be a big ol’ can of worms that you are opening then please feel free to step away :smile:
I am once again very grateful for all your time and help that you’ve given me .
Dave