This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Edward Sanchez
Posted Aug 31 - Read on Facebook

Hey, I need a press + hold and press + hold + drag event.
And I guess then an event to Touch out of the press and hold state too.
Basically I'm creating a strip of photos that you can swipe to scroll, but if you press and hold it becomes like a scrubber. Hard to explain, which is why I need to prototype it I guess.
Any examples of press and hold events out there?
Thank you!

19 Comments

Edward Sanchez

Tried doing this:
Strip.on Events.TouchStart, ->
Utils.delay 1, ->
But that causes the animation to start 1 second after TouchStart, rather than only starting TouchStart after 1 second. It's delaying the animation instead of the event.

So I guess the question is, how do I delay an event?

Ed Chao

o, i see you found my proto :)

Edward Sanchez

Yes Ed, I did! Thank you! However, I am a total programming newb and don't yet know how to implement hammer into framer.

Ed Chao

don't sweat it. Most of us are noobin it out, that's why framer is great. You don't have to be a master programmer to do cool things. Here's some boilerplate that koen wrote to get you started using hammer with framer. http://cl.ly/2a1c3x0P1i2U

Edward Sanchez

Woop thank you!

Edward Sanchez

I get an error on this line:
hammer = Hammer(@_element).on eventName, f

Says it can't find variable Hammer.

I added the plugin folder into my project and replaced the framer folder.

Ed Chao

oh, if you are copying the code over to an existing project you need to include <script src="plugins/hammer.min.js"></script> in the head of your index.html

Edward Sanchez

AH GOTCHA!!! THANK YOU!

Edward Sanchez

So, with the Framer Events I can call event.x to get where the Touch is - on DragMove the event.x also gets updated as you drag.
With the Hold event, I am not getting any event.x out of it.
Is there another way?

Ed Chao

I think you need to do something like event.gesture.x

Edward Sanchez

Nope, didn't work. :-(

Ed Chao

hmmmm. event.gesture.center.clientX or event.gesture.clientX

Edward Sanchez

event.gesture.center.clientX did it! Thank you!

Edward Sanchez

Hey, so this is all pretty cool and working, though it would be super helpful to have a HoldRelease Event which is different from just Release.

Edward Sanchez

It also seems that I need HoldDragMove, HoldDragStart, HoldDragEnd.

I have an object that you can Drag, and you can also Hold+Drag and it does something different.

Koen Bok

Here is an example of what you want I think: http://cl.ly/0J1p0M2K1E2G

Edward Sanchez

Thank you Koen Bok!

Edward Sanchez

So, Koen Bok, I tried this out but it doesn't work for me because I need several events that conflict with each other. I'm having to set time outs and if statements and intervals to make things work, because even Hammer doesn't have all the events I need, but at least Hammer has the "native" Hold event, which helps.

Let me explain what I'm doing, hope it's not TLDR, but I think this is a valid use-case that justifies all these events.

So, I have a long strip of thumbnails that I want to swipe through. As the little thumbnails reach the middle of the screen, the big picture updates. You can see this interaction on the Burst feature on iOS when you’re picking your favorites out of the burst.

Then, if you press and hold this strip, I want to zoom it out so the width ~ to the device.width. Now I have a scrubber widget, so you can skip to the start or end or any position of the strip without having to swipe swipe swipe. When you release from the hold, it zooms it back into the equivalent position.

So to do that, what I need are these events: I’ll call the layer StripLayer and the big image BigImage
1- DragMove -> drags StripLayer with event.x (updates BigImage number based on StripLayer.x)
2- DragEnd -> adds inertia (adding a set interval so BigImage updates for as long as inertia is going)
3- TouchEnd -> moves StripLayer to point based on event.x and updates BigImage based on relationship between event.x and StripLayer.x (This is so you can touch a thumbnail on the strip and update BigImage)
4- TouchHold -> zooms StripLayer out into a small strip (becomes a scrubber) and StripLayer.draggable.enabled = false
5- TouchHold+DragMove -> drags a MarkerLayer with event.x (but does not drag StripLayer)
6- TouchHoldEnd -> zooms layer back in and StripLayer.draggable.enabled = true

Edward Sanchez

So, after a lot of fiddling, and likely resulting in a rather messy solution, I now have several Touch Events that don't conflict with each other.
https://gist.github.com/edwardsanchez/1da746f64070fa5c4288#file-touch-events

Read the entire post on Facebook