Using fixed sections with ScrollTrigger in combination with anchor links

[spearquit]

Hi all,

 

I’ve slightly modified a Codepen demo that runs as fixed full page sections:

 

 

The sections work how I’d like – but I’m a bit stumped on getting anchor links with ScrollToPlugin to scroll to sections (preferably dynamically). I may just be entirely the wrong setup approach using fixed sections as there's nothing to anchor to,  but it’d be great to find out if I could get ScrollTo to work with it.

 

I’ve scratched around looking at ST demos that feature anchors / menus, ie

See the Pen MzWzyv, by PointC (@PointC) on CodePen

See the Pen qBbmLr, by bassta (@bassta) on CodePen

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

but I can’t see how these solutions could apply to fixed sections. 

 

Any thoughts, approaches or help would be hugely appreciated.

 

Thanks again,

 

 

See the Pen VwBKMLN by spearquit (@spearquit) on CodePen

[GreenSock]

There are a lot of ways to approach this. Here's one:

See the Pen LYBbWLz?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is that what you were looking for? 

[Rodrigo]

Well... Jack beat me to it 🤷‍♂️

 

But here is another approach:

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

 

Happy Tweening!

[spearquit]

Oh wow, yeah, that’s exactly what I was looking to do. Thankyou @Jack & @Rodrigo, really appreciated. 

 

I had planned on turning the nav into a timeline that indicates what section you’re on as you scroll through them. I had thought onToggle / adding classes,  similar to this ScrollTrigger demo:

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

would be the approach. But I guess being fixed means it’s not going to know where to add it anyway? Unsure what could work within GSAP here.

 

I’m wondering how this could be achieved here? Slightly updated pen:

See the Pen GRBNZwo by spearquit (@spearquit) on CodePen

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

There is no need to use a bunch of methods and other ScrollTrigger instances for that, just use the ones you already created for the panels and use the index on that loop and the event callbacks ScrollTrigger has in order to add/remove the active class.

 

Hopefully that helps. Let us know if you have more questions.

 

Happy Tweening!

[spearquit]

That's fantastic, thankyou for the info. I was certainly overcomplicating it, doh!

 

Thanks again