ysmuglov Posted November 3, 2022 Share Posted November 3, 2022 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 Link to comment Share on other sites More sharing options...
Trapti Posted November 4, 2022 Share Posted November 4, 2022 Here is working code See the Pen ZEROKBB?editors=0010 by tripti1410 (@tripti1410) on CodePen 1 Link to comment Share on other sites More sharing options...
ysmuglov Posted November 4, 2022 Author Share Posted November 4, 2022 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%). Link to comment Share on other sites More sharing options...
GreenSock Posted November 4, 2022 Share Posted November 4, 2022 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! Link to comment Share on other sites More sharing options...
ysmuglov Posted November 4, 2022 Author Share Posted November 4, 2022 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 😭 Link to comment Share on other sites More sharing options...
GreenSock Posted November 4, 2022 Share Posted November 4, 2022 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. Link to comment Share on other sites More sharing options...
ysmuglov Posted November 4, 2022 Author Share Posted November 4, 2022 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 Link to comment Share on other sites More sharing options...
GreenSock Posted November 5, 2022 Share Posted November 5, 2022 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. 1 Link to comment Share on other sites More sharing options...
Solution ysmuglov Posted November 5, 2022 Author Solution Share Posted November 5, 2022 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 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now