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

What is Framer? Join the Community
Return to index
Callil Capuozzo
Posted Nov 01 - Read on Facebook

Found a cool little way to do multi touch gestures without hammer.js

You can query for event.touches to return an array of the touch events that are firing. If you write a simple if/else to check for the events you can write logic based on the amount of fingers, their location and more.

Here are four examples I wrote based on this, works really smoothly, let me know if you have any questions.

These only work on touch devices. (tested on iphone 6s and lenovo windows machine):

3 finger drag: http://share.framerjs.com/2zgwf6xw6h66/

MultiTouchLines: http://share.framerjs.com/kyyp81vat6ag/

Pinch and zoom! http://share.framerjs.com/6mphpk6hnj4z/

Pinch and Zoom maps: http://share.framerjs.com/3kc3jehehqyn/

Thanks to Jordan Robert Dobson for revealing the touches thing in his force touch module and Ola Laurin for some svg things.

Edit: Shape generics could have been very useful here - things like c1 = new Circle, l1 = new Line x1=-,y1 =0,x2=10,y2=10 with properties for each. Anyone written something like this before or might find it useful?

also - anyone know how to get this to work on macbook trackpads?

17 Comments

Jordan Robert Dobson

Woo!

Stephen Crowley

Framer JS Seattle demo time? :)

Jorn van Dijk

Baller!

Jordan Robert Dobson

Go Seattle Frameristos Go!

George Kedenburg III

Rad! All hammer.js does anways is provide handy parsers for the touches object :)

Josh Puckett

Nice work! You can even do custom gesture recognizers in Framer, too! One of the many advantages of using code and giving full access to all the data.

Chris Camargo

JL Flores Mena You seein' this?

Joshua Tucker

Good work sir! I have had something in the works for a while but had to abandon it for a bit.

Also, I looked into the Mac trackpad initially as well, however I didn't find any documentation/examples showing whether the browser detects or reveals the multitouch from the Mac trackpad.

https://github.com/joshmtucker/MultiTouchEvents

Josh Puckett

If y'all want angles (from a while ago, it's JS): https://gist.github.com/joshpuckett/9216195

JL Flores Mena

This is great! Thanks for the heads up Chris. Hey Callil, last week I was working on something exactly like this, and these are the two main challenges that I found about Pinch/Zoom:

1. How to keep scaling the object from its previous scaled value, rather than between 0 and 1 values. (solved)
2. How to scale from the center of the pinch, rather than the center of the object. (kind of solved)

I've had countless hours of fun (struggle!) and reached some interesting findings, I'm sure I'm overcomplicating stuff and there's an easier way to do it. But my first step was to get rid of Hammer because I wasn't in control of the stuff going on behind the scenes.

Jordan Robert Dobson

I dabbled a bit with a shapes class at one point. Callil we should make this. Agree totally.

Would be great for diagraming and hints Etc.

Matthew Joseph Kulp

Nice Callil!

Dennis Kerzig

For reference, this is an amazing piece to read: https://patrickhlauke.github.io/getting-touchy-presentation

A Rehman Kureshi

Amaxing ... :)

Marc Krenn

Works and performs just as good, if not better, than Hammer2 ... yet using only single-digit lines of code. I'm impressed :)

Alexander Bennett

Callil This is awesome! is there a way to use this to just identify a two finger tap vs a one finger tap?

Tai Smith

anyone else getting a "TypeError: undefined is not an object (evaluating 'event.touches')" (line 35-39) with this in Framer?

Read the entire post on Facebook