Jump to content
GreenSock

steen hjalmar larsen

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

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×