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

What is Framer? Join the Community
Return to index
Marc Krenn
Posted Oct 15 - Read on Facebook

Drag/Pinch/Rotate example
for Framer.js v3 in conjunction with Hammer.js v1.1.3

probs to Koen and Tisho!

Beware: x/y-position may change after the release of a multi-touch gesture (expected behavior)

Hold "shift" while dragging for a fake multitouch-gesture.

Demo: https://dl.dropboxusercontent.com/u/7997357/framer/marc/HammerDragPinchRotate.framer/index.html

Download: https://dl.dropboxusercontent.com/u/7997357/framer/marc/zips/HammerDragPinchRotate.zip

8 Comments

Marc Krenn

added reset on doubleTap

Adam Laskowitz

Pinch is a bit buggy, the centering causes the box to jump around when stopping the gesture

Marc Krenn

Yeah, I know - it says so in the description above ;)

When you lift one of your finger from the screen, Hammer interprets your other finger as a drag-movement. Haven't found a way to fix this bug yet.

Marc Krenn

Great, keep us posted! :)

If you need some help, don't bother to ask!

Adam Laskowitz

Ah, my bad Marc. I totally skipped over that :)

Joey Azoulai

Marc Krenn thanks for the example; the pinch and drag events really helped me mock the zoom and pan functionality of an interactive map. Did you ever find a way to fix the bug that causes the x/y position to jump? Thanks!

Marc Krenn

Nope, unfortunately not - but tbh, I haven't really looked into it at all. Maybe using a newer version of hammer fixes this particular problem?! :)

Joey Azoulai

I updated the library, but the problem persists. Good thought though, Marc Krenn. Thanks, again.

Read the entire post on Facebook