Umberto Posted January 10, 2023 Share Posted January 10, 2023 Hi, I wanted to fix an issue with the Preload page. I wanted to block the scrolling of the preload scrollbar, but I saw that after loading the percentage (100%) the scrollbar becomes visible and does not wait for the "LOADING" text to load. Can you help me? Thank you See the Pen dyjvqrR by umberto (@umberto) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 10, 2023 Share Posted January 10, 2023 Hi, The issue is that you're setting the overflow to auto before the timeline even starts: const showDemo = () => { document.body.style.overflow = "auto"; document.scrollingElement.scrollTo(0, 0); const tl = gsap.timeline({}); /* Timeline Instances Here */ }; imagesLoaded(wrapImg).on("progress", updateProgress).on("always", showDemo); Just update the overflow style using an onComplete callback in the timeline: const showDemo = () => { document.scrollingElement.scrollTo(0, 0); var tl = gsap.timeline({ onComplete: () => document.body.style.overflow = "auto", }); /* Timeline Instances Here */ }; imagesLoaded(wrapImg).on("progress", updateProgress).on("always", showDemo); That seems to work the way you expect. Let us know if you have more questions. Happy Tweening! Link to comment Share on other sites More sharing options...
Umberto Posted January 11, 2023 Author Share Posted January 11, 2023 This job is perfect. 1. I need to block scrolling too, in fact, during loading, if I try to scroll after loading, the page is in the wrong position and not at the beginning. 2. I also tried with: // setters smoother. paused(true); // getters if (!smoother.paused()) { // do stuff... } but I did not succeed. I searched the forum for examples but couldn't find anything. Is this possible? Thank you Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted January 11, 2023 Solution Share Posted January 11, 2023 Hi, What you should do is either create the ScrollSmoother instance and pause it immediately. Then when the loading animation is completed un-pause it: 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) }); smoother.paused(true); // Once the loading tween is completed const showDemo = () => { document.scrollingElement.scrollTo(0, 0); var tl = gsap.timeline({ onComplete: () => { document.body.style.overflow = "auto"; smoother.paused(false); }, }); /* Timeline Instances Here */ }; Another approach would be to create some sort of init method that handles your MatchMedia stuff, as well as your ScrollSmoother instance and run that once the loading is completed: const myInit = () => { // Initialize all your MatchMedia and ScrollSmoother stuff here }; const showDemo = () => { document.scrollingElement.scrollTo(0, 0); var tl = gsap.timeline({ onComplete: myInit, }); /* Timeline Instances Here */ }; Yet another option is to prevent the default behaviour in the scroll event on the window object until the loading is completed: // At the start of your app const preventScroll = (e) => { e.preventDefault(); }; window.addEventListener("scroll", preventScroll); const showDemo = () => { document.scrollingElement.scrollTo(0, 0); var tl = gsap.timeline({ onComplete: () => { document.body.style.overflow = "auto"; window.removeEventListener("scroll", preventScroll); }, }); /* Timeline Instances Here */ }; Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Umberto Posted January 12, 2023 Author Share Posted January 12, 2023 Your work is perfect. Thank you for your time 1 Link to comment Share on other sites More sharing options...
Umberto Posted January 18, 2023 Author Share Posted January 18, 2023 I ask for one last help. I have tested with all animations and they work perfectly. I have only one problem with Draggable Slider. 1. In the first example, if I scroll while loading, the page stays fixed. 2. In the second example, I didn't put Draggable Slider in the HTML and when I scroll while loading the page just falls apart and doesn't stay fixed. See the Pen xxJXePJ by umberto (@umberto) on CodePen See the Pen gOjXrPM by umberto (@umberto) on CodePen Where am I wrong? Link to comment Share on other sites More sharing options...
Rodrigo Posted January 18, 2023 Share Posted January 18, 2023 Hi, There are some errors in the console on the second example: GSAP target .js-skew not found let skewSetter = gsap.quickTo(".js-skew", "skewY") Uncaught TypeError: Cannot read properties of null (reading 'querySelector') const proxy = container.querySelector(".proxy"); 3 hours ago, Umberto said: when I scroll while loading the page just falls apart and doesn't stay fixed. I scrolled down and nothing broke, the scroll position wasn't 0 but everything is working as expected. I don't know what you mean by falling apart, but in Chrome and Firefox on Ubuntu 22 and 20 everything works except for the scroll position 🤷♂️ Happy Tweening! Link to comment Share on other sites More sharing options...
Umberto Posted January 19, 2023 Author Share Posted January 19, 2023 I probably explained myself badly. Indeed, in the 1st example if I scroll while loading, the position is 0, while in the second the page continues to scroll down and therefore there is no position 0. I wanted this, that the one in the second example started from position 0 I hope I was clear Sorry for my English Link to comment Share on other sites More sharing options...
Umberto Posted January 19, 2023 Author Share Posted January 19, 2023 I think I solved it like this: See the Pen NWBwoya by umberto (@umberto) on CodePen Is that right? 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted January 19, 2023 Share Posted January 19, 2023 Hi, You can add a scrollTo call in the onComplete callback: const Preload = () => { document.scrollingElement.scrollTo(0, 0); var tl = gsap.timeline({ onComplete: () => { document.body.style.overflow = "auto"; window.scrollTo(0,0); // <- Here smoother.paused(false); } }); }; Another option is find a way to prevent the scroll event in the body element and allow it back in the onComplete callback. Finally your second example still has those errors I mentioned before. Happy Tweening! Link to comment Share on other sites More sharing options...
Umberto Posted January 19, 2023 Author Share Posted January 19, 2023 I will also try your new solution. My previous post I found a new solution, can you take a look if everything is correct? Link to comment Share on other sites More sharing options...
Rodrigo Posted January 19, 2023 Share Posted January 19, 2023 21 minutes ago, Umberto said: My previous post I found a new solution, can you take a look if everything is correct? Yep, everything works the way you intend, that's the dream! Happy Tweening! Link to comment Share on other sites More sharing options...
Umberto Posted January 19, 2023 Author Share Posted January 19, 2023 Thank you for your time 🙏 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