'Zoom' animation, but 'fade' animation for thumbnails not visible on the page

[MentalGear]

While the zoom animations are absolutely great, it always bugged me how the zoom out also happens for thumbnails that are not visible on the page any more. The default zoom-out animation in the lightbox can look glitchy if the thumbnail element is no longer visible on the page. This behavior happens because the zoom-out animation tries to target thumbnails that may have scrolled out of view.

This code example modifies the close behavior: if the thumbnail element is not visible on the page, the lightbox will fade out smoothly instead of zooming out.

Code (with help from chatGPT/perplexity)

const lightbox = new PhotoSwipeLightbox({
    gallery: '#gallery',
    children: 'a',
    pswpModule: PhotoSwipe,
    showHideAnimationType: 'zoom'
});

const observer = new IntersectionObserver(
    (entries) => {
        entries.forEach(entry => {
            if (entry.target === lightbox.pswp?.currSlide.data.element) {
                lightbox.pswp.options.showHideAnimationType = entry.isIntersecting ? 'zoom' : 'fade';
                console.log(`Transition effect: ${entry.isIntersecting ? 'zoom' : 'fade'}`);
            }
        });
    },
    { threshold: 0 }
);

lightbox.on('change', () => {
    if (lightbox.pswp?.currSlide.data.element) {
        observer.observe(lightbox.pswp.currSlide.data.element);
    }
});

lightbox.on('close', () => {
    observer.disconnect();
});

lightbox.init();

Demo: https://jsfiddle.net/ndc95gr4/2/