DaemonHK Posted October 19, 2020 Share Posted October 19, 2020 Hello and sorry for my English... On my pen I was try to create menu with content section with pin module. But something wrong happening (don't seen on example(() - when I click on link "Section 3", page scrolled to Section 4 Content and stoping. So, can anybody help me with full GSAP example (or help update my example with some jq) with fixed/sticky menu, when page scrolled to needed section, with pin blocks into content section and activated menu link when pin is visible? P.S. If needed, I can update my example for more code and details. See the Pen XWKKeWb by daemonhk (@daemonhk) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted October 19, 2020 Share Posted October 19, 2020 Hey @DaemonHK, Welcome to the GreenSock Forum. And here is your welcome present. See the Pen rNxwpOm?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 4 Link to comment Share on other sites More sharing options...
DaemonHK Posted October 19, 2020 Author Share Posted October 19, 2020 THX @mikel, but my main problem is - gsap.to(window, {scrollTo: e.target.getAttribute("href")}); When I click by link, wasn't happening anything or code get false ID, but ID from link and section are same. Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 19, 2020 Share Posted October 19, 2020 4 hours ago, DaemonHK said: my main problem is - gsap.to(window, {scrollTo: e.target.getAttribute("href")}); When I click by link, wasn't happening anything or code get false ID, but ID from link and section are same. Hey DaemonHK. I don't understand your issue. What's wrong in the demo that you posted? Can you please try rephrasing? Link to comment Share on other sites More sharing options...
DaemonHK Posted November 9, 2020 Author Share Posted November 9, 2020 Hi, ZachSaucier! Everything is OK now, but I have new problem(( When scrolling to end off pins then opens next static block is very fast, without any animation. I renew my Pen - for show it. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 9, 2020 Share Posted November 9, 2020 You've got a lot of stuff going on there. We don't recommend using your own scroll function like that to constantly check the scroll position of things because the performance is very bad. We recommend setting up ScrollTriggers for that sort of thing as they will perform much better. Additionally we recommend GSAP's ScrollToPlugin over using jQuery's animations for your anchor clicks. It's also unclear to me what you're wanting the ScrollTriggers do that you do have. Link to comment Share on other sites More sharing options...
DaemonHK Posted November 10, 2020 Author Share Posted November 10, 2020 I need: scrolling with pin animation, adding active class to current menu point, click to menu and scrolling to needed block, normal animation to static block after pin blocks)) I have a problem with GSAP clicking to menu - nothing is happening or document scroll to another block, but I'm still working with it... Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 10, 2020 Share Posted November 10, 2020 There's a couple of threads that change the "active" state of navigation on scroll - is that what you're looking for? 1 Link to comment Share on other sites More sharing options...
DaemonHK Posted November 11, 2020 Author Share Posted November 11, 2020 This too, but main question is fast change to static block after GSAP blocks (I don't need it). You can view it on my pen. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 11, 2020 Share Posted November 11, 2020 That's not caused by GSAP/ScrollTrigger. That's caused by your custom scroll related code that I recommended you not use. You can test by getting rid of everything after line 14. How about you follow my recommendations from the posts above to try and get it working the way you need it to work and then post back here if you're still having trouble? Link to comment Share on other sites More sharing options...
DaemonHK Posted November 20, 2020 Author Share Posted November 20, 2020 I'm sorry for long answer... I have renew my codePen (jQuery only for adding class to fixed menu). 1. Now all clicks execute by GSAP and it doesn't work by clicking on fixed menu (I need to scroll to block when click on its menu point). 2. MAIN question is - when I scroll to the end of GSAP's blocks to last static block - is there no animation, jast jumping from block to block. How I can do smooth change from GSAP blocks to static block and backward? Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 20, 2020 Share Posted November 20, 2020 8 hours ago, DaemonHK said: How I can do smooth change from GSAP blocks to static block and backward? Don't set pinSpacing: false. See the Pen rNLEaBO?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
DD77 Posted May 26, 2021 Share Posted May 26, 2021 On 10/19/2020 at 8:43 AM, mikel said: Hi @mikel I have a quick question for you. I have the functionality that woks exactly like your demo below. I need to add a class Active to each button instead of the background color. Whats the best approach? I know className: '-=' className: '+=' are not longer supported? Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
Cassie Posted May 26, 2021 Share Posted May 26, 2021 Heya! You can use toggleClass like this... See the Pen ba2c5243a07686ef1fdbcb0f9c76a10b by cassie-codes (@cassie-codes) on CodePen If you have any more questions, can you start a new thread? Thanks. 1 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