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.
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.
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
Thanks for your reply, it’s much appreciated, and nice job on the hype file, that works really well 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
Thanks again
Dave
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.
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:
Add element to be dragged onto the canvas
Go to the info panel and give it a unique id e.g. “box1”
Go to the resources tab and add jQuery.js
then add jQuery.kinetic.js
go to the scene tab and add on scene load run javascript
Create a new function and add the following script:
$(document).ready(function(){
$("#box1").kinetic();
});
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
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.
Thats fantastic!! It would appear that you are indeed a master of the secret sauce
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
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.
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
I am once again very grateful for all your time and help that you’ve given me .
Dave
Hi there, just picking up on the original topic here as I would like to achieve the same and I’ve scoured the forums without finding a solution.
I have a doc (attached) using the built in ‘On Drag > Control Timeline’ function which works fine but I would really love to get some inertia on the drag so it feels more like scrolling in a device browser.
I guess that it isn’t possible to add inertia to the built in function but I’m wondering if there is a javascript alternative that I can run instead that has inertia settings? Would be really great to crack this one if possible.
Thanks in advance, any help appreciated as always!
Rich
First, you can grab the "Gesture" data with Hype's API. Then, you can move it with the Physics API. If you zero out the gravity and give it some air drag, using "Velocity" might achieve the effect you're looking for...
That's just theoretical though. I haven't actually tried it.
Well, I’m designing a mobile game where users scroll through a scene by dragging and I want full control over what happens when at different points along the scroll.
The game has to be responsive (using a centre pinned, expand-to-fill scaled symbol) so that I don’t have to create multiple versions for different mobile screen sizes, which is why I’m discounting waypoint methods for now but I could be overlooking something.
This seems to me to be the most accurate way of knowing exactly when and where animations will trigger for a user (eg. an element that animates when scrolling past a specific part of the screen on any size device) - but that’s just my take on it.
‘continue after drag’ just animates to the end of the timeline doesn’t it? I want the user to be able to scroll to any point in the timeline at will, backwards or forwards, and the animation should ease to a stop. Are there ‘pausetimeline-behaviours’ that can achieve this? Thanks!
I mean it should appear that things happen at certain parts of a scroll down but in reality is accurately timed/positioned by dragging a timeline.
Ok well, I think I'll experiment some more with waypoints and see how accurate I can be across different sized devices. Also checking that link thanks Hans!
If anyone has any other suggestions regarding my initial plan, I'm all ears...
but not quite what i had in mind.
