panzoom
panzoom copied to clipboard
zoomToPoint() Does not have animation
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;
- Click on the image. Notice Image is zoomed to clicked location without animation.
- 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.
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.
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!
hello @timmywil,
I can tell that you implemented the animate option in the development version, can you release this feature please?
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?
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?