How to change the slide transition time?

[acwolff]

I use transitions if you go to a next image in the light-box as you see in this test album. I use the method described in issue #1765
However the used transition time is rather fast, I like to give the viewer the possibility to select another transition time.

The duration of the transition is determined by parameter naturalFrequency in this code in module photoswipe.esm.js:

    if (!animate) {
      this.moveTo(destinationX);
      this.updateCurrItem();
    } else {
      pswp.animations.startSpring({
        isMainScroll: true,
        start: this.x,
        end: destinationX,
        velocity: velocityX || 0,
        naturalFrequency: 30,

My question is:

How can I change / overrule the naturalFrequency without changing the source code of module photoswipe.esm.js, so by an option or with CSS code.
@dimsemenov In case that is not yet possible, could you please please offer such a feature in the next version?

[dimsemenov]

If you want to adjust the speed of the animation from moveIndexBy function - you may adjust velocityX argument

PhotoSwipe/src/js/main-scroll.js

Line 140 in 2d23b36

moveIndexBy(diff, animate, velocityX) {

(it's measured in px per ms, and it can be negative depending on the direction). Or you may start your own spring animation with the desired props. Please note that I do not recommend doing the transition this way, as it won't be smooth if changing slides too fast or if any kind of looping is enabled.

The transition between slides is a common request, hopefully, in the future versions, it'll be implemented. End users often dislike if intrusive transition is added to this type of gallery, so it must be very light.

[acwolff]

Thanks @dimsemenov for the information.
But to use it I have still to change the distribution files, so I hope you will release soon a version where you can apply this without changing the distribution files.

[dimsemenov]

I'm not sure what you're trying to modify the source for, but if you want to override the goTo method - you may extend the PhotoSwipe class. Or implement your own version of the method and use it for arrows/slideshow navigaiton.

[acwolff]

Sorry @dimsemenov I am not an expert Javascript programmer, so I have no idea how I can do what your proposes.
An example would help!

[dimsemenov]

Here is a basic example, but I don't recommend doing such modifications if you're not a programmer.

class CoolerPhotoSwipe extends PhotoSwipe {
  goTo(index) {
    // your goTo logic

    // or call the parent method
    // super.goTo(index);
  }
}

const lightbox = new PhotoSwipeLightbox({
  gallery: '#gallery',
  children: 'a',
  pswpModule: CoolerPhotoSwipe
});
lightbox.init();

https://photoswipe.com/getting-started#without-dynamic-import

[acwolff]

Thanks again @dimsemenov , I will do some tests, but I still see in your example no reference to the velocityX parameter.

Edit:
BTW, I think I use already what you propose, because I use the Option 2 code described here: #1765 (comment)
but this does not change the velocityX parameter..

[Andrew-web-coder]

@acwolff It would be so easy with Fancybox, but I understand you chose this because of the licensing.