[Scroll Trigger change the position of a markers]

Thank you for your answer. But the problem hasn't been solved.

 

 

I mean, I want the pink div area 'start' and 'end' to go to the center of the pink div area. Like the image above.

 

Is it right to write "top 30%" of the answer you gave me in the JavaScript area? Like the image below?
(Sorry there is no codepen link.)

 

[Scroll Trigger change the position of a markers]

 

onMounted(() => {
  //fadeIn
  const fadeIn = gsap.utils.toArray(".fade-in")
  fadeIn.forEach((bg, i) => {
    console.log(bg)
    gsap.to(bg, {
      scrollTrigger: {
        trigger: bg,
        start: "top 40%",
        end: "top 20%",
        scrub: 3,
        markers: true,
      },
      opacity: 1,
    })
  })
})

 

The position of the scroll trigger markers in the onMounted can be adjusted using the 'start' and 'end' properties,

but how do I adjust the 'start' and 'end' of the pink object on the left side of the image?