Ozzy-U

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.)

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?