GSAP Horizontal page scroll with moving anchor navigation

[vencule]

Hi guys.

 

I need help!
I have page with horizontal scroll and that works perfectly 

I need on scroll when next div enters the viewport navigation to move to left ( for example if scroll enters div with id #link-1 that anchor link will be first item in navigation on the left and previous will be removed from viewport )
This is example how this should work https://www.awesomescreenshot.com/video/10409994?key=afa5f9901ad56a27938639ca405ea175 (example is created with pure js, but now need to be created with GSAP )

 

Also on anchor click page should scroll to div with that id

I attached codepan with horizontal scroll 

 

Thanks!

See the Pen vYRrMXE by vencule (@vencule) on CodePen

[Cassie]

Hi there!

 

We're happy to guide you through as you attempt it and answer questions if you get stuck,  but unfortunately we just don't have the resources to code up full solutions for people. I would suggest first creating a timeline for the menu - without scrollTrigger. Just focus on the layout and the structure of the animation first. Then one you've got that solved start thinking about how you would tie that in to scroll. Sometimes it's as simple as just adding a scrubbed scrollTrigger, other times it may need breaking apart a bit. But it always helps to have an idea of how the animation works first.

 

If you're truly stuck you can optionally post in the "Jobs & Freelance" forum for paid consulting, or contact us directly.