Linking to a specific spot with ScrollTrigger

[Samalander]

Hey There,

 

I have an experemental website where elements show and hide themselves instead of scrolling out of view. I'd like to let users jump to specific sections. How can I do this? 

 

See the Pen rNdxBZB by samalander0 (@samalander0) on CodePen

[GreenSock]

You could drop a label into the timeline at the spots you want to navigate, and then use the ScrollTrigger's labelToScroll() method: 

 

See the Pen bGvENzW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?

[Samalander]

15 minutes ago, GreenSock said:

Does that help?

Not really sure how I can make this work in React (Next.js). Would I be able to do this inside of an onClick function? Not really sure how or why the code that you wrote works, but when I try, it returns this error:

 

Here's some snippets of code:

 

And here's the full code: https://replit.com/@Samalander/Samalander?embed=true#pages/index.jsx

 

[GreenSock]

That error indicates that your timeline didn't have a ScrollTrigger applied to it at that point. Your code is only adding one if "normal" is truthy, so perhaps that was evaluating as false when your useEffect() ran. 

[Samalander]

16 hours ago, GreenSock said:

That error indicates that your timeline didn't have a ScrollTrigger applied to it at that point. Your code is only adding one if "normal" is truthy, so perhaps that was evaluating as false when your useEffect() ran. 

So how could I fix this? I believe that the useEffect() function runs when React renders, and all of the GSAP stuff is inside of there because it only works after everything is rendered. This means that when I have an onclick function an element that needs to do GSAP stuff, it won't work because all of the elements get rendered before the GSAP stuff is run, so it will always generate an error.

[GreenSock]

I'm not familiar with Replit and it doesn't look at all convenient to make edits - it's always best to use something like CodeSandbox or CodePen that makes editing easy. Here's a React starter template: https://codesandbox.io/s/gsap-react-starter-ut42t

 

If I understand your question correctly, I think you can just useRef() for your timeline, sorta like: 

 

const timeline = useRef();

useEffect(() => {
  timeline.current = gsap.timeline();
  ...
}, []);
...

<a onClick={() => timeline.current && gsap.to(window, {scrollTo: timeline.current.scrollTrigger.labelToScroll("label")})}>

 

This boils down to logic in your code and timing issues, it's not a GSAP thing. Just make sure that if you're going to try to tap into a timeline's scrollTrigger property, that you've set one up.

 

Does that help?