Verdandi

That's a very heuristic technique!! Thank you, sir! @OSUblake I need to study more of your pens?

https://codepen.io/osublake/pen/oLGBXy I've just studied this demo. And I found something weired to me. When you look very carefully at those particles, you will find they have short trails after them. In the 9th line of the code. If you change the variable 'fade' from 'rgba(0,0,0,0.4) to 'rgb(0,0,0). The particles' trails will all disapear. What is confusing me is that I don't understand why the particles can have those short trails. Becuase we didn't draw the trails manually on the canvas. I have an assumption is it's due to persistence of vision. But it doesn't make sense, trails disapeared when 'fade' was equal to 'rgb(0,0,0)'. Does anybody know why?

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!

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

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?