ScrollTo error make infinite loop

[Ngc1987]

Hi everyone, and first thanks for your work to make gsap.

I write you because i have some problems on my project and need some help.

 

I make a web site with react, and i use some components who have all a 100vh height. All these components have the pin to true.

They have all some little animations to enter or exit of the page. For this it's ok. But there is a lot of scroll to go on differents components and i want to make a little navigation menu for the user to go where he want. So i see the scrollTo plugin and put this on my project. At start it's worked, but because of the pinned sections, it was ugly because all the animations are played fast and there is a small time stopped on the pinned section. So i search how to make a beautiful smooth scroll and ignore animations, and i find a similar case fixed like this:   

 

I try to adapt this on my React project but it doesn't work. And now, the scrollTo is completely crazy and make an infinite loop. 

I tried to delete all the greensocks anims and all the changes i take from the above code pen, and just try the scrollTo like at first but it doesn't work.

Also i have to tell you, it's my first work with gsap, and there is a lot of chance something is wrong in my gsap animations, or maybe with the useEffect, but they all works. (Not perfect on codeSandBox i have the impression but it's not the actual problem, it's ok on local)

I make a codeSandBox at this link ( https://codesandbox.io/s/goofy-cloud-nefv5?file=/src/App.tsx ) there is not the all the styles but we can see the problem.

The home page with a little timeline appear and when you scroll you have the pinned sections. I make three shortcuts on the top right with different target to scroll. But be careful before click on it, the browser can crash. Maybe you can check the code before to see if there is not an enormous mistake.

The files you maybe need to see and contains gsap code are: App.tsx, who gives props to the Shortcuts components, and pages components (Home, Description, ForWho and Parcours) and also utils.tsx file on Greensock folder.

I hope my explanations are good, if you don't understand something or need a more simple code tell me i will do it.

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

[OSUblake]

Welcome to the forums @Ngc1987

 

It looks like the problem is the attribute for event.target might be null, so you should probably use currentTarget, or even simpler, just pass in the value to callback. You should also put an empty array in your useEffects so they don't create new animations when the state changes.

 

// bad
useEffect(() => {
  ...
});
  
// good
useEffect(() => {
  ...
}, []);

 

https://codesandbox.io/s/vigilant-merkle-4hiup?file=/src/App.tsx

 

And that CodePen you posted with the killWhenFast function has been added to ScrollTrigger 3.8. See  the preventOverlaps and fastScrollEnd section here.

 

 

 

[Ngc1987]

Hello OSUblake and thanks a lot for your answer !

In fact, with currentTarget it works, and i put empty array on all my useEffects, and had preventOverLaps at true and fastScrollEnd to 1000 and the comportment is very better now.

But i have to ask you something else, if i'm on the first section and click to go to the last, so i jump another pinned section, and during the scroll there is a little time we see it's pinned. There is a way to ignore pin when scrollTo? If not, i will make shortest the pinned length for now.

 

And second question, i want when the user scroll manually, doesn't matter where he is on the page, happen something like the scrub, but for the window, not only the animations. I see this one it seems a little like i want, but it not make with only gsap i see. (https://codesandbox.io/s/cranky-brown-yvzss?file=/src/hoc.jsx )

Is there a way to do it with only gsap ?

[OSUblake]

4 hours ago, Ngc1987 said:

But i have to ask you something else, if i'm on the first section and click to go to the last, so i jump another pinned section, and during the scroll there is a little time we see it's pinned. There is a way to ignore pin when scrollTo? If not, i will make shortest the pinned length for now.

 

Not really, as it's not something that can be easily toggled on and off as pinning messes with the layout. The only way to minimize it is to do what you mentioned, having a shorter pinned length.

 

4 hours ago, Ngc1987 said:

Is there a way to do it with only gsap ?

 

That's something we might add in the future, but for now we have a demo in the .scrollerProxy() docs that only uses GSAP. However, it's a little more complicated to set up in React as you have make sure the smoothScroll is created before your other ScrollTriggers.

 

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

 

 

[Ngc1987]

Great, i'll go take a look on this.

Thank you very much for your answers and your help 😀

Have a nice day OSUblake