Start and End in incorrect position

[HawkMusician 6 Likes (Newbie)]

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. 

 

Thanks!

 

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

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

[ZachSaucier 7,086 Likes (Superhero)]

Are you expecting the behavior to be like it does using the latest beta instead?

See the Pen dyGWzQb by GreenSock (@GreenSock) on CodePen

[HawkMusician 6 Likes (Newbie)]

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?

[ZachSaucier 7,086 Likes (Superhero)]

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. 

[HawkMusician 6 Likes (Newbie)]

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?

[ZachSaucier 7,086 Likes (Superhero)]

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.

[HawkMusician 6 Likes (Newbie)]

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

 

 

[George Litos 3 Likes (Newbie)]

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?

Thanks!

[George Litos 3 Likes (Newbie)]

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(() => {

    ScrollTrigger.refresh();

  }, [state1, state2, ...]);