panzoom icon indicating copy to clipboard operation
panzoom copied to clipboard

zoomToPoint() Does not have animation

Open ziyamehmmettunc opened this issue 2 years ago • 5 comments

Describe the bug

zoomToPoint does not have animation even though zoomOptions has set both globally and zoomToPoint function call (as a param).

Your environment

MacOS Ventura 13.1

  • Version of panzoom: 4.5.1
  • Chrome Version 109.0.5414.119

Expected behavior

zoomToPoint() has to animate the zoom. '.panzoom' element must get "transition: transform 300ms ease-in-out 0s;" property.

Actual behavior

zoomToPoint() zooming into expected coordinates however. '.panzoom' element gets "transition: none 0s ease 0s;" property. Therefore there is no animation whatsoever.

Steps to reproduce

On this JSFiddle;

  1. Click on the image. Notice Image is zoomed to clicked location without animation.
  2. Click on ZOOM OUT button on the bottom left corner of the image to zoom out. Notice the animation.

I strongly believed I was missing something, still do but I am out of ideas. Pardon me if this is not a bug.

https://jsfiddle.net/6buksa9w/9/ --- Ideal JSFiddle editor layout: Classic.

ziyamehmmettunc avatar Feb 17 '23 01:02 ziyamehmmettunc

Thanks for opening an issue. This is technically intended behavior, but I can understand why it could be unexpected. The zoomToPoint method is used in several scenarios where if animate: true were set globally (as in, passed to Panzoom() on creation), zoomToPoint should still not animate. This is mostly the case when multiple calls happen in quick succession (mouse wheel zooming uses zoomToPoint, for instance). Animation in that case would be erratic and frankly not great.

That said, if you have a case where you are using zoomToPoint and you're not expecting to make another call before the animation would complete, then I think that's valid and you should be able to pass animate: true to the function and have it be respected. So, I'll go ahead and make that change.

timmywil avatar Feb 18 '23 03:02 timmywil

Ah, I see now it makes sense. Thank you for the clarification. Also I'd like to thank you for this awesome library. Great work!

ziyamehmmettunc avatar Feb 20 '23 07:02 ziyamehmmettunc

hello @timmywil,

I can tell that you implemented the animate option in the development version, can you release this feature please?

laraduarte avatar Jul 13 '23 17:07 laraduarte

hello @timmywil, I can tell that animate: true only works in the demo version https://timmywil.com/panzoom/demo/panzoom.js. I tried to export the current version in GitHub but this feature is not implemented/working (stopped working after release -> Release 4.4.4) can you advise?

laraduarte avatar Jul 25 '23 08:07 laraduarte

Thanks @laraduarte for the demo version link, with that script the zoomToPoint does the animation just fine.

Unfortunately the panzoom.handleDown() event binding do not work anymore with that version. Are they renamed or moved? any idea?

davidBlubb avatar Oct 31 '23 09:10 davidBlubb