Hi! Position fixed doesn't work on my website, any idea why?

I'm having the same problem. When the preloader is playing you can scroll and then the user ends up mid page when the animation ends.@@louisecoppere2810 Any thoughts @jacobvinjegaard? Thanks so much for the tutorial!

Thanks for this Jacob! I'm having the same issue as lousie mentioned below. when the loader is playing, the end user can scroll and then when the animation finishes and fades away then the end user is half way down the screen. is there any way to stop this?

Thanks! I'm glad you like it. 🖥❤️

Thanks bro… I’m working on it and hopefully it will come! 🖥❤️

You are welcome I’m glad you like it! 🖥❤️

Thanks! 🙏🏻

You are welcome brother! 🖥❤️

Thanks Dennis. I’m glad you like it! 🖥❤️

Thank you very much Kosta I'm glad you like it!🙏🏻🖥❤

@@JacobVinjegaard P.S Thanks to you I'm using the Pro version of Elementor and the project got waxed, I hope the Pro version doesn't get canceled for years to come

Thanks Buddy! 🖥❤

I’m glad you like it! 🖥❤️

Thanks... I'm glad you like it! Try to raise the z-index on the page loader in the custom code. That should do the trick! 🖥❤️

Hi Atria. I’m glad you like the video! Great to hear you managed to change the code yourself and get the results you wanted! 🖥❤️ Yes there is many options to change and customize the code to get another result. Is it the page loader or the page itself you want to add entrance animations to?

@@JacobVinjegaard Thanks Jacob! I think I mean the page itself... So the black screen opens (curtain style) to the website

You are welcome. I’m glad you like it and that’s exactly how you do it! 🖥❤️

Thanks for contributing!!! 🖥❤️

Your comment helps me a lot.

Thanks bro... It's highly appreciated! 🖥❤️

Thanks I’m glad you like it. Yes simply just google CSS transitions and put in where it says transition in the code. 🖥❤️

Hi Max. You can prevent it from showing up the second time a user visits your website by logging the IP address in the cookies but that’s a little more complicated to describe here in the comments section… but you should be able to google it. 🖥❤️

If you follow the steps everything should be just right. But the new Elemonter is not working properly with custom code. Hopefully the next update will fix it! 🖥❤️

Hey I’m glad you like it. No it’s playing on top of the site along with the load of the other content. 🖥❤️

Hi I’m glad you like it. I’m not really sure how to do it with a spline screen but it could be a good upcoming tutorial! 🖥❤️

Yes that can be fixed. Please add the link to your site then it’s easier for me to take a look at it. 🖥❤️

Thanks I’m glad you like the video! You can also set the Z-index on the page loader higher. 🖥❤️

Also I can't click or hover anything on the screen for a few seconds after the page loader closes.

Sorry for the late reply... Yes, you just need to change the code where it says 'loop from true to false,' and it will play your Lottie animation only once. 🖥❤️

just add this little code snippet under the style section in the script... That should fix the problem. 😉 pointer-events: none;

Hey Karim. Thanks for the nice message I’m glad you like the video. I have never tried with a mp.4 video clip. But try to put the code into chat GPT and ask it to replace the Lottie with a video file. I’m sure that will work out for you! 🖥❤️

Thanks! ;-)@@JacobVinjegaard

Thank you so much brother. Yes that is one of the tutorials I will make in the near future! 🖥❤️

@@JacobVinjegaard Great! I'm experiencing an issue with the transition page. I'm able to scroll the page before the animation finishes. How can I fix this?

@@user-dp2hn4rp7i Yeah I am having the same issue. Do you have a tip to fix this? @JacobVinjegaard

@@user-dp2hn4rp7i hey I just saw the problem myself yesterday and I will update the code later today day and update it on my site. 🖥❤️

@@user-dp2hn4rp7i I have just uploaded the code so you no longer can scroll outside the the script when it’s running. it’s available on my site now. 🖥❤️

You should just make the loader duration longer and then it should work just fine. 🖥❤️

Hi... Thanks for watching my videos. Yes you should just put the transition you want into the CSS part of the code. google CSS transitions. 🖥❤️

@@JacobVinjegaard Cheers mate!

Try to set the code order in Elementor to number 1. 🖥❤️

Thanks I’m glad you like it… Yes you need to log it in the site cookies with JavaScript but that’s a bit more complicated to setup. 🖥❤️

@@JacobVinjegaard I didn't find a way to do it with cookies (I'm a bit of a Javascript beginner) but I did find a way to only display it once with each session. So every time I open a now tab/window and go to my website, I see the preloader, but if I refresh or go back to my homepage from another page it is hidden.

fixed... added this to the css: z-index: 10;

Exactly. Good job! 🖥❤️

Thanks I’m glad you like it! 🖥❤️ What do you mean by scale it?

@@JacobVinjegaard Thank you for your answer. I mean scale the size of lottie animation in the screen, is it possible ? 🤔

Hi. Just cleare your server and browser cache and then it will work just fine! Computer Love 🖥❤️

@@JacobVinjegaard It was WpRocket, just put the code .json into exclude section. Thanks.

Hey Noel. I’m glad you like the video!!! 🙏🏻 Yes the loader is made as a overlay so if you have any other animations on your hero section you should set a delay on them to reveal them after the loader has run. I actually just saw the scrolling problem myself yesterday and you should change the height and width to vh and vw instead of percent. I will change the code later today and upload the new code on my site asap. 🖥❤️

Hey again Noel. I have just updated the code with position fixed and 100vw and 100vh. You can still scroll while the loader is running but it will first reveal the page after the script. It’s available on my page now. 🖥❤️

@@JacobVinjegaard Thank you very much for the info Jacob. I am really appreciate it. Keep up the good work 💪

You are welcome I’m glad you like it! With this page loader everything loads add the same time, so if you want to to reveal animations after the page loader you need to set delay on the elements. I hope this helps! 🖥❤️

change the location of the code to body start. JS needs to laod before the page in this case

@@andreaegli Changing the location to body start didn't work for me, it actually made it worse The way I fixed the problem of my homepage appearing 1s before the loader was to check the checkbox called "Always load jQuery", its next to the location selector

I was able to figure out what was going on using AI. I can get a link for people if they are interested.

Perfect... What did you du to fix it?

Could you share your link?

Yes that’s exactly what it should do. If you have any animations you want to reveal after the page loader you should use delay. 🖥❤️

@@JacobVinjegaard Sorry, i meant to say its not loading as a pre loader. The animation plays once all the content on my home page loads. Id like to have the lottie file play as a pre-loader.

Hi... Thanks for watching my videos. No this code is only for Lottie animations. Buuut put the code into ChatGPT and ask it to replace the Lottie with a video file. Then you should be up and running! 🖥❤️

Thanks I’m glad you like it! It should work just fine. 👍🏻🖥❤️

@@JacobVinjegaard Hi Jacob, what is the difference between putting this code via the Elementor custom code, as seen in the video, and via the HTML widget?

Hi Lucie, Use this script instead and paste your gif in where it says "Paste the url to the gif here" int the code 🖥❤ /** Body Overlay **/ body #load { display: block; height: 100%; overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; z-index: 9901; opacity: 1; background-color: #263340; visibility: visible; -webkit-transition: all .35s ease-out; transition: all .35s ease-out; } body #load.loader-removed { opacity: 0; visibility: hidden; } .spinner-loader .load-wrap { background-image: url("Paste the url to the gif here"); background-position: center center; background-repeat: no-repeat; text-align: center; width: 100%; height: 100%; } // Javascript function to display loader on page load document.addEventListener("DOMContentLoaded", function(event) { var $load = document.getElementById("load"); var removeLoading = setTimeout(function() { $load.className += " loader-removed"; }, 1200); });

@Jacob Vinjegaard thank you !! I will try this 🙂

Thanks. I’m glad you like it. Check out my video called “must see websites of 2023 for web designers” and I will hook you up! 😉🖥❤️

alright! i will thanks man!@@JacobVinjegaard

Hey Alex. Just send it on my mail. jacob@vinjegaard.com 🖥❤️

@JacobVinjegaard All right, great! Thank you very much. I just sent an email 👍❤️

Hi Maxs.149 absolutely use this code instead. 🖥❤ /** Body Overlay **/ body #load { display: block; height: 100%; overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; z-index: 9901; opacity: 1; background-color: #263340; visibility: visible; -webkit-transition: all .35s ease-out; transition: all .35s ease-out; } body #load.loader-removed { opacity: 0; visibility: hidden; } .spinner-loader .load-wrap { background-image: url("Paste the url to the gif here"); background-position: center center; background-repeat: no-repeat; text-align: center; width: 100%; height: 100%; } // Javascript function to display loader on page load document.addEventListener("DOMContentLoaded", function(event) { var $load = document.getElementById("load"); var removeLoading = setTimeout(function() { $load.className += " loader-removed"; }, 1200); });

@@JacobVinjegaard thank you sooooo much!!

never mind i asked chat gpt aand it is now solved!🤣🤣

ChatGPT rocks for this kind of problems! 🖥❤️

Help

Of course, brother... Are you following my tutorial religiously? And where exactly is it not working? I need more information to help you reach your goal. 🖥❤

@@JacobVinjegaard yes i did everything just like you. But it isn’t working

@@NaveedAhd it's hard to say where it fuckes up... but try to make me a temporary admin login and the i could take a look!? 🙃

Hi Frank... Pls send me the link to your site so i can see the exact problem you have? 🖥❤️

@@JacobVinjegaard Hi Jacob, I trash the old and trying to copy code from your website. its not loading. 4th time i refreshed the code loaded but no copy button showing. You might wana check it out. So basically I was not able to make a new one. Thanks for the reply thou.

actually none of the links is working on your page. :(

Hi Miguelos. If I understand it correctly you can see the page loader but the other content is on top? If that’s the case you should set a higher z-index on the page loader. 🖥❤️

@@JacobVinjegaard Hey Jacob, thanks alot, I did what you said and it got theoretically better, but I now realized the problem is that the preloader is not visible for the first minute when the DataTable behind it is loading. The issue seems to be related to the order in which scripts are executed. I tried to put on 10 priority and set the location to in the elementor custom code, but it didn't help. Could you please help me out? Thank you alot once again, I truly appreciate it!

@Miguelos.69 hi again. Please link to your site and I will give it a look.

You should just make the loader duration longer and then it should work just fine. 🖥❤️