How to create a stacking image effect with GSAP in Elementor

<script src="https://unpkg.com/gsap@3.9.0/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>

<script>

  const photos = gsap.utils.toArray(".desktopPhoto:not(:first-child)")
  gsap.set(photos, {yPercent:150})

const animation = gsap.to(photos, {
  yPercent:0, 
  duration:1, 
  stagger:1
})

ScrollTrigger.create({
	trigger:".gallery",
	start: "top 10%",
    end: "bottom bottom",
	pin:".top",
	animation:animation,
	markers: false,
	scrub:true
})

</script>

.desktopPhotos {
	width:40vw;
	height:60vh;
	position:relative;
	overflow:hidden;
}

.desktopPhoto {
	position:absolute;
	width:100%;
	height:100%;
}

.top {
    transition: 0s;
}