Umberto Posted November 19, 2022 Share Posted November 19, 2022 Hi, I wanted to disable ScrollSmoother in mobile, but I have a problem with the animation of the third image. When I resize the layout (min-width: 800px) the image disappears. it's probably an animation issue. Thanks for the help See the Pen NWzwzMG by umberto (@umberto) on CodePen Link to comment Share on other sites More sharing options...
Sukru Posted November 19, 2022 Share Posted November 19, 2022 Hi, I think this will solve your problem See the Pen gOKoaKw by sukruemanet (@sukruemanet) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 20, 2022 Share Posted November 20, 2022 I would definitely avoid loading="lazy" on your images - that prevents them from loading (off-screen) until you scroll down far enough, but then when they load they shift the layout around which can affect the scroll positions, etc. If you insist on using loading="lazy", you should certainly call ScrollTrigger.refresh() whenever the layout shifts due to a new image loading and getting rendered. Also, by default ScrollSmoother automatically disables smoothing on touch devices. Link to comment Share on other sites More sharing options...
Umberto Posted November 20, 2022 Author Share Posted November 20, 2022 14 hours ago, Sukru said: Hi, I think this will solve your problem Hi, unfortunately this solution doesn't work, when I resize the page the image disappears. Thank you all the same Link to comment Share on other sites More sharing options...
Umberto Posted November 20, 2022 Author Share Posted November 20, 2022 8 hours ago, GreenSock said: I would definitely avoid loading="lazy" on your images - that prevents them from loading (off-screen) until you scroll down far enough, but then when they load they shift the layout around which can affect the scroll positions, etc. If you insist on using loading="lazy", you should certainly call ScrollTrigger.refresh() whenever the layout shifts due to a new image loading and getting rendered. Also, by default ScrollSmoother automatically disables smoothing on touch devices. I tried to get rid of loading = "lazy", but it keeps giving me the same problem, even with different animations. What can I do? Thanks Link to comment Share on other sites More sharing options...
GSAP Helper Posted November 20, 2022 Share Posted November 20, 2022 Hi there! Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer: A clear description of the expected result - "I am expecting the purple div to spin 360degrees" A clear description of the issue - "the purple div only spins 90deg" A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great. Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted November 21, 2022 Solution Share Posted November 21, 2022 Hi, The issue is that you create the animations and when you go through the breakpoint those are never properly reverted. I'd recommend you to use Match Media for all your different scenarios in order to have a better control. This seems to work: const mm = gsap.matchMedia(); let smoother; const createFadeTweens = () => { const fadescroll = gsap.utils.toArray(".js-fade-scroll-1"); fadescroll.forEach((elem) => { /* Timeline & ScrollTrigger Instances Here */ }); const fadeImage = gsap.utils.toArray(".js-fade-scroll-2"); fadeImage.forEach((image) => { /* Timeline & ScrollTrigger Instances Here */ }); }; mm.add("(min-width: 800px)", () => { let skewSetter = gsap.quickTo(".js-skew", "skewY"), // fast clamp = gsap.utils.clamp(-20, 20); // don't let the skew go beyond 20 degrees. smoother = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", smooth: 2, normalizeScroll: true, ignoreMobileResize: true, effects: true, onUpdate: (self) => skewSetter(clamp(self.getVelocity() / -150)), onStop: () => skewSetter(0) }); createFadeTweens(); return () => smoother.kill(); }); mm.add("(max-width: 799px)", () => { createFadeTweens(); }); Here is a live example: See the Pen WNydVEJ by GreenSock (@GreenSock) on CodePen Happy Tweening! 3 Link to comment Share on other sites More sharing options...
Umberto Posted November 23, 2022 Author Share Posted November 23, 2022 Hi, this is perfect, although some animations are giving me problems, but I will try to fix them myself. Also I wanted to know if it is possible to disable only the Effects instead of all ScrollSmother. Thank you Link to comment Share on other sites More sharing options...
Rodrigo Posted November 23, 2022 Share Posted November 23, 2022 21 minutes ago, Umberto said: Also I wanted to know if it is possible to disable only the Effects instead of all ScrollSmother. Hi, I'm not sure about this. My best guess is that because the way ScrollSmoother works is rather difficult because the plugin actually is tweening an entire container element in order to create the animations based on the effects being passed. Still I'll ping @GreenSock so he can shed some light on this subject. Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted November 23, 2022 Share Posted November 23, 2022 You mean you want to create the effects initially, but then later you want to kill them? If so, I suppose you could: smoother.effects().forEach(trigger => trigger.kill()); Or set certain ones back to normal, as the docs say: // remove effects by setting back to defaults smoother.effects(".box", {speed: 1, lag: 0}); 2 Link to comment Share on other sites More sharing options...
Umberto Posted November 25, 2022 Author Share Posted November 25, 2022 Both solutions are perfect, only if I add smoother.effects (). forEach (trigger => trigger.kill ()); const createFadeTweens = () => { ..... }; mm.add("(min-width: 800px)", () => { let skewSetter = gsap.quickTo(".js-skew", "skewY"), // fast clamp = gsap.utils.clamp(-20, 20); // don't let the skew go beyond 20 degrees. smoother = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", smooth: 2, normalizeScroll: true, ignoreMobileResize: true, effects: true, onUpdate: (self) => skewSetter(clamp(self.getVelocity() / -150)), onStop: () => skewSetter(0) }); createFadeTweens(); ScrollHoriz(); /*return () => smoother.kill();*/ }); mm.add("(max-width: 799px)", () => { createFadeTweens(); smoother.effects().forEach(trigger => trigger.kill()); }); disables not only effects but also smoother = ScrollSmoother.create({ .... smooth: 2, .... }); In practice we have the exact same solution with: return () => smoother.kill (); Is it possible not to delete the "smooth: 2" option? Thanks Link to comment Share on other sites More sharing options...
Umberto Posted November 25, 2022 Author Share Posted November 25, 2022 All my animations, at the moment, work perfectly, only by inserting smoother.effects (). forEach (trigger => trigger.kill ()); or return () => smoother.kill (); the Counter no longer works. When I load the page everything is ok, but if I resize the layout, the numbers after the comma are no longer displayed. See the Pen ExREwjx by umberto (@umberto) on CodePen Thanks Link to comment Share on other sites More sharing options...
Rodrigo Posted November 25, 2022 Share Posted November 25, 2022 Hi, Did you managed to fix this? I tried your last codepen example and as I resize the screen, the numbers with the commas in them are displayed all the time. In fact if I resize as the number animation is happening everything is working as expected. Maybe I'm missing something or just not understanding you correctly. Happy Tweening! Link to comment Share on other sites More sharing options...
Umberto Posted November 26, 2022 Author Share Posted November 26, 2022 Hi, sorry for my bad english. Scroll to the bottom of the page, you will see that the counter works very well, then resize the layout and you will see that all the numbers after the comma are not displayed. Thanks Link to comment Share on other sites More sharing options...
GreenSock Posted November 26, 2022 Share Posted November 26, 2022 That's because you're altering the textContent directly inside of an onUpdate, but you never revert those values when the matchMedia() doesn't match anymore. You need to do proper cleanup. You can use the cleanup function that you can return from inside the matchMedia(): See the Pen NWzzgqE?editors=1010 by GreenSock (@GreenSock) on CodePen You don't need to manually loop through all those effects and kill them either. It looks like you just want to kill the ScrollSmoother (which of course would kill those effects too). Does that help? 1 Link to comment Share on other sites More sharing options...
Umberto Posted November 29, 2022 Author Share Posted November 29, 2022 On 11/27/2022 at 12:27 AM, GreenSock said: That's because you're altering the textContent directly inside of an onUpdate, but you never revert those values when the matchMedia() doesn't match anymore. You need to do proper cleanup. You can use the cleanup function that you can return from inside the matchMedia(): You don't need to manually loop through all those effects and kill them either. It looks like you just want to kill the ScrollSmoother (which of course would kill those effects too). Does that help? This is perfect. What I intended to do is just make all animations work, and just get rid of data-speed and data-lag. But this can be fine. 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