Framer Tutorial: Creating Smooth Website Loading Animations
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- 🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to create a smooth loading animation for your Framer website. I'll show you how components and interactions can be used to trigger automatic animations when the page loads. With the help of this video, you'll be able to add a preloader to your website without having to write any code.
Starter file + other remixes: framer.university/resources/s...
Inspiration: graphichunters.com/
0:00 - Introduction
0:30 - Taking a look at the animation
0:52 - Creating the main frame
2:56 - Creating component & variants
16:30 - Adding the interactions
18:24 - Delaying specific elements
22:04 - Free Framer course
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
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! :)
Nice tutorial. Looking forward to the course. Thanks so much!
My pleasure!
Amazing!
The whole video was too easy too follow.
Thanks for this tutorial!
Glad it helped! :) thanks for the feedback 💙
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
thank you for sharing. Awesome technique!
Thanks for watching!
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. :)
🇭🇺🇭🇺
You've helped me so much ! i'm grateful* to you my friend .
So happy to hear this 🫡
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!
bro you're literally the best!!!!!
Thank you so much 💙
Fabulous, thanks!
My pleasure 😇
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 🙌
Thank you, it helped a lot.!!
Glad to hear it mate :)
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!
Welcome!
thank you!
Happy to help mate:)
Nandi you be the best! Thank you
Thank you so much! :)
Lemme know what do you want to see next ✌️
You are the best!
Really appreciate you! :)
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?
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.
your the man
🤝🤝
thank bro
MY pleasure, mate!
thnx
Happy to help!
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.
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 :)
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 :)
Your a G man
You’re the real g 🫶
Hi, nice video! What microphone are you using? It sounds amazing!!
Thanks a lot!
I am using the Logitech Blue Sona. Amazing mic.
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??
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!
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!
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.
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
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. 🫡
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 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?
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
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
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 ✌️
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.
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!
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.
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
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.
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 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.
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
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
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
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!
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 :)
THERES ANY OVERRIDE TO MAKE IT REAL WITH JS?
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.
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
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!
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?
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
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
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))
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!
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 😊
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.
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! 💙
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?
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!
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!