Andrey75 Posted August 26, 2021 Share Posted August 26, 2021 Hello everyone. I have a problem with changing classes when scrolling the page. I think to use GSAP+Scrolltrigger+Locomotive scroll What I need. I have a logo and menu. I would like to change the color of the logo and menu when changing the background. One class was removed and the other was added. If the section is a black - menu and logo class changes to the "light" and, on the contrary, the "light" is removed and changes to "dark". I just start studying it.) Help me please. See the Pen JjJdKBO by AnChirkin (@AnChirkin) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 26, 2021 Share Posted August 26, 2021 Hey there! Could you pop this in a minimal demo for us. Thanks! Link to comment Share on other sites More sharing options...
Andrey75 Posted August 26, 2021 Author Share Posted August 26, 2021 Yes sure ) Link to comment Share on other sites More sharing options...
GreenSock Posted August 27, 2021 Share Posted August 27, 2021 It looks like you were using the same ".dark" element as the trigger for ALL of those ScrollTriggers. I assume that maybe this is more like what you wanted, but I'm not really sure I understand what you want: See the Pen vYZOpmw?editors=0010 by GreenSock (@GreenSock) on CodePen If it were me, I'd probably simplify things so that I just use one loop and do all the animation with GSAP instead of swapping classes and relying on CSS transitions, but that's just me Happy tweening! 2 Link to comment Share on other sites More sharing options...
Andrey75 Posted August 27, 2021 Author Share Posted August 27, 2021 It is perfectly! It is beautiful and wonderful! You are great people if you understand so well. I'm just at the beginning of this path.) This is 90% solution of my task. I see that it was in the right direction. toggleClass: { targets: '.logo, .ctn-triggers', className: 'light' } - оnly adds class 'light' Now it: <div class="ctn-triggers link change light"> Scroll and <div class="ctn-triggers link change"> I do not know how to make it like this: <div class="ctn-triggers link change light"> - add class 'light' - Ok Scroll and <div class="ctn-triggers link change dark"> - remove class 'light' and add class 'dark' - How? Link to comment Share on other sites More sharing options...
GreenSock Posted August 27, 2021 Share Posted August 27, 2021 If you're trying to add/remove various other classes, that's not what toggleClass is for. That's simply for toggling a class. But it should be quite easy to accomplish what you're asking by using the onToggle callback. Sorta like: onToggle: self => { let classList = self.trigger.classList; if (self.isActive) { classList.add("light"); classList.remove("dark"); } else if (self.isActive) { classList.add("dark"); classList.remove("light"); } } But again, I'm a much bigger fan of just using GSAP to do those animations. Then you can just animate to the darker background color, set the scrollTrigger to that element, and then toggleActions: "play reverse play reverse". But it's totally up to you 1 Link to comment Share on other sites More sharing options...
Andrey75 Posted August 28, 2021 Author Share Posted August 28, 2021 Thank you very much for your attention and patience. Your decision seems to me very elegant and beautiful. But... One problem : In Safari : TypeError: undefined is not an object (evaluating 'self.target.classList') In Chrome : Uncaught TypeError: Cannot read property 'classList' of undefined It seems I understand what the problem is but I confused in the syntax ((( 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 28, 2021 Share Posted August 28, 2021 Could you pop a minimal demo in so we can see how you've applied the solution? Link to comment Share on other sites More sharing options...
Andrey75 Posted August 28, 2021 Author Share Posted August 28, 2021 I think that the error is due to the fact that it is not known where to add or remove a class. But I could be wrong.) Link to comment Share on other sites More sharing options...
GreenSock Posted August 29, 2021 Share Posted August 29, 2021 Sorry about the confusion there - it was late at night and my brain was foggy. Typo. It should be trigger, not target. See the Pen yLXYpvM?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Andrey75 Posted August 29, 2021 Author Share Posted August 29, 2021 Hi. Thanks! No. It can not work correctly as there is no logic work. Look. When we work through the "ToggleClass" we have "targets" where we explicitly specify classes to which you apply it's '.logo, .ctn-triggers'. When we use "onToggle" we have forEach(el) and "trigger: el". Trigger - (el). Right?) "onToggle" does not know which items to add and remove class. Sorry for my English.))) This is not my native language. :) I think that need to clearly specify the elements ('.logo, .ctn-triggers') that we will sort. But I can be wrong. Link to comment Share on other sites More sharing options...
GreenSock Posted August 30, 2021 Share Posted August 30, 2021 Oh, that's just all plain JavaScript logic unrelated to GSAP/ScrollTrigger. I assume you want this?: See the Pen WNOreQR?editors=0010 by GreenSock (@GreenSock) on CodePen It just loops through any elements that have the "change" class when a section activates and if that section has a class of "dark", it applies "light" to the ".change" elements and vice-versa. 1 Link to comment Share on other sites More sharing options...
Andrey75 Posted August 30, 2021 Author Share Posted August 30, 2021 Oh yeah! It works great! You are my hero! I spent yesterday all day to understand. And when I look at your code, I see where I made only one stupid error. Because I first wrote the code for using jqwery and then translated it to GSAP.))) And I see minor differences in the principles of work. I'm really "Newbie".))) I think completely abandon jQuery. I see that GSAP has everything I need and even more. Unfortunately in Russia, still know little about GreenSock. But still I fell in love with this library. Thank you very much! 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 30, 2021 Share Posted August 30, 2021 Are there any good web conferences in Russia @Andrey75? I should come over and hype people up when the world opens up again! 3 Link to comment Share on other sites More sharing options...
Andrey75 Posted August 30, 2021 Author Share Posted August 30, 2021 Oh sure. They were before the covid. There are many good developers and web designers in Russia. Russia is a huge country. You have a very good wish @Cassie and this is very cool! But the world will not open very soon. Link to comment Share on other sites More sharing options...
Cassie Posted August 30, 2021 Share Posted August 30, 2021 I'll keep an eye out when things start opening up again ☺️ One day! 1 Link to comment Share on other sites More sharing options...
Andrey75 Posted August 31, 2021 Author Share Posted August 31, 2021 Oh sure. Why not? 👍 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