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

What is Framer? Join the Community
Return to index
Alexander Bennett
Posted Apr 07 - Read on Facebook

I'm trying to create a prototype where you can zoom into a photo with the new pinch gesture, but then when you drag past the edge of the photo it animates that edge to the edge of the screen. Similar to how iOS photos does it when you are looking at the last image in a set which I documented in the video attached.

6 Comments

Chris Camargo

Jonas Treub, this example seems to have broken in the latest version of Framer. Is there an updated version? This is a concept I've tripped across before, and never worked out a solve.

Alexander Bennett

with the pinch changing the scale and origin of the layer it's been really difficult to figure out what any of the layer edge coordinates are, know when one of them is within the screen area, and then and figure out how to get that layer edge to fall on the correct edge of the screen.

Koen Bok

This is not super easy but pretty possible. My approach would be to calculate and update the draggable constraints while pinching.

Jonas Treub
Alexander Bennett

Thank you so much Jonas! This is awesome.

Mark Mattione

Jonas - this has been a great help but I've got one small issue. The image is jumping unexpectedly in the following scenario:
1) Pinch-to-zoom in from the top-left corner of the screen, just a little bit to get our scale > 1
2) Start a pinch gesture at the bottom-right corner of the screen.

Looks to me like the pinch gesture changes the layer's originX and originY without changing the x/y coordinates. So, if the scale is not 1 and the origin is moving significantly then you'll see a jump. Oddly, I only see this issue when viewing the prototype on a device - the browser preview does not seem to have this problem.

Read the entire post on Facebook