Add option to control zoom animation duration

[txbsywcq]

I've disabled all animations in my code except for the zoom in/out animation. Can anyone provide assistance, please?

Fancybox.bind('[data-fancybox]', { showClass: false, hideClass: false, Thumbs: false, contentClick: "iterateZoom", Images: { zoom: false, Panzoom: { friction: 0, mouseMoveFriction: 0, decelFriction: 0, dragFriction: 0, maxScale: 2, }, }, Carousel: { friction: 0, transition: false, Navigation: false, }, });

[fancyapps]

Hi,

I copy/pasted your code and ... it disables zoom animation - https://jsfiddle.net/t57qLb89/

[txbsywcq]

I'm sorry, but if you double-click to zoom the image, there will always be an animation.

[fancyapps]

In that case, change click (and/or wheel) event:

Fancybox.bind('[data-fancybox]', {
  contentClick: false,
  wheel : false
});    

https://jsfiddle.net/u8p79mgj/

[txbsywcq]

I mean to disable the animation when zooming the image.

[fancyapps]

In that case, you have to create your own click handler, like this:

Fancybox.bind('[data-fancybox]', {
  contentClick: false,
  Images: {
    Panzoom : {
      on: {
        click: (panzoom, event) => {
          event.preventDefault();

          if (panzoom.targetScale > 1) {
            panzoom.zoomTo(1, { friction : 0 });
          } else {
            panzoom.zoomTo(panzoom.maxScale, { event, friction : 0 });
          }
        },
      },
    }
  }
});    

https://jsfiddle.net/gz6wvna9/

Disabling animation is not offered "out of the box" because it ruins the user experience and therefore not recommended. Also, all animations are "reactive", for example, if content moves after the drag, but user quickly zooms in/out using the wheel, then animation smoothly transitions from panning to zooming.

[txbsywcq]

In Panzoom, the option "friction" is currently valid for rotate, flip, fit, and reset animations. I believe it would be more consistent if this option were also valid for image zoom animation. What are your thoughts on this?

[fancyapps]

I'm sorry, but I'm curious - why do you want to ruin the user experience? Or you want to allow the user to reduce motion, in which case you'd probably prefer to disable all animations. Anyway, there is currently no option to adjust the zoom friction.

[txbsywcq]

I'm developing a Tampermonkey extension, and yes, I simply want to disable all animations. It's just my personal preference. Anyway, thanks for your reply.

[fancyapps]

OK, I will think about it.