Nav links behavior

[ysmuglov]

There is two problems with this pen:

• two scrollbars 😬
• nav links are working, but I can't properly set an active one.

I am totally sure that there is a conflict somewhere, but unfortunately I am still new to GSAP to find it by myself. And most importantly - how to resolve it.
I will highly appreciate a working example, so I could use it as a baseline for my projects.

There will also be standard(non-GSAP) blocks before and after this section (so I can't use start:0 and end:max), as well as a progress bar, but those are questions for another topic

See the Pen wvXWWvz by iBasher (@iBasher) on CodePen

[Trapti]

Here is working code 

 

See the Pen ZEROKBB?editors=0010 by tripti1410 (@tripti1410) on CodePen

[ysmuglov]

10 hours ago, Trapti said:

Here is working code 

Thanks, this is much better. ❤️
Sorry for my initially poor explanation, but the links are intended to be highlighted not only onClick but while you scroll as well. This pen as example: 

See the Pen gOmRyRP by gregOnCodePen (@gregOnCodePen) on CodePen

.

Also when I click on a link, the scroll position is a bit off (the text opacity is less than 100%).

[GreenSock]

Are you trying to do this?: 

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

 

Also, be careful about doing a regular scrollTo tween that targets a particular element. It works fine in this case because you're not doing any pinning that's affecting positioning, but if you need the scrollTo to factor in ScrollTrigger pinning (affecting positioning), check out the helper function in the docs for that. 

 

Enjoy!

[ysmuglov]

1 hour ago, GreenSock said:

Are you trying to do this?: 

Yes, this is exactly what I am trying to do. The problem is I can't get it working in my particular setup for unknown reasons. Something is just off all the time 😭

[GreenSock]

4 minutes ago, ysmuglov said:

The problem is I can't get it working in my particular setup for unknown reasons. Something is just off all the time 😭

Bummer! Unfortunately we can't help much unless we can see a minimal demo that clearly shows the issue. If you still need help, please provide one of those and we'd be happy to answer any GSAP-specific questions. 

[ysmuglov]

13 minutes ago, GreenSock said:

Bummer! Unfortunately we can't help much unless we can see a minimal demo that clearly shows the issue. If you still need help, please provide one of those and we'd be happy to answer any GSAP-specific questions. 

I have provided it, in my first post

[GreenSock]

9 hours ago, ysmuglov said:

I have provided it, in my first post

Oh, it looked like you switched to something else, so I solved for that. 

 

You had various problems related to your CSS as well as the ratios you were using for your calculations. For example, you were assuming that each panel would be at 100% opacity in scroll increments of innerHeight, but that's not true because you set up your timeline to skip the initial fade in for the first panel and skip the fade out on the last panel and you set the "end" to be 4.5x the innerHeight.

 

Here's how I'd do it: 

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

 

Is that more like what you wanted? This approach gives you a lot of flexibility. It's all tied directly into a central timeline for all the timings, so you can stretch it out as far as you want, add more panels, whatever. I even applied snapping.

 

I hope that helps. 

[ysmuglov]

8 hours ago, GreenSock said:

Here's how I'd do it

I'm speechless. That is actually absolutely amazing! 
With a few more tweaks, I can even add non-gsap sections and make navigation sticky!
Thanks to everyone, especially @GreenSock!
Here is the final result I was looking for.

See the Pen ZERpYVE by iBasher (@iBasher) on CodePen