jeeeez, had to watch it 3 times to pay enough attention at the end where you mentioned the pointer events hahahahaaa thank you so much, very useful tutorial!!
Hey Nandi, thanks for this tutorial, will help me make my websites a lot cooler. On a sidenote, I really need a blog tutorial, and how we could use cms to set up blogs. So, If you could do a tutorial on that, it'd be amazing. Thanks, and keep up the good work
Thank you for this great tutorial Nandi! Always on point. 👌🏼 I was wondering, how can I prevent the user from scrolling the page while the animation is running?
Hi, Nandi, I used this loader on my website. Please help me with when I go to another screen from the Nav bar and come back to my Homepage, I see the loader every time. I just want this loader once when I open the website for the first and not whenever I come to Homepage.
But this is just an animation, not a loader 🤔 A website loader is driven by javascript that check if the page is fully loaded before it moves on. Not some random delay time. It is used if you have a heavy site with videos and images and so on. Can Framer do it right?
Yes indeed this is a “fake” loader. A real loader would require custom code and this is a no-code solution. However, if you know that you site loads in max 5 seconds then you can set the loader to fix 5s.
Hey! Another question is how can I make the preloader load only once during visiting the homepage (and not every time I get to it browsing between the pages of the site)? Thanks!
Wow finally some good animation stuff i just got an idea to make that text as the logo animation & move it to the navbar logo area & load everything after it & turn opacity to 0 when it's loading the navbar & page content😲
Great video! Would you happen to know how to animate roots growing down a webpage? My vision is a plant on the landing page and as you scroll the roots begin to follow you down the page
Really nice video, I hope Framer will one day implement an easier way to do it haha Little questions for you, Nandy. In my head, a loading screen appears each time you visit a website from an external source (or behavior similar to that). I saw that you created a code for the animation to only play once per hour, day, or month, but do you have any override or idea on how to make it play each time the user visits the website from an external source? I was also wondering: sometimes, you want to animate elements once the pre-loader is finished. My easy solution was to delay them, but if I navigate the website and return to the home page, they are still delayed, which creates a big empty space for a moment. Is there a workaround?
hi nandi! so this is not actually a loading screen, it's just a pre-done preset animation that doesn't really respond to loading of the site elements? like my site will still be loading and images will still not be ready after this...
The remix file seems to be responsive to mobile size breakpoints, but I can't find in the settings or varients how this is happening. When I copy the component into my own project, it looses this resizing functionality...
Concerning the loading interaction once after it finished loading and lands on the landing page if I should click to another page and go back to the landing page the loading page comes up again which is not ideal as the loading should only happen when you just want to enter the website and not when you are surfing the web page is there a way to make the loading only appear when you just load the page or reload the page?
This method makes the loading screen appear every time the visitor visits the home page. I want this to only appear once - the first time the visitor visits. Is there a way to do that? Thanks
@@framer.universityI think you have misunderstood my question. You need a custom code that would story the cookie of the preloader element, which would control how many times per day, week that preloader would display. The cookie banner is something else.
hey, thanks for the tutorial! i have a question though, why does my navigation bar come on top of the loading comp? how can i put it under? for context, the nav-bar is in sticky mode so it sticks while scrolling down through the page contents, i dont know how to make it sticky while also keeping it under the loading comp
You can set the 'Pointer Events' of the loader component to 'None' to fix this issue. If this doesn't show on the Styles panel in framer click on the '+' next to 'Styles', Pointer Events should show in there.
Hi, How can I make the animation load only once when I launch the website? because when i go to other page and page coming back to the home screen it is loading the animation all the time?? Could you please help me fix this?? @framerUniversity
ok I will show once code override so I will not come again. What if the loader animation is finished & the website is still loading. :0. Is it possible to make loader dynamic according to the internet speed?
im so frustrated lol... no matter what I try, I cannot click through the "hidden" screen. even tried doing -1000 absolute or 1px size... still fills the windows.
Hey since the component is fixed and set to 100 vh, all of the buttons underneath the loading component lose their clickability as the "leave" blank frame is still above it. Is there any work around for this? I've tried giving the loading component pointer events of none
Great tutorial. Couple of things I'm struggling with. The animation overlay covers all the page content, so buttons are no longer clickable on the page. Essentially using pointer-events: none. Also, is there a way to have this page transition only play on pages between the homepage? I don't want this played on homepage load. Thanks!
I explained in the video exactly how you can prevent the uninteractivity from happening. Make sure to watch the full video. There is no way currently to only display it on pages between the homepage.
nice tutorial! Im brand new to Framer so this was amazing. I have a question though, on the tablet and mobile view, the loading component is out of wack. Do we have to create two separte components so they fit the dif resolutions or is there an easier way to fix this? Thanks in advance!
When I do this on my website, the text above the loading bar gets cut off on the smaller breakpoints like tablet and mobile. Any ideas? It works perfect on desktop just not on mobile or tablet because the text gets cut off on the sides. Thanks for your help, awesome tutorial!
You can create separate component with smaller text size for mobile. You can then hide the mobile component on desktop and then show it on the mobile breakpoint and hide the desktop component. Makes sense?
@@framer.university Hi Nandi, thanks for the tutorial. I just followed your instruction for the mobile variant and I hid the component on desktop and show the component on mobile. However, when I open the website on my phone the loader not showing up. I've been trying to figure it out why but couldn't fix it. I was wondering if you know the problem? I'd appreciate any advice, thanks!
Yo, I am new to this and i did not catch what you said when you were saying where to put the frame…. All i was able to get was “cut and paste it. . . breakpoint.” if you could clarify and share some insight on where you pasted it. Thanks!
Many thanks Nandi for this tutorial. How could I get the animation to start first when the Website Loading animation is done, ie. when the top view disappears?? I do not know how to trigger that. I have tried a few things, but the animation happens, underneath the "loading animation" view, so by the time that is done, the animation is already done. I hope you can give me some tips on how to solve this!?
@@framer.university hi, i want to ask.. i have the same issues as well, and i already apply delay for the 'contents' after the 'loader', but still didn't work, should i set the 'contents' animation to On Appear / Layer in View / other else? thanks for this great content btw, keep it up!
This is intriguing, yet there's a slight issue I've been attempting to resolve: how to prevent page scrolling during the loading animation. To prevent users from scrolling to the bottom of the page while it's active.
@@framer.university thank you very much. This method does cost because you’ll need to upgrade the account from the free version in order to do this. But I did figure out how to do it via an overwrite and that fixed the problem without having to upgrade.
Great tutorial, although I'm experiencing a few issues. If I start to resize my browser, up or down the animation just disappears and reveals the landing page. The other issue is that the animation runs every time the user returns to the landing page. I understand the last part requires some coder override. For now i've just duplicated my landing page and all the links goes to a copy of my landing page, but without the "loader" - It's not ideal, but it works.
Hey! Im soon releasing a "show once" override. The resize thing: im not sure who will resize the window during preload, but it doesn't happen for me btw. I'd need to see your proj.
hi! thank you for this! I'm having a little issue and I'm not sure if it's me or framer is not working properly. When I create the first frame and send it over the breakpoint, set position to fixed, pin it and set height to viewport, when I hit preview, this frame is not showing! I tried several ways but it still doesn't appear. Can you help me with this?
Hi Nandi. I have created this loading animation using a component set and is set on trigger of the home page. However, it also means everytime I go from some other page to Home page, the animation loads. Is there a way where the animation can happen only once for the first time when the user lands?
hey man, nice tutorial. Followed it through and the loading screen works great but it doesn't let the buttons on the site work. do you know what the reason could be?
@@framer.university haha thanks! I've watched the tutorial a couple of time but always stoped at the point where you fix the words popping animation. I'm so impatient :))
Amazing tutorial. I managed to create the loading screen for dekstop with no issue. However, I encounter a problem with my Mobile Phone breakpoint. So i have created this Mobile Loading Screen Variant and applied this to the mobile breakpoint. However, everytime open it on my mobile phone, the loading screen was in the desktop size whereas everything else is on the mobile size. I had to zoom the content first after the loading screen ended. Has anyone encountered this issue too? Or could you please advise what went wrong?
I came up with something that a. dont need code and b.can be a little bit stupid but. if you use the effect in the homepage (the page you set to be the homepage) then you can duplicate this same page and remove in the duplicated version the frame you made in the tutorial and in any navigation bar or button you have to send you to the home screen then make it send you to the duplicated version of the home page @@framer.university, if you want you can make a video about it and show how to do it for the those who don't know 😊
Hi, Nande, if am spelling it wrong am sorry, i have a issue here when you click any call to action and navigate to other page and then go back to home page the animation plays again. What should I do to make it appear only the 1st time when opening the site, basically make only 1 time. please help will solve my problem, thanks for great tutorials really appreciate them
how to disable scroll for the loading animation ?? because its working sll fine but if someone quickly scrolls the website they can see the website before the loading screen gets over
I have to download your tutorial files then check and found out that my Interactions from Arrived to Leave also says "Appear". I have to reset all Interactions and reconnect again and it fixed (Still don't know why I did many times before and it always show "Appear"). Btw thank you for the helpful tutorial
If anybody has a code override for so the animation only gets played once when the website is loading and not when it is refreshed. That would be great if you could share that!
hey nandi, i loved the loader animation ive used it in my website.. but the problem im facing is that, lets say i go to next page and go back to the home page the preloder loads aswell, i dont want that, it becomes repetitive and unnecessary, what is the solution around that.
Make sure that parent frame is set to fit width so it fits the size of the relative text. (Also check if relative text’s width is fit, because it might be fixed for some reason (it needs to be fit))
hey, i followed the project with loading page here and the other with revealing footer, however i found that it is impossible to make hover buttons on the footer layer and a custom cursor bcz the transparent layer is always there to do the reveal. any hint how to fix nandi
Heya! Thanks for the video. I was wondering if there is a way to do this but for when you leave a page? So when you click to go to a different page, a 'loader' will slide in, and then slide away again as the new page has loaded?
Thanks for the tutorial, was really helpful! I have one bug though that I can't seem to get around... Whenever my pre-loader goes into the exit variant, yes it disappears on my website, but my preloaded component is still in the way of everything on my website (meaning I can't click my nav or any links on my website.) One simple solution in code would've been "display:none" but I'm not sure if this is possible on Framer. Any quick fix for this? Would appreciate it :)
Is there anyway to trigger this loader screen once for a session? This method is great (I love your content btw), but it triggers each time someone returns to the screen after navigating around the site.
@@framer.university out of curiosity, have you experienced any weird clipping of other elements once this loader has disappeared? My navbar somewhat frequently gets clipped once it's loaded. But if you interact with the navbar, the clipping goes away. I can't figure out how to avoid this issue from occurring.
A simple hack to fix this issue could be - 1. Duplicate the homepage and delete the loader animation from it. 2. Link all the buttons to this second homepage (one w/o the loader) Now each time someone clicks on the home button they will be navigated to the second HP thus skipping the loader screen.
cool tutorial... but its not responsive for mobile or tablet... So not really useable in mordern day web design seeing as most things are mobile first now.
@@framer.university would be nice if it was made responsive from desktop breakpoint so it automatically adjusts when you create the new breakpoints i know this can be done with other elements within framer. Great tutorial still, i subscribed ;)
Yes it is a fake loader - you could say. It adds more time, but the loading animation’s purpose isn’t to reduce loading time. Its purpose is to hide the website content as it is being loaded and only show it once everything is properly loaded in. You can check how much time your site usually loads if it has some heavy elements like 3D objects, and have that time as your loading animation length.
Hey there is one problem with this loading screen is when I open the page in new tab but stay in the current page, the loading animation plays anyways, so after a moment I switch to that page the animation is already done. Can I make it to only play when I click into the new tab?
Hi Nandi, thanks for this preloader tutorial. I downloaded your remix and tried it on my website, but one thing I noticed is when the loader rolled up, my text animation in the hero section is also finished. does this mean the preload is not sequential to other effects within the website? TIA.
each appear effect on your site has a transition which has a delay property. You have to adjust that delay so they start after the preloader is done. Hope this helps!
21:25 is EXACTLY what I have been searching for, thank you so much youre a total lifesaver
glad i could help! :)
Same!
dude this what i am looking foorrrrr omgg
jeeeez, had to watch it 3 times to pay enough attention at the end where you mentioned the pointer events hahahahaaa
thank you so much, very useful tutorial!!
glad i could help!
Your content is amazing! Thanks again, i have learned so much from just your videos in the last couple of months. Big thanks!
I’m really happy to hear this! :) thanks for the feedback mate 🫶
Thank you Nandy for always giving us the best tutorial we need.
Thank you!😊😊😊😊
awesome tutorial. Just started learning Framer this is so clear and easy to follow. Thanks for this.
I am so happy that you found this helpful! Good luck with your Framer journey! :)
Thank you so much for the tutorial man I'd tickle your pickle for the fun of it after helping this much, big love yo, keep it real
Hey Nandi, thanks for this tutorial, will help me make my websites a lot cooler.
On a sidenote, I really need a blog tutorial, and how we could use cms to set up blogs.
So, If you could do a tutorial on that, it'd be amazing.
Thanks, and keep up the good work
Thanks Joshua!
Will start making content about the CMS as well in the future!
Thank you for this great tutorial Nandi! Always on point. 👌🏼 I was wondering, how can I prevent the user from scrolling the page while the animation is running?
Same problem here, did you find any solution?
@@natasavukota1441 Unfortunately I haven't found a way to do it. I'm not entirely sure, but I think you might be able to do that using custom code.
Thank you soooo sooooooooooo much, not a detail skipped!
Glad it helped!
Amazing!
The whole video was too easy too follow.
Thanks for this tutorial!
Glad it helped! :) thanks for the feedback 💙
Awesome content, glad that I found your channel - I'm from Hungary too
Glad to hear it! Hope you’ll like my upcoming videos as well. :)
🇭🇺🇭🇺
bro you're literally the best!!!!!
Thank you so much 💙
Nice tutorial. Looking forward to the course. Thanks so much!
My pleasure!
thnks so much nandi for this tetorial I love it
Glad u like it mate :)
Enjoyed the journey
happy to hear it mate :)
You've helped me so much ! i'm grateful* to you my friend .
So happy to hear this 🫡
Hi, Nandi, I used this loader on my website. Please help me with when I go to another screen from the Nav bar and come back to my Homepage, I see the loader every time. I just want this loader once when I open the website for the first and not whenever I come to Homepage.
hey! this will help ya:
framer.university/resources/show-once-code-override-for-framer
lemme know if you need any help!
But this is just an animation, not a loader 🤔 A website loader is driven by javascript that check if the page is fully loaded before it moves on. Not some random delay time. It is used if you have a heavy site with videos and images and so on. Can Framer do it right?
Yes indeed this is a “fake” loader. A real loader would require custom code and this is a no-code solution.
However, if you know that you site loads in max 5 seconds then you can set the loader to fix 5s.
@@framer.universityNo code is fun and all but do you know a way to actually do it with a bit of code?
Ugh.. Lottiefiles bruv, Lottiefiles
Fantastically clear as always, thank you!
But I have a question if I can anyhow block page behind the preloader from scrolling?
Thank u 🙏
Check this guide:
framer.university/blog/how-to-block-scrolling-during-the-website-s-preloader-in-framer
@@framer.university Thanks! Best University after my Alma Mater :)
Hey!
Another question is how can I make the preloader load only once during visiting the homepage (and not every time I get to it browsing between the pages of the site)?
Thanks!
Wow finally some good animation stuff
i just got an idea to make that text as the logo animation & move it to the navbar logo area & load everything after it & turn opacity to 0 when it's loading the navbar & page content😲
Sick! Make it 🙌
Great video! Would you happen to know how to animate roots growing down a webpage? My vision is a plant on the landing page and as you scroll the roots begin to follow you down the page
thank you for sharing. Awesome technique!
Thanks for watching!
Really nice video, I hope Framer will one day implement an easier way to do it haha
Little questions for you, Nandy. In my head, a loading screen appears each time you visit a website from an external source (or behavior similar to that). I saw that you created a code for the animation to only play once per hour, day, or month, but do you have any override or idea on how to make it play each time the user visits the website from an external source?
I was also wondering: sometimes, you want to animate elements once the pre-loader is finished. My easy solution was to delay them, but if I navigate the website and return to the home page, they are still delayed, which creates a big empty space for a moment. Is there a workaround?
hi nandi! so this is not actually a loading screen, it's just a pre-done preset animation that doesn't really respond to loading of the site elements? like my site will still be loading and images will still not be ready after this...
That’s right!
hey what's the shortcut for option command and enter on windows
Alt + Ctrl + Enter
The remix file seems to be responsive to mobile size breakpoints, but I can't find in the settings or varients how this is happening. When I copy the component into my own project, it looses this resizing functionality...
same... how is it responsive
When will the free course be available. I have been waiting since forever. Great video btw
Thanks!
I’m releasing it really soon! Stay tuned :)
What if I have a button link inside the component of overlay? Pointer events selection makes it impossible to click...
Select that specific clickable element and set the pointer events back to auto on it
Concerning the loading interaction once after it finished loading and lands on the landing page if I should click to another page and go back to the landing page the loading page comes up again which is not ideal as the loading should only happen when you just want to enter the website and not when you are surfing the web page is there a way to make the loading only appear when you just load the page or reload the page?
This is something that needs custom code. I’ll try coming up with a solution.
@@framer.university Have you found the solution for this please?
Hey nandi like your tutorial and i also created pre loader , but can you help me with how to block background scroll while pre loder is loading
Hey!
You can check this guide:)
framer.university/blog/how-to-block-scrolling-during-the-website-s-preloader-in-framer
This method makes the loading screen appear every time the visitor visits the home page. I want this to only appear once - the first time the visitor visits. Is there a way to do that? Thanks
I’m soon releasing an override that will only show it once.
@@framer.university Any update on this? Has it been released? I don't see it anywhere
Do you know how ard it would be to add a cookie to the preloader so it only shows once to the visitor per day or per week?
Framer has a pre-built cookie banner component that you can fully customize. Search for it in the insert menu.
@@framer.universityI think you have misunderstood my question. You need a custom code that would story the cookie of the preloader element, which would control how many times per day, week that preloader would display. The cookie banner is something else.
I think this is what you’re looking for:
th-cam.com/video/0XZRVjInsXY/w-d-xo.htmlsi=W6BCBUY-ZNvKjZ4W
hey, thanks for the tutorial! i have a question though, why does my navigation bar come on top of the loading comp? how can i put it under? for context, the nav-bar is in sticky mode so it sticks while scrolling down through the page contents, i dont know how to make it sticky while also keeping it under the loading comp
He explains it at 18:04 . If that doesnt work try putting your "Navigation bar" layer above the "loader comp" layer in the layer section.
The overlay with z index above the others eventually lead to a page unclickable on my side, does anyone have this problem?
You can set the 'Pointer Events' of the loader component to 'None' to fix this issue. If this doesn't show on the Styles panel in framer click on the '+' next to 'Styles', Pointer Events should show in there.
Exactly! Pointer events set to none always solved this issue! :)
Thank you, it helped a lot.!!
Glad to hear it mate :)
Hi, How can I make the animation load only once when I launch the website? because when i go to other page and page coming back to the home screen it is loading the animation all the time?? Could you please help me fix this?? @framerUniversity
Hey! Use this:
framer.university/resources/show-once-code-override-for-framer
What if we make the navigation component into the loading screen... On apear the loading screen transforms into the navigation bar...
Would having this invisible layer with some text elements mess with SEO?
ok I will show once code override so I will not come again. What if the loader animation is finished & the website is still loading. :0. Is it possible to make loader dynamic according to the internet speed?
I haven’t experimented with making it dynamic. It would probably need custom code.
Very cool and smooth, thanks Nandi. how can we have dynamic loading transition. like really based on the page Loading time?
Thanks!
Unfortunately that would need button code. Natively you can only set a fixed duration.
if we scroll we can see the page, is there any option to only see de loader if we scroll down the page? Great tutorial!
You mean blocking page scroll while the loader is in view? framer.university/blog/how-to-block-scrolling-during-the-website-s-preloader-in-framer
@@framer.university somehow this is not working for me. scrolling is still possible. do I have to do anything else?
im so frustrated lol... no matter what I try, I cannot click through the "hidden" screen. even tried doing -1000 absolute or 1px size... still fills the windows.
It should fill up the screen. That’s not the issue.
I’m addressing this at 21:15 in the video.
Watch every second for all the golden nuggets hehe 😉
Hey since the component is fixed and set to 100 vh, all of the buttons underneath the loading component lose their clickability as the "leave" blank frame is still above it. Is there any work around for this? I've tried giving the loading component pointer events of none
The solution should be pointer events set to none, yes! I show it in the video too.
Check 21:13
Fabulous, thanks!
My pleasure 😇
Great tutorial. Couple of things I'm struggling with. The animation overlay covers all the page content, so buttons are no longer clickable on the page. Essentially using pointer-events: none. Also, is there a way to have this page transition only play on pages between the homepage? I don't want this played on homepage load. Thanks!
I explained in the video exactly how you can prevent the uninteractivity from happening. Make sure to watch the full video.
There is no way currently to only display it on pages between the homepage.
@@framer.university Very patronising but ok
Check 21:28 for your first question
How can I have this trigger once for a home page. If a user needs to go back to revisit the homepage, that would be annoying
with this:
framer.university/resources/show-once-code-override-for-framer
nice tutorial! Im brand new to Framer so this was amazing. I have a question though, on the tablet and mobile view, the loading component is out of wack. Do we have to create two separte components so they fit the dif resolutions or is there an easier way to fix this? Thanks in advance!
Thanks!
In this case yes, the easiest solution is duplicating the component and adjusting it accordingly.
@@framer.university I am duplicating it but when I edit it the desktop is changing as well
I have no idea how to duplicate the comp and allow it to actually be a different comp
tutorial on resizing it to tablet and mobile pls??
Nandi you be the best! Thank you
Thank you so much! :)
Lemme know what do you want to see next ✌️
Nice. For multipage websites - is there a way to load it only once when entering the home page and not every time to return to it ?
Check the latest resource on framer.university called Show Once Override. 🫡
Perfect.
Appreciate ya! 🫶
When I do this on my website, the text above the loading bar gets cut off on the smaller breakpoints like tablet and mobile. Any ideas? It works perfect on desktop just not on mobile or tablet because the text gets cut off on the sides. Thanks for your help, awesome tutorial!
You can create separate component with smaller text size for mobile.
You can then hide the mobile component on desktop and then show it on the mobile breakpoint and hide the desktop component.
Makes sense?
@@framer.university Hi Nandi, thanks for the tutorial. I just followed your instruction for the mobile variant and I hid the component on desktop and show the component on mobile. However, when I open the website on my phone the loader not showing up. I've been trying to figure it out why but couldn't fix it. I was wondering if you know the problem? I'd appreciate any advice, thanks!
Thank you for sharing ! I’m learning so much from all your videos- do you know how to create custom password pages?
I am so happy to hear this :)
What do you exactly mean by password pages? You want to add membership functionality to your website?
Yo, I am new to this and i did not catch what you said when you were saying where to put the frame…. All i was able to get was “cut and paste it. . . breakpoint.” if you could clarify and share some insight on where you pasted it. Thanks!
Many thanks Nandi for this tutorial. How could I get the animation to start first when the Website Loading animation is done, ie. when the top view disappears?? I do not know how to trigger that. I have tried a few things, but the animation happens, underneath the "loading animation" view, so by the time that is done, the animation is already done. I hope you can give me some tips on how to solve this!?
Apply delay for the animations so they happen after the loading animation.
@@framer.university thanks. Yes. I did that.
@@LejonetJanne amazing!
@@framer.university hi, i want to ask.. i have the same issues as well, and i already apply delay for the 'contents' after the 'loader', but still didn't work, should i set the 'contents' animation to On Appear / Layer in View / other else?
thanks for this great content btw, keep it up!
You are the best!
Really appreciate you! :)
Nice tutorial, but i found a problem, when you publish your website, with preloader links doesn´t work. The reason could be preloader´s z-index?
what is the preloader's link?
This is intriguing, yet there's a slight issue I've been attempting to resolve: how to prevent page scrolling during the loading animation. To prevent users from scrolling to the bottom of the page while it's active.
Here’s the solution:
framer.university/blog/how-to-block-scrolling-during-the-website-s-preloader-in-framer
@@framer.university thank you very much. This method does cost because you’ll need to upgrade the account from the free version in order to do this. But I did figure out how to do it via an overwrite and that fixed the problem without having to upgrade.
@@AlfredoNatal31 share with us brotherman
hey! did you find any solution for it to only load once? thanks
Hi, nice video! What microphone are you using? It sounds amazing!!
Thanks a lot!
I am using the Logitech Blue Sona. Amazing mic.
Great tutorial, although I'm experiencing a few issues. If I start to resize my browser, up or down the animation just disappears and reveals the landing page. The other issue is that the animation runs every time the user returns to the landing page. I understand the last part requires some coder override. For now i've just duplicated my landing page and all the links goes to a copy of my landing page, but without the "loader" - It's not ideal, but it works.
Hey! Im soon releasing a "show once" override.
The resize thing: im not sure who will resize the window during preload, but it doesn't happen for me btw. I'd need to see your proj.
hi! thank you for this! I'm having a little issue and I'm not sure if it's me or framer is not working properly. When I create the first frame and send it over the breakpoint, set position to fixed, pin it and set height to viewport, when I hit preview, this frame is not showing! I tried several ways but it still doesn't appear. Can you help me with this?
Hey! I’d need to see the project. Send remix link in Twitter DM.
EXCUSE ME, IS THIS PROBLEM SOLVED? I HAVE SAME PROBLEM:(
Hi Nandi. I have created this loading animation using a component set and is set on trigger of the home page. However, it also means everytime I go from some other page to Home page, the animation loads. Is there a way where the animation can happen only once for the first time when the user lands?
Yea! Use this override:
framer.university/resources/show-once-code-override-for-framer
hey man, nice tutorial. Followed it through and the loading screen works great but it doesn't let the buttons on the site work. do you know what the reason could be?
Thanks!
Yes it is because you missed a step. Make sure to watch the full video!
@@framer.university haha thanks! I've watched the tutorial a couple of time but always stoped at the point where you fix the words popping animation. I'm so impatient :))
@@supoflexno worries, mate :)
why i cant change my text to relative ? its disabled
Because the parent frame isn’t a stack. Go to right panel and add a layout by clicking the plus button next to it.
its fixed by changing the text container size to Fit
Amazing tutorial. I managed to create the loading screen for dekstop with no issue. However, I encounter a problem with my Mobile Phone breakpoint.
So i have created this Mobile Loading Screen Variant and applied this to the mobile breakpoint. However, everytime open it on my mobile phone, the loading screen was in the desktop size whereas everything else is on the mobile size. I had to zoom the content first after the loading screen ended. Has anyone encountered this issue too? Or could you please advise what went wrong?
Can’t tell without seeing the remix, sorry. Please send it in Twitter DM.
So I have a question how to show this only once per user visit, as it annoying to show preloader each time he visit the home isn’t it
I’ll come up with a solution for this!
I came up with something that a. dont need code and b.can be a little bit stupid but.
if you use the effect in the homepage (the page you set to be the homepage) then you can duplicate this same page and remove in the duplicated version the frame you made in the tutorial and in any navigation bar or button you have to send you to the home screen then make it send you to the duplicated version of the home page @@framer.university, if you want you can make a video about it and show how to do it for the those who don't know 😊
Hi, Nande, if am spelling it wrong am sorry, i have a issue here when you click any call to action and navigate to other page and then go back to home page the animation plays again. What should I do to make it appear only the 1st time when opening the site, basically make only 1 time. please help will solve my problem, thanks for great tutorials really appreciate them
Hey! It is Nandi.
You cannot add this behavior natively. It works require custom code.
Thank you!
Welcome!
your the man
🤝🤝
how to disable scroll for the loading animation ?? because its working sll fine but if someone quickly scrolls the website they can see the website before the loading screen gets over
Can anyone help me why the Arrive step went well but the Leave step didn't leave at all, I'm stuck at Arrive step zzz
I have to download your tutorial files then check and found out that my Interactions from Arrived to Leave also says "Appear". I have to reset all Interactions and reconnect again and it fixed (Still don't know why I did many times before and it always show "Appear"). Btw thank you for the helpful tutorial
i'm glad you figured it out! 💙
Can you set the timing of the animation to the actual load of the page? So the load-in animation disappears only after the entire page has loaded?
We cannot set conditionals for the loading time.
What you can do is pick a duration that guarantees you a full page load.
Let’s say my page loads in
If anybody has a code override for so the animation only gets played once when the website is loading and not when it is refreshed. That would be great if you could share that!
dig deep into Framer Uni, you'll find most things you're looking for.
framer.university/resources/show-once-code-override-for-framer
The leave varient screen , just stays there doesn't leave ?? any help ??
hey nandi, i loved the loader animation ive used it in my website.. but the problem im facing is that, lets say i go to next page and go back to the home page the preloder loads aswell, i dont want that, it becomes repetitive and unnecessary, what is the solution around that.
Yeah this seems to be the issue with these pre-loader ainimation!
I am having a problem with the helper text it does not change the with or height automatically after I change it to relative could someone help me
Make sure that parent frame is set to fit width so it fits the size of the relative text. (Also check if relative text’s width is fit, because it might be fixed for some reason (it needs to be fit))
hey, i followed the project with loading page here and the other with revealing footer, however i found that it is impossible to make hover buttons on the footer layer and a custom cursor bcz the transparent layer is always there to do the reveal. any hint how to fix nandi
Heya! Thanks for the video. I was wondering if there is a way to do this but for when you leave a page? So when you click to go to a different page, a 'loader' will slide in, and then slide away again as the new page has loaded?
Hey thanks 🙏 unfortunately this isn’t possible without additional custom code
@@framer.university Gotcha. Thanks for the quick response!
Edit: Thanks. But I did exactly like you and the animation get stuck at the arrive state! (Fixed)
Your a G man
You’re the real g 🫶
Thanks for the tutorial, was really helpful! I have one bug though that I can't seem to get around... Whenever my pre-loader goes into the exit variant, yes it disappears on my website, but my preloaded component is still in the way of everything on my website (meaning I can't click my nav or any links on my website.) One simple solution in code would've been "display:none" but I'm not sure if this is possible on Framer. Any quick fix for this? Would appreciate it :)
There is a dedicated chapter in the video where I address this issue.
From 21:15 ✌️
THERES ANY OVERRIDE TO MAKE IT REAL WITH JS?
Hey guys for some reason I don't have option for "Appear" for the interactions. Do you know how to fix it?
hmm interesting. It should be there. You did everything as shown in the video?
Does anyone know wht the Appear option is gone from the interactions?
It should be there. Make sure to connect from the whole variant and not from a layer within.
@@framer.university That was the issue, thank you!
When you need to create a professional email to your costumers How you do this?
What do you exactly mean? Like nandi@framer.university? You need a domain and then you can add emails to it with Google Workspace.
Is there anyway to trigger this loader screen once for a session? This method is great (I love your content btw), but it triggers each time someone returns to the screen after navigating around the site.
Unfortunately that would require custom code
@@framer.university out of curiosity, have you experienced any weird clipping of other elements once this loader has disappeared? My navbar somewhat frequently gets clipped once it's loaded. But if you interact with the navbar, the clipping goes away. I can't figure out how to avoid this issue from occurring.
A simple hack to fix this issue could be -
1. Duplicate the homepage and delete the loader animation from it.
2. Link all the buttons to this second homepage (one w/o the loader)
Now each time someone clicks on the home button they will be navigated to the second HP thus skipping the loader screen.
thank bro
MY pleasure, mate!
thnx
Happy to help!
0.59, 0.25, 0.12, 1.17
i kinda wanna know what these numbers are
cool tutorial... but its not responsive for mobile or tablet... So not really useable in mordern day web design seeing as most things are mobile first now.
It can be optimized for mobile quite easily. You can also just create a mobile version of the component and show that on phone breakpoint.
@@framer.university would be nice if it was made responsive from desktop breakpoint so it automatically adjusts when you create the new breakpoints i know this can be done with other elements within framer. Great tutorial still, i subscribed ;)
But this isn’t loading anything. It’s just animating. Actually adds more time.
Yes it is a fake loader - you could say.
It adds more time, but the loading animation’s purpose isn’t to reduce loading time.
Its purpose is to hide the website content as it is being loaded and only show it once everything is properly loaded in.
You can check how much time your site usually loads if it has some heavy elements like 3D objects, and have that time as your loading animation length.
For tablet and iphone its too wide?
Hey there is one problem with this loading screen is when I open the page in new tab but stay in the current page, the loading animation plays anyways, so after a moment I switch to that page the animation is already done. Can I make it to only play when I click into the new tab?
Hi Nandi, thanks for this preloader tutorial. I downloaded your remix and tried it on my website, but one thing I noticed is when the loader rolled up, my text animation in the hero section is also finished. does this mean the preload is not sequential to other effects within the website? TIA.
each appear effect on your site has a transition which has a delay property. You have to adjust that delay so they start after the preloader is done. Hope this helps!
thank you!
Happy to help mate:)