Scroll trigger markers keep changing postion

[Rinku Samanta]

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.

[GreenSock]

Hm, it's very difficult to troubleshoot blind unfortunately. I suspect it's a problem with your CSS or maybe you're using an old version of ScrollTrigger. Tough to say without seeing the issue in context. can you please create a reduced test case, maybe in CodePen? See https://greensock.com/demo

 

It doesn't need to be your "real" project. In fact, it's better if it's the simplest possible recreation of the issue (even if it's only a couple of <div> elements). Once we see it in context, I'm confident we'll be able to offer some advice.