Pinch to zoom on mobile devices does not work under some conditions

[fluz (Flavio Fulciniti)]

I make some digital brochures with Saola Animate so it is very useful that the pinch-to-zoom function is working to zoom some parts… And that’s the problem.
I noticed that if a trigger is applied on a scene (ex: go to the next scene when the user swipes left) the pinch to zoom doesn’t work.
Probably the listener in saola player that captures thise kind of events blocks the gesture.
Note: Obviously this is not a problem related to the “viewport” meta tag, in fact the gesture works on pages without actions.

I’ve created an online example to test this behavior (of course you have to test it on a mobile device).
https://fluz.it/pinchsample/

Any solution?

[PhuongThuy_Le]

Hi,

You can use scripts as a solution for your case. Here’s how:

• Open the Scene Event Handlers dialog > select the Scene Activate event > Add Action button > Other Actions > Run JavaScript.
  

  

• Select Add Function > enter the scripts below:

function onSceneActivated(doc, e) {
  this.dom.style.touchAction = 'pinch-zoom';
}

Best regards,
Thuy

[fluz (Flavio Fulciniti)]

Great job master!
Thanks for the very fast reply. I’m still an enthusiast Saola Animate user!

I made a small change that I hope will be useful for other users.
I’ve applied the function at the document level so I don’t need to call it in every scene.
To do this I simply added a function to the Document Event Handlers > Scene Activate

function activateZoom(doc, e) {
  	doc.getScene().dom.style.touchAction = 'pinch-zoom';
}

[PhuongThuy_Le]

Hi @fluz,

Thank you for your great suggestion
Hope you have many amazing experiences with Saola Animate.
And don’t hesitate to reach out to us if you have any questions. We’re always here to help!

Nice day,