ScrollTrigger position wrong due to upper Pin option.

[Verdandi]

I'm new to gsap and trying to implement some effects on apple's MacBook Pro 16-inch product page using gsap and its scrolltrigger plugin. But I encountered a very annoying problem.

My project is a next.js project. Due to project's complexity, I divided the page into several components by '<section>' in the DOM. The first component has a scroll pin effect to implement a horizontal scroll effect. And there's a normal scrolltrigger effect in the second component. However, when I turned on the marker option, I found both of the start and end points were moved upwards in the DOM, so my animation was triggered in advance. When I turned the pin option to false, the start and end points were at the right place.

I tried to abstract this problem to a really simple one, but failed. The simple example performed normally. So I've had to remove non-realted animations from my project and take this as an example. I created this example by a template, the only related files are 'components/ProcessorTest.js' 'components/KeyboardTest.js' 'pages/index.js'. And I didn't do responsive design, so please make the window wide to see the right result.

Can somebody help me?

Edited September 22, 2020 by Verdandi

[ZachSaucier]

Hey Verdandi and welcome to the GreenSock forums.

 

We'd prefer not to have to sign up for a website just to look at your code. Could you try creating the demo using CodeSandbox or StackBlitz instead? Make sure to remove everything that you can that's not vital to the issue you're asking about.

[Verdandi]

19 hours ago, ZachSaucier said:

Hey Verdandi and welcome to the GreenSock forums.

 

We'd prefer not to have to sign up for a website just to look at your code. Could you try creating the demo using CodeSandbox or StackBlitz instead? Make sure to remove everything that you can that's not vital to the issue you're asking about.

Hi, thanks for replying. I had tried CodeSandbox, the code wouldn't compile when I added .babelrc. As for StackBlitz, it seems Next.js is not supported yet. I created my project on another platform today, sign up isn't needed on this platform. And there is no redundant files now. I've updated 'this' link in my original post with this address——https://staging.repl.it/@draftingdreams/gsap-debug

[ZachSaucier]

Thanks for doing that. 

 

I'm guessing that it's a load order issue. The ScrollTrigger that comes first in the DOM (the one in ProcessorTest) is created within a load function whereas the one that comes second in the DOM (the one in KeyboardTest) is created in a useEffect (which runs immediately to my knowledge). You should make sure that the ScrollTriggers are created in the DOM order. 

 

You should be able to do this by either 

1. Creating the ScrollTrigger in the KeyboardTest file in a load callback so that they both wait for the load before being created. Or
2. Set refreshPriority: 1 on the ScrollTrigger in the ProcessorTest file.

[Verdandi]

17 hours ago, ZachSaucier said:

Thanks for doing that. 

 

I'm guessing that it's a load order issue. The ScrollTrigger that comes first in the DOM (the one in ProcessorTest) is created within a load function whereas the one that comes second in the DOM (the one in KeyboardTest) is created in a useEffect (which runs immediately to my knowledge). You should make sure that the ScrollTriggers are created in the DOM order. 

 

You should be able to do this by either 

1. Creating the ScrollTrigger in the KeyboardTest file in a load callback so that they both wait for the load before being created. Or
2. Set refreshPriority: 1 on the ScrollTrigger in the ProcessorTest file.

Thanks for your advice, it is really painful to figure out the creation order with complex useEffect update conditions. So I decided to set refreshPriority, and it worked! Thank you very much!