AlenN Posted January 1 Share Posted January 1 hello, i am new here and a beginner in gsap. I would like to create a preload on my page, which appears when the page loads and then my entire website is displayed. At the end I will add animations to the individual sections or divs again. My question relates to how I create this animation so that my website is then displayed. So far I've only managed to get "welcome" to appear after the animation. I can't scroll down... See the Pen ZEPbXwK by alen95 (@alen95) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted January 2 Share Posted January 2 Welcome to the forums, @AlenN. It looks like you've got overflow: hidden on the <body>, so you'll never be able to scroll. Maybe you meant to do overflow-x: hidden (and allow overflow-y to be auto)? Another approach would be to load your site into a container <div> that has display: none, and then when it's loaded, you set display: block, put it underneath your loader, and just animate your loader out to reveal the content. There are many ways you could approach it. Good luck! 1 Link to comment Share on other sites More sharing options...
AlenN Posted January 3 Author Share Posted January 3 First of all, thank you very much for the quick answer. I just tried "overflow-x: hidden", but this doesn't serve my purpose. I don't want you to be able to scroll down until the preload transition is completed. Is there a way to switch the overflow to visible after the animation using GSAP? The second answer would be more helpful to me, but since I'm relatively new to the topic, I'm wondering how is it actually common to design such preload transitions? or do they usually already have the body visible? Link to comment Share on other sites More sharing options...
PointC Posted January 3 Share Posted January 3 26 minutes ago, AlenN said: Is there a way to switch the overflow to visible after the animation using GSAP? You can use an onComplete call after the timeline finishes and set the body visibility like this: See the Pen ddd4e5c04476f3e845baf11ea6a52829 by PointC (@PointC) on CodePen 1 Link to comment Share on other sites More sharing options...
AlenN Posted January 17 Author Share Posted January 17 Thank you very much for the responses. Especially the last one helped me in my case. What happens with the ‘oncomplete call’ if I now add more animations that should only load later during scrolling or after the transition? So, what is the function of the ‘oncomplete call’? Will it happen after all animations, including those shown, or only after these shown ones, and the remaining ones I add will start after the ‘oncomplete call’? Thanks. Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted January 17 Solution Share Posted January 17 In this case the onComplete callback gets triggered when the timeline called tl in @PointC's example is completed and it will then do everything that is inside that callback, in this case it only sets the body's CSS property of overflow to visible; If you want it to do more you have to tell it to do more. This all is all basic Javascript so I would highly recommend touching up on how Javascript works if you want to get serious in using GSAP in your projects. In your case you probably want to create a function that also gets called in the onComplete callback and in that function do all the rest of the logic that is needed on your page, but only gets triggered when the preload animation has finished. Hope it helps and happy tweening! 3 Link to comment Share on other sites More sharing options...
AlenN Posted February 18 Author Share Posted February 18 Hello and thank you for the answers. I have now implemented the tips and now have the following problem: when I load the page for the first time, everything works great. However, when I refresh the page you can see the black border of the animation at the bottom. Apparently the page slides down after the first access and stays there when updated. Unfortunately you can't see this using codepen, which is why I'm attaching a picture. how can I fix this? Also, is there a way to improve the choppy insertion of the sidebar after the animation? I also provide my current codepen code. See the Pen jOJJaRj by alen95 (@alen95) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted February 19 Share Posted February 19 Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: React (please read this article!) Next Svelte Sveltekit Vue Nuxt Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅ Link to comment Share on other sites More sharing options...
AlenN Posted February 21 Author Share Posted February 21 Since I don't have any experience with Stackblitz yet, I'll try to upload my forked project here. As I said, my problem is that after loading the page for the first time everything works great, but then when I scroll down and load the page again, only half of my black SVG animation is visible, so the rest of the page is visible again and when I reload it the animation doesn't look like it did the first time. https://stackblitz.com/edit/stackblitz-starters-1gkut7 Link to comment Share on other sites More sharing options...
Rodrigo Posted February 21 Share Posted February 21 Hi, Just add this to the top of your script: ScrollTrigger.clearScrollMemory('manual'); https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory() Also set the order of the correctly, the ScrollTrigger tag should be before your custom script: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script> <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> <script src="script.js"></script> Also I'd pick the same source for the CDN of both scripts since the CDNJS is a different version (3.12.4) than the UNPKG one is the latest one (3.12.5) so you'll get a miss-match there. Hopefully this helps. Happy Tweening! 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