Click to Navigate to a section using GSAP

[gsapnooby]

The animation as you see happens where center section A expands and shows three nav indicators on the right. This section contains three sub-sections A1, A2 and A3 vertically stacked. How do I make the nav indicators clickable and navigate to a particular slide inside the section A. When click on

 

Nav A1 ---shows--> slide A1, Nav A2--> shows--> Slide A2 and Nav A3 -- shows --> Slide A. 

See the Pen VwGwdGa by yumelabs (@yumelabs) on CodePen

[mvaneijgen]

You can create one big timeline and add labels to that timeline: https://greensock.com/docs/v3/GSAP/Timeline/addLabel() and then use the .tweenTo() function to animate to those labels in the timeline: https://greensock.com/docs/v3/GSAP/Timeline/tweenTo()

 

You will probably need to make two timelines, one for ScrollTrigger and the other for the click interaction and keep in mind that the ScrollTrigger timeline probably doesn't know where the click timeline left off, so that will need some fixing if you scroll backwards while having clicked. 

[Ezra Siton]

A1, A2, A3 looks like normal slider / or "tabs" (No related to GSAP). The best idea is to use swiper -or- splide (Very easy to bind custom navbar to slides by `slideTo(index)` idea). 

 

To control the show of A1 to A2 to A3 by GSAP - you could add some scroll animation related to this sections (And than use labels or scrollTo). The idea +-: 

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

 

 

[GreenSock]

Yeah, it really depends on exactly what effect you're going for, like if you want native scroll to reveal each section or if you just want users to be able to click on those smaller nav <div> elements to get there, etc. Pretty much anything is possible...it's just a matter of wiring up all the custom functionality and logic. It's not really something we can build out for you for free here in these forums, but we do offer paid consulting services so feel free to reach out to us if you'd like to pursue that. 

 

Good luck with the project, @newusergsap