Jump into sections with ScrollTrigger in React

[darky98]

Hi, i tried to make this cool effect with React  and this is what i did: https://codesandbox.io/s/lingering-rain-03x71q?file=/src/components/Navbar.js The thing is that i want to jump into a section when i click any navbar link but as far as i know i cant use any states and when i use refs i get undefined.

I tried to copy and paste slideIn function into any onClick navlinks but it didint work, it breaks the whole app.

How can i achive this? Hope it was understood. Thanks

See the Pen PoWapLP by BrianCross (@BrianCross) on CodePen

[OSUblake]

Hi darky,

 

Here's a simpler version of that demo.

 

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

 

I'm guessing to make it work you will need to make the gotoSection function available to outside the effect, like with a ref.

gotoSection.current = gotoSection;

 

And then listen for changes in an effect.

useEffect(() => {
  gotoSection.current(...)
}, [someProp])

 

[darky98]

On 2/23/2022 at 2:31 PM, OSUblake said:

Hi darky,

 

Here's a simpler version of that demo.

 

 

 

 

I'm guessing to make it work you will need to make the gotoSection function available to outside the effect, like with a ref.

gotoSection.current = gotoSection;

 

And then listen for changes in an effect.

useEffect(() => {
  gotoSection.current(...)
}, [someProp])

 

Thank you so much, you saved my life haha, hope you have a good day