gsap, draggable, photoswipe

<link rel="stylesheet" href="libs/PhotoSwipe/photoswipe.css">
<link rel="stylesheet" href="css/main.css">
<script src="libs/gsap.min.js" defer></script>
<script src="libs/Draggable.min.js" defer></script>
<script src="libs/InertiaPlugin.min.js" defer></script>
<script src="js/app.js" type="module" defer></script>

window.onload = function() {

	setTimeout(function() {
		document.body.classList.add('loaded')
		if (window.matchMedia('(min-width: 992px)').matches) { // If not mobile
			Draggable.create('.gallery', {
				bounds: 'body',
				inertia: true
			})		
		}
	}, 200)

}
// 이미지 링크 주소 가져오기 
document.querySelectorAll('.gallery__item').forEach(function(e) {
	let img = new Image(), hrefURL = e.getAttribute('href')
	img.onload = function() {
		e.dataset.pswpWidth = this.width
		e.dataset.pswpHeight = this.height
	}
	img.src = hrefURL
})
// lightbox
import PhotoSwipeLightbox from '../libs/PhotoSwipe/photoswipe-lightbox.esm.min.js'
const lightbox = new PhotoSwipeLightbox({
	gallery: '.gallery',
	children: '.gallery__item',
	pswpModule: () => import('../libs/PhotoSwipe/photoswipe.esm.min.js')
})
lightbox.init()

<div class="gallery">
    <a href="img/1.jpg" data-pswp-width="1500" data-pswp-height="2500" class="gallery__item"><img src="img/1.jpg" alt="Alt"></a>
    <a href="img/2.jpg" data-pswp-width="1500" data-pswp-height="2500" class="gallery__item"><img src="img/2.jpg" alt="Alt"></a>
    <a href="img/3.jpg" data-pswp-width="1500" data-pswp-height="2500" class="gallery__item"><img src="img/3.jpg" alt="Alt"></a>
    ---
</div>

:root {
	--gap: .5em;
	--index: calc(1vw + 1vh);
	--color-dark: #000;
}
.gallery {
	width: 30vw;
	column-width: 2em;
	gap: var(--gap);
	transform: scale(8.2);
	will-change: transform;
	transition: transform 1s cubic-bezier(.075, 1, .25, 1), opacity 1s;
}
.gallery__item {
	margin-bottom: var(--gap);
	transform: scale(1.001);
	will-change: transform;
	transition: .3s;
	display: block;
}
.gallery__item:hover {
	transform: scale(1.03);
}
.gallery__item img {
	width: 100%;
	display: block;
}
.loaded .gallery {
	opacity: 1;
}
.loaded .header span {
	opacity: 0;
}
body .pswp .pswp__container {
	transition: transform .5s ease-out;
	transition: transform 1s cubic-bezier(.3, 0, 0, 1);
}