Triggerscroll GSAP stacking images

Question

I'm using gsap and scrolltrigger and what I'm trying to accomplish is to make the images stack over each other when i scroll

Is this possible and how ?

I've accomplished the image sequence and am now able to scroll to show new images, however i want next image to slide up and then just stack over the first image. And continue doing so.

Has anyone done this before or know how i might go on?

https://codepen.io/kevmorales/pen/OJwEgpV

gsap.set('.frame', {xPercent:-50, yPercent:-50})

var wrapImgHeight = document.getElementById('wrap').clientHeight;

var action = gsap.timeline({
    scrollTrigger: {
      trigger: ".sec02",
      scrub: 1, 
      pin: true, 
      start: "top top",
      end:"+=2000",
    }
  })

var action = gsap.timeline({
    scrollTrigger: {
      trigger: ".sec01",
      scrub: 1, 
      pin: true, 
      start: "top top",
      end:"+=2000",
    }
  })
.to('#wrap', {y:-wrapImgHeight*4, duration:2, ease:'none'},0.5 )
.to({},{duration:0.5})