How to separate my images as it scrolls down by scrollTrigger with specific positions.

[Xenex122]

So basically the problem here is simple but I don't know how to it..Basically like this...Every box is on the center and as I scroll down they will be separated each other as I keep scrolling down.. The sample idea is in my codepen..As they were separated..but I want them to be in center and go there specific locations as I scroll-down. How can I achieve this? Thanks for the help.

See the Pen abqjmBw by myth-vince (@myth-vince) on CodePen

[Xenex122]

Nevermind I already got the solution 

gsap.registerPlugin(ScrollTrigger)

const back = document.querySelector('.back')
console.log(back.clientHeight*10)
const all = document.querySelectorAll('.items')

const list = [
  {x:"10%",y:"20%"},
  {x:"30%",y:"30%"},
  {x:"20%",y:"60%"},
  {x:"40%",y:"80%"},
  {x:"60%",y:"20%"},
  {x:"85%",y:"80%"},
  {x:"60%",y:"60%"},
  {x:"80%",y:"80%"}
]

var timeline = gsap.timeline({
    scrollTrigger:{
        trigger:back,
        start:"top top",
        end:"center top",
        end:() => `${back.clientHeight*10}px`,
        scrub:true,
        pin:true,
        markers:true,
        toggleActions:"play reverse play reverse"
    }
})

all.forEach((elem,i) => {
    // console.log(list[i].x,list[i].y)
  timeline.to(elem,{
    top:`${list[i].y}`,
    left:`${list[i].x}`,
    ease:"none",
  },0)
})

Just put the thing like this and remove the for loop in the SCSS just copy my own list.