Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Rinku Samanta

Scroll trigger markers keep changing postion

Recommended Posts


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) => {
const prevColor = i === 0 ? "gray" : scrollColorElems[i - 1].dataset.scrollcolor;
trigger: colorSection,
start:  "top center",
end:"bottom center",
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.
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.