Hello,
In my react application, there are three section with class .cts which contains image and some content. All the three section is wrapped in a main container. Now I have implemented the animation as follow:
const scrollColorElems = document.querySelectorAll(".cst");
scrollColorElems.forEach((colorSection, i) => {
console.log(colorSection.clientTop);
const prevColor = i === 0 ? "gray" : scrollColorElems[i - 1].dataset.scrollcolor;
ScrollTrigger.create({
trigger: colorSection,
start: "top center",
end:"bottom center",
markers:"true",
onEnter: () => gsap.to("#ftiot", {backgroundColor: color, overwrite: 'auto'})
// onLeaveBack: () => onLeaveBack(prevColor),
onEnterBack: () => gsap.to("#ftiot", {backgroundColor: color, overwrite: 'auto'}),
});
});
Now the problem I am facing is the start marker keeps changing its position and become pretty inconsistent.
In the below screenshot you can see the start marker is way below the top offset marked by black border of the trigger container even though I have specified "top center" as starting point in start property.