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

What is Framer? Join the Community
Return to index
JL Flores Mena
Posted Oct 21 - Read on Facebook

(sorry for the long post!)
Here's the Pinch/Zoom issue I've been trying to solve: transforming an object from the middle point of the pinch, rather than the center of the object.

This issue is totally independent from the technique you decide to use to detect Multitouch and to handle Pinch/Zoom (that's why I'm sharing two videos, we need to focus on observing this scale-thing first).

DemoA
https://www.dropbox.com/s/cqidprcwltw25k7/demoA.mov?dl=0
Notes:
- The blue dots are always displaying the layer's x,y, width and height values (aka, the Frame). **These values are not affected by Scale.**
- The black dot shows the middle point between two fingers.
- Whenever you see the black dot, that means I'm setting it as the new originX and originY.
- The first time you scale the object, it works great. But this approach stops working because **everytime you change the originX & Y of an scaled object, the displayed content jumps to a different position.**
- The Frame is not affected by any of these changes.

DemoB
https://www.dropbox.com/s/f1qhhvqtnhxgrus/demoB.mov?dl=0
Notes:
- I added a red dot that keeps track of the 0,0 coordinate of the scaled object.
- Notice that this time when I change the originX & Y values, the scaled object remains in place. You'll also notice the blue dots jumping to a different position.
- What I'm doing here is moving the Frame to create the illusion that the content remained in the same place. I do it by keeping track of the offset *before* and *after* changing the originX&Y values.
- Sadly, this doesn't solve the issue: there's still a (smaller) jump when you start scaling the object again...

I may be overthinking this and I'm sure there's an easier way to do this. However, I keep thinking that the main issue is that changing the originX&Y of an scaled object makes it jump to a different 'location' (quotes because the Frame remains in the same place). Give it a try with your preferred Multitouch/Pinch module! And thanks for reading this.

4 Comments

JL Flores Mena

Josh Puckett, this is what I've found on this topic.

Josh Puckett

Sorry, I'm still confused about what you're trying to do? What exactly isn't working, and what would you like it to do?

Jordan Robert Dobson

From what I understand is he's trying to change the origin of where the scale happens from with the location of the pinch. So he could punch from the top right corner and it would grow pushing down and to the left mostly.

Josh Puckett

Here you go! Hacky code, but this scales from the center of your pinch, not center of the photo: http://share.framerjs.com/81dyd66fmc5z/

I'll let you try and figure out what's going on; see if you can add the pan gesture, as in Photos.app, so that when you hold your pinch and move it, the photo moves with you as well.

Read the entire post on Facebook