REACT / GSAP -- Horizontal snapping sections (advanced),with internal navigation

[steen hjalmar larsen]

REACT / GSAP
Trying to use "Fake Scroll Horizontally (Advanced)" along with an internal navigation
Having a problem getting the internal navigation to work every time. Sometimes it scrolls to a wrong section and sometimes it works fine?

It works fine with normal scroll

Here is a link to codesandbox

All help is welcome

[SteveS]

I swapped your useEffect for a useLayoutEffect and it seems to work.

From what I can tell the issues you are describing are problems with the way you are handling the links in combination with snapping.

Specifically when you are on panel 1 and click on 3 it will go to 4, and when you are on 4 and click on 2 it will go to 1. I think this is because the scrollTo is overshooting by like 1 pixel and firing the event to go to the previous/next slide. Try to boil the effect down to a really simple example and see if it still bugs.

[steen hjalmar larsen]

As far as I can see, replacing useEffect with useLayoutEffect doesn't change anything
Oddly enough, clicking twice on the same link with a slight time shift seems to fix the problem
It's not a solution I'm particularly happy with, so if someone has a better solution I'd greatly appreciate it

Has opdatede my codesandbox 

 

 

[GreenSock]

I noticed you didn't pass an empty dependency Array to your useEffect() - that's a common mistake. Otherwise, it'll fire on every render. 

 

Going to the "wrong" section is likely because of the inertia that's applied by default but you can turn that off: 

// OLD
snap: 1 / (panels.length - 1)

// NEW
snap: {
  snapTo: 1 / (panels.length - 1),
  inertia: false
}

 

https://codesandbox.io/s/scrol-animate-x-pos-gsap--react-forked-6hpqq5?file=/src/App.js

[steen hjalmar larsen]

 

Thanks for the response Jack, unfortunately setting "initia: false" made no difference
As I understand it, when we add an empty dependency Array in REACT, the useEffect is only activated on load of the page, where does the error consist of that?
By the way, removing the dependency array does not change anything in relation to the error I have
Once again, thank you for your response

[steen hjalmar larsen]

Hi Jack
Tried another variation of your suggestion which seems to work
  snap: {
               snapTo: 1 / (panels.length - 1),
               inertia: false,
               duration: { min: 0.1, max: 0.1 }
   }
I remembered that I had used something similar another time
Thanks for pointing me in the right direction