Jump to content


Start and End in incorrect position

Recommended Posts

Hello there,


Really enjoying the power behind ScrollTrigger but I have a question, and I'm not sure if it's me doing something wrong here or it's intended to be used like this. 


Basically, when having an animation that moves the trigger div away from it's initial position, if the "scroller-start" is already triggering the start of the animation on load, then it takes the animation start position as a starting point, and not the original position. 


I hope I have explained myself correctly, please let me know if you don't understand. 




EDIT: might need to resize the codepen so that the whole window appears on load.

See the Pen QWyvpJq by hawkmusician (@hawkmusician) on CodePen

  • Thanks 1
Link to comment
Share on other sites

Hi Zach,


Thanks for the reply. Problem is, with this setup, it would mean that if the user doesn't scroll pass the trigger (which he can't since it's the top of the page), it would never activate the animation?

Link to comment
Share on other sites

Hmm. It's an edge case because of you have reverse as the last parameter. If you change that to none then it will play. 


I would argue that this is the correct behavior if you have reverse in a later parameter like that and the start and end are not able to be scrolled to. If you want to make sure that it can be played and reverse, make sure the start position is able to be scrolled to. 

  • Like 1
Link to comment
Share on other sites

You are correct about that point, but it wasn't really what I was going after. 


My problem resides in the fact that ScrollTrigger takes the start position once the animation has already started, and not the initial and original of the div. Please check the screenshot, where the red line should be the starting point (and not where it is placed). 


Am I understanding something wrong here?

Screenshot 2020-06-23 at 17.14.13.png

Link to comment
Share on other sites

Ah, I understand now. Yes indeed it should. 


On some loads the start and end are where they should be but on most it they're further up like you show in the screen shot. There's some sort of bug we'll need to fix here.


Side notes:

  • You can just use numerical values for your y.
  • ease: "ease.out" is an invalid ease. See the ease docs for more info.
  • If you want a duration of 0 use .set()

We'll let you know once it's fixed.

  • Like 1
Link to comment
Share on other sites

Thanks for the clarification Zach, and thanks for the little tips, helps a lot!



Link to comment
Share on other sites

  • 2 months later...

Hi! I face a similar problem with ScrollTrigger. In a React app some data are fetched asynchronously and the dimensions of their container changes. The problem is that the markers of the pre-existing static elements (2 paragraphs in my case) that are underneath these dynamic elements don't adapt to this change. Is there any fix for this issue?



Link to comment
Share on other sites

Ok. I just found the answer. Sorry for the annoyance. Inside a useEffect hook, just insert ScrollTrigger.refresh() with input array of states that create the issue

  useEffect(() => {
  }, [state1state2, ...]);
  • Like 3
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.