Playing a ScrollTrigger animation when navigating using ScrollTo

[NM Wardour]

Hi, I have setup a page with ScrollTrigger sections based on the demo CodePen. Adding in the navigation works as expected.

 

However in the demo when you click on the section 4 link. There is a blank view. To an end user something is wrong. (We know you need to scroll )

How can I trigger the timeline to scroll to a state where the user can see something in this section?

Thanks

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

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

Hi @NM Wardour welcome to the forum! 

 

We love seeing minimal demo's that you've created, even once that don't work! That way we can see what you've already tried and thus better help you understand why things do or do not work.

The pen you've shared works by scrolling to the beginning of the current ScrollTrigger. What I've done right now is check if the current item being clicked is the 4th one in the list (arrays start counting from 0 so the 4th would be index 3) and then just add an arbitrary number to it if that is the case (eg 200px), so now of the 4th item it will scroll to the start of the ScrollTrigger + 200px. Hope it helps and happy tweening! 

 

See the Pen LYJWENQ?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

What you could do is get the start of the ScrollTrigger and the end of the ScrollTrigger (linkST.end) and calculate the total distance from it and then multiply that by 0.5 to get 50% of that value to scroll to the middle or any other % value. But I'll leave that math for you to play with!