Gatsby and ScrollTrigger

[imjs]

Hello, I am building a website using Gatsby/react. I created a scroll parallax animation using ScrollTrigger (see simplified version in codepen)

The issue is... when the page is first-time loaded, all is good. But if I refresh the page, the animation is all messed up. More specifically, the starting point of the trigger is higher than it was (no longer at the center of the trigger div). And then, the animation ends up overlapping with the div that comes in front it. When animation ends, it jumps back down.

I was NOT able to recreate the issue in codepen and suspect that it is related to Gatsby's Scroll Restoration or caching behavior. I know it is hard to investigate when I can't reproduce the error in codepen.
I just wonder if anyone had experience dealing with Gatsby and scroll-related animation and dealt with similar issues, and maybe can point me to the right direction.
Secondly, does the start position of a ScrollTrigger re-calculated when a page refresh?  According to the doc, it only does so on window/scroller resize.

 

See the Pen QWNQBPo by imjs (@imjs) on CodePen

[GreenSock]

3 hours ago, imjs said:

does the start position of a ScrollTrigger re-calculated when a page refresh?  According to the doc, it only does so on window/scroller resize.

Yes indeed. It'll refresh() on a page refresh, when the viewport resizes, and when you come back to a tab that was hidden.

 

As for the Gatsby stuff, sorry, I'm not familiar with it. Hopefully someone else can swing by and offer some tips. Maybe you could try a manual call to ScrollTriggrer.refresh() when Gatsby is done messing with the DOM and scroll position? 

[xoxoxoxo]

I ran into similar issues with static generators and server side frameworks. A few tips:

1. If your start position isn't accurate after refreshes there might be a delay in rendering your full height of the div. Try adding a setTimeout and see if start positions are accurate after sometime. 
2. Try adding a fixed height to the div where the start position is being calculated and this can ensure accurate calculations.

3. When you say "refresh" do you mean an actual refresh or hot reload? Hot reloading can be tricky.

Not saying the above are solid solutions but just an approach to get to the problem. If you can re-create this problem with a codepen or sandbox that'd be super helpful.

[imjs]

9 hours ago, nullhook said:

3. When you say "refresh" do you mean an actual refresh or hot reload? Hot reloading can be tricky.

Yes, refresh. Not hot reload.

I added a setTimeout as you recommended. I will keep you updated on how things turn out.