Jump to content
Search Community

GSAP Pinch & Zoom Touch screen

WesCritch
Moderator Tag

Go to solution Solved by WesCritch,

Recommended Posts

WesCritch
Posted

Is there a way for GSAP to handle touch events such as pinch and zoom? I am creating a draggable object to zoom in and out on, I have it working with the mousewheel but I'm wondering if it can be done using GSAP as well? I have experimented with HammerJS and got a rudimentary prototype but wanted to ask you guys if there was a GSAP method which has eluded me in my searches so far.

See the Pen wBwmvmm?editors=0010 by wesleycritchett (@wesleycritchett) on CodePen.

Posted
8 hours ago, WesCritch said:

Is there a way for GSAP to handle touch events such as pinch and zoom? I am creating a draggable object to zoom in and out on, I have it working with the mousewheel but I'm wondering if it can be done using GSAP as well?

Hi,

 

GSAP is not a touch events/gestures library so this can't be achieved with GSAP in the same way as it can be with libraries like Hammer, so I would suggest you to use those libraries to detect those events and use GSAP in the event handlers to trigger any animations you want in those events. If you have any GSAP related question or issue along the way, be sure to come back and we'll look at it in order to help as much as we can.

 

Happy Tweening!

WesCritch
Posted

Okay I think I'm getting somewhere with this now, I've managed to get the pinch zoom working and the drag works individually fine, however when I perform the drag once zoomed in and then try to zoom out the image jumped around, what is the (no doubt very obvious reason I've missed) cause of this and how can it be fixed? I've added in a basic codepen example to help.

Posted

Hi,

 

I tested your demo on and android phone (Chrome/Firefox) and an iPad (Chrome/Safari) using the debug URL (no iframes) and I can't seem to replicate the jump you're mentioning. I used the regular two finger gesture to zoom in/out and I saw no jumps when dragging the image. Are there any particular steps to reproduce this? Maybe I'm missing something obvious here 🤷‍♂️

WesCritch
Posted

Ah, yes I probably should have mentioned this, I'm using a touch screen monitor not an table or phone which also has mouse support so that's where the issues lies, I used the mouse then the touch screen which is causing the jump.  

Posted

Hi,

 

This seems more related to the way a touch monitor handles zooming with gestures more than anything else. I don't have a touch monitor to test this but as far as I can see using either cmd + mouse wheel or cmd with +/- to zoom, doesn't create any issues or jumps with the Draggable instance so is clearly related to that specific way of zooming in/out.

 

I've googled for a bit and can't find any information on how this actually works, just generic pinch zoom stuff.

 

Can you test the regular ways of zooming in/out (mouse wheel and cmd/ctrl keys with the +/- keys) and see if it also happens?

Posted

Sorry I also forgot to ask if you're doing the pinch zoom gesture on the Draggable target or outside of it? It shouldn't work if you're doing the gesture on the Draggable target.

WesCritch
Posted

Yeah the pinch and zoom is used on the Draggable target. And yes the main document has zoom in/out buttons and they work fine; I just removed them for the sake of the demo. It definitely is something to do with combining the touch screen effect along with the mouse scroll. Pure brainstorm but I think where I get the mouseX/pinchX and mouseY/pinchY, store them in an array and use them as the transform origin, when I perform a  drag on the target, the x value in the translate3d() will affect the  mouseX/Y when I zoom out, so would you need to do some calculations to find the difference between that value and the other values?

WesCritch
Posted

I should probably say as well the overall aim of this is to have a highly detailed and labelled svg as the target, and the user is able to zoom in on all parts to see things more clearly if the text is too small

  • 2 weeks later...
  • Solution
WesCritch
Posted

Okay so I'm going to update this for anyone who find this, I ended up using the HammerJS library to emulate a pinch and zoom method after several attempts at trying to create a pinch and zoom method manually. It's not 100% perfect but it gets the job done. Not in the codepen example, but I have added in buttons to reset in the event the image disappears off screen

  • Thanks 1

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...