Image transition

[GitNomster]

Are there any way to add transition to the image at the moment of appearance? If i add msrc property to data source item, to achieve this transition, the bottom of image start moving in the end.

Without transition:

With transition:

[dimsemenov]

Technically you may add opacity:0 to the image and then reveal it in the next frame after contentAppendImage event with CSS transition. But it breaks the progressive loading of the image.

I know about this issue - if the large image is already loaded the fade transition looks weird. To fix, you'd need to append image mid-animation or start animation only after image is loaded, which brings some performance issues with large images.

For now, I'd recommend just disabling the animation if it's a very common problem for you.

[arnowelzel]

I solved this by creating an image collection on my own instead of letting PhotoSwipe collect the images on its own and set "msrc" along with the "src" property in the collection. This also worked for PhotoSwipe 4 and can still be used in PhotoSwipe 5.

You may also need some code to handle clicking the images and checking which image of the collection was clicked.

See https://github.com/arnowelzel/lightbox-photoswipe/blob/main/src/js/frontend.js how it was done for PhotoSwipe 4.

My integration of PhotoSwipe 5 is not finished yet, but this is how it was done for that version as well:

https://github.com/arnowelzel/lightbox-photoswipe/blob/photoswipe5/assets/ps5/scripts.js

The idea: when providing a list of images and telling PhotoSwipe 5 to open one of these images when clicking it, you won't have the "zoom in" animation any longer, but the image still fades in. This can be helpful if you only have square thumbnails and not cropped ones and can not use the "zoom in" animation.