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?
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! 🖥❤️
@@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
Really good Jacob! Is it also possible to set the lottie a bit smaller? Mine is a bit low quality and I think it will be better if I put it a bit smaller
Hi Aron... Sorry for the late reply. yes just put this in on a seperat line in the code unde the lottie. section ( "width: 50%; ) and the you can resize in procent as you want.
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?
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 buddy I'm glad you like my Tut... That's the Grain Overlay effect I sell as a Elementor add on on my website. Link to my site in the description. 🖥❤️
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!
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!
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
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. 🖥❤️
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?
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.
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.
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?
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 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. 🖥❤️
@@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, 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! 🖥❤️
@@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, 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. 🖥❤️
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! 🖥❤️
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); });
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. 🖥❤️
@@aryansoni9631 yes unfortunately. There seams to be a problem with custom code and the newest version of Elementor. There will probably be an update and fix soon. 🖥❤️
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 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.
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?
The script is now updated with position fixed so you no longer can scroll outside the page loader when the script is running. 🖥❤️
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?
Wicked!!!
Thanks Buddy! 🖥❤
Great tutorial! really helpfull!!
@@edyjuliantanto thanks I’m glad you like it! 🖥❤️
Wow! Works fine! Thnks man!!
You are welcome I’m glad you like it! 🖥❤️
LIKE bro! Great pitch! Very energetic!👍
Thanks! I'm glad you like it. 🖥❤️
You deserve more than this number of subscribers !
Thanks bro… I’m working on it and hopefully it will 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! 🖥❤️
Love all Your Videos ! Please Keep it Going , You'r Doin Well ! You are my Favourite Teacher of Wordpess / Elementor !
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
Really good Jacob! Is it also possible to set the lottie a bit smaller? Mine is a bit low quality and I think it will be better if I put it a bit smaller
Hi Aron... Sorry for the late reply. yes just put this in on a seperat line in the code unde the lottie. section ( "width: 50%; ) and the you can resize in procent as you want.
@ okay thank you. I will give it a try!
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?
@@JacobVinjegaard Thanks Jacob! I think I mean the page itself... So the black screen opens (curtain style) to the website
Excellent content! Easy and clear walk through.
Thanks Dennis. I’m glad you like 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 ?
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! 🖥❤️
Great Tutorial.
I had another question though. How did you add those tiny dots vibrating effect.
Thanks buddy I'm glad you like my Tut... That's the Grain Overlay effect I sell as a Elementor add on on my website. Link to my site in the description. 🖥❤️
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?
Thanks I’m glad you like it. Yes simply just google CSS transitions and put in where it says transition in the code. 🖥❤️
Awesome! 🎉
Thanks! 🙏🏻
Great!!! But it doesn't work with Slider Revolution. The loading image is behind the Slider Revolution design. Still, a very good tutorial. 👍🏻
Thanks I’m glad you like my content! I’m pretty sure you can fix the layer issues easily with a higher Z-index on the page loader. 🖥❤️
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!
Yes that can be fixed. Please add the link to your site then it’s easier for me to take a look at it. 🖥❤️
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!
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! 🖥❤️
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! 🖥❤️
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
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. 🖥❤️
Great work. Thank you ! And if you want to scale it, is there an option ?
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 ? 🤔
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
Thanks I’m glad you like the video! You can also set the Z-index on the page loader higher. 🖥❤️
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?
Hey I’m glad you like it. No it’s playing on top of the site along with the load of the other content. 🖥❤️
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.
You are absolutely right… You should put the code in the head! 🖥❤️
Nice done! like the clean code and funcionality. Is this also possible with a mp.4 clip (responsive)?
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
Great video! I have one extra question: Do you know how to make it so that the preloader only shows once per session?
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.
thanks it worked
I’m glad you like it! 🖥❤️
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?
You should just make the loader duration longer and then it should work just fine. 🖥❤️
thank yoou
You are welcome brother! 🖥❤️
Super Bro. Subscribed
Thanks bro... It's highly appreciated! 🖥❤️
I'm having a small issue with the code that it's forcing all other lottie animations in the page on loop state. Can't make lottie's play once
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;
Hi, can you have a fade in of the page transition and element (lottie, icon, image etc). Currently it appears suddenly.
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!
You're amazing man! Can you make a video about custom cursors?
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?
@@NicolasJasmin-d7f Yeah I am having the same issue. Do you have a tip to fix this? @JacobVinjegaard
@@NicolasJasmin-d7f hey I just saw the problem myself yesterday and I will update the code later today day and update it on my site. 🖥❤️
@@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. 🖥❤️
Great tutorial. I have an animation built with CSS/HTML/JS. Would your code work with this or do suggest another method? Thx
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?
I'm having an issue in which the buttons on my website do not work for about 5 seconds after the page loader is done. Any ideas on a fix?
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?
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! 🖥❤️
I got it to work but its playing all together when I load my page instead of as a pre-loader. Any idea on how I can fix this?
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, 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. 🖥❤️
@@JacobVinjegaard Thank you very much for the info Jacob. I am really appreciate it. Keep up the good work 💪
does it work for videos uploaded in wordpress media ? cause for me i doesnt
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! 🖥❤️
Hey thank for this but I have a question. I have like a 0.4 delay. So the preloader starts late. Why?. Can you help me Thank you so much
Try to set the code order in Elementor to number 1. 🖥❤️
Only works in preview mode, I tried to display in mobile or other browser but its not showing up
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.
Is it possible to do that with a gift? I don’t have Lottie
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!!
hi Jacob!! great video! but i have free elementor, is there a way for doing it free?
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
also I deleted the code file but the default loader is still showing and not even full. WTF happened
Now it ruined my site
Delete the code an clear all chach and cookies in your browser and then refresh your site. Also clear all caching plugins.
@@JacobVinjegaard ok
Thanks , but there is an error on the code
If it is the red warning in Elementor you are talking about then you are good to go. Don’t worry about them. 🖥❤️
How to do the same but with a GIF ?
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 🙂
how do i resize on mobile modee?
never mind i asked chat gpt aand it is now solved!🤣🤣
ChatGPT rocks for this kind of problems! 🖥❤️
where is lotte animation url
It’s in the code where it starts with www. 🖥❤️
@@JacobVinjegaard I mean when I go to this site and try to download custom animation but I cant find lotte animation url
I think its updated and I cant find the url
@@JacobVinjegaard Please reply
It is not working for me when there are pictures on the home page. I could send you a screenshot of what it looks like.👍
Hey Alex. Just send it on my mail. jacob@vinjegaard.com 🖥❤️
@JacobVinjegaard All right, great! Thank you very much. I just sent an email 👍❤️
How to add our logo
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. 🖥❤️
i still see the navigation bar
fixed... added this to the css: z-index: 10;
Exactly. Good job! 🖥❤️
ITS NOT WORKING
@@aryansoni9631 yes unfortunately. There seams to be a problem with custom code and the newest version of Elementor. There will probably be an update and fix soon. 🖥❤️
it dint work please help
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!? 🙃
thanks!
btw if anyone wants to change the size of their lottie do:
#lottie-loader {
width: 800px;
height: 800px;
}
You are welcome. I’m glad you like it and that’s exactly how you do it! 🖥❤️
I have a problem. My page loads before the animation is completed. os it sows on top of everything. can you help please?
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. :(
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?
You should just make the loader duration longer and then it should work just fine. 🖥❤️