Andrey75

Thanks for your support.

It seems to work fine on desktop, but doesn't work on mobile. "smoother.paused" doesn't work on mobile.

Thank you! This works great. I saw my mistake.

Hi. Help me please. If I use let mm = gsap.matchMedia(); mm.add("(min-width: 600px)", () => { if (ScrollTrigger.isTouch === 0) { let smoother = ScrollSmoother.create({ content: "#content", smooth: 1, ignoreMobileResize: true, effects: true }); } return () => { const wrapper = document.querySelector('.ScrollSmoother-wrapper'); wrapper.outerHTML = wrapper.innerHTML; } }); // menu button if (!$('body').hasClass('menu-open')) { smoother.paused(true); } else { smoother.paused(false); } $('body').toggleClass('menu-open'); // Error Uncaught TypeError: smoother is undefined

Thanks for your reply and your participation. I really appreciate this. "position to fixed" solved the scrolling problem, but did not return the page to top. This is because scrollsmoother now uses <div id="wrapper"> <div id="content"> I solved the problem and added document.body.scrollTop = document.documentElement.scrollTop = 0;

Hello. I have a problem with preloader + Scrollsmoother. It works great when start loaded. But when scrolling and then refreshing the page, it does not start the page from the beginning. I noticed that this is a problem if use Scrollsmoother. Thanks for your help and support.

Oh sure. Why not? ?

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.

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!

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.

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.)

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 (((

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?

Yes sure )

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.