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?
@@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
Great tutorial, I have one question though, what if I want to add a click feature. I.e animation will be static till i click anywhere on the screen, then the animation plays and opens the website
Sounds like a great idea but then it’s a whole different code snippet you need to create. Try to copy my code into ChatGPT and tell it what you want the code to do, then you should be able to create the function you want! 🖥❤️
I tried yours and it's pretty great, but I see it has a delay => which means that halfway through my website's rendering process, the page loader will display it. Is there a way to fix it?
Hello, this is really great tutorial, very helping me to create the preloader with lottie. i have one question, if I wanna put the 3D spline assets to change the lottie, which section that I must change with the embedded code from spline ?
thanks I've had one wierd issue where my heading for some reason still displays on the preload screen, for now I fixed it by making its Z-index -2 but is there any other way to fix
Thank you for this tutorial! but I noticed that it doesn't really play when the page is actually loading, just after it finished loading there is this animation for the defined amount of time. Is there any way to fix this?
Hi Jacob, thanks for the script. If for instance we set the page loader only for our home page, can we prevent it to play every single time, by setting some sort of delay buffer? Let's say somewhere around 30 and 45 seconds? Basically to avoid frustration for someone who would be in a rush.
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. 🖥❤️
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. 🖥❤️
@@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.
When I chose body /end then the page flashes briefly before the preloader starts. I think it's better to load the preloader script as early as possible, so in the head.
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! 🖥❤️
this is an Amazing script and Video! i just encountered a problem tho, if a img or anything is position:absolute, or if a element is in z-index 1 or something, it sticks thru the background of the page loader screen. It would be nice if there is a relution for this! i love anything about this, idk how u only have 1k subs u deserve way more!
Just create and animate your logo in After Effects and then export it as a Lottie file. Then replace the file in the tutorial and you are up and running. 🖥❤️
Hi, thanks for your video. It seems quite simple however if i follow your steps, it does not work. Here the error message from the JS console : "Uncaught ReferenceError: lottie is not defined". Did i miss something ?
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! 🖥❤️
Awesome! Thanks for this. I had to change the display style to "cover" to get a my animated logo better quality but works a treat! Is there a way of adding an entrance animation after the lottie plays? ☯︎
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?
I tried yours and it's pretty great, but I see it has a delay => which means that halfway through my website's rendering process, the page loader will display it. Is there a way to fix it?
@@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.
Thanks so much for this! At the end, the animation goes away by fading out in opacity. Are there other transitions available? Like slide out or down? If so, where can I find a list of the options?
cool stuff as usual. One wuestion I created my own lottie that is supposed to occupy 100 vh, but I can only see a small rectangle. can that be fixed, how? Cheers!
@@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?
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! 🖥❤️
@@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.
Hi, great tutorial. But it doesn't work for me as a preloader. For me the "Preloader" loads like an overlay over my hero section. While it's loading I can still scroll the page on my desktop or on my mobile. Do you know how you can prevent scrolling the page while the preloader is showing up?
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. 🖥❤️
Hello Jacob, thanks for this wonderful tutorial. the page loads and after a few seconds the preloader appears, how do I make the preloader appear before the page loads.
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! 🖥❤️
@@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
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. 🖥❤
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); });
Hi Jacob, I have a problem, that the code only works in preview mode. In preview it is working perfectly fine, but inside a normal browser, or any device it isn't working (I can only see it like a second before the page loads, like if it was behind the page content). I tried to clear my website cache and the browser cache, but it didn't help. Could you help me out? Thanks alot Jacob!
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!
@@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?
@@NicolasJasmin-d7f 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. 🖥❤️