In a project I’m working on, I have a row of rectangles that trigger timelines On Mouse Over.
In a desktop browser this works perfectly (similar to running a finger up and down the white keys on a piano).
However, the prototype I’m building is intended to be used on mobile.
I need to mimic desktop On Mouse Over cursor behavior on mobile (as though my finger drag or finger swipe is like a mouse hover). Since there is no Swipe Over option for mobile is this even possible?
I figured since Touch Start, Touch End and On Drag are available options, then swipes must be detectable by elements that are in the path of the swipe. Is there any JavaScript code that I can add to my project (or to each individual element) that will allow me to trigger my element’s timelines when those elements are swiped over?
I just want to trigger my elements by swipe rather than having to tap. Do I have any options?
without seeing a project I can't offer anything concrete. You mention
but a "mouseover" has no definitive "down" it would be more like hovering my hand over the first white key and then the other keys magically play until I move my hand away
You're right that maybe touch start and touch end is the way to go. You could possibly store the x coord of the "touch" on start and then the same coord on "end" and check if they are different and if they are then the user has moved (read swiped) there finger. Then you could play the timeline based on the direction of the movement. Speculating here. DO you have something that you can share?
Thanks for the input.
I’ve attached my test Hype document.
It’s a rough prototype in the early stages, so lot’s of elements are not yet hooked up.
I think you will see what I mean when you preview the file - I want to be able to swipe on a mobile screen and trigger the notes like I’m able to on a browser.
I think this requires javascript - I’d probably listen to the document touchmove event and then use document.elementFromPoint() to determine which note the finger is over and play the timeline/sound associate with that.
