awesome tutorial. Just started learning Framer this is so clear and easy to follow. Thanks for this.

@framer.university

8 ай бұрын

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!

@framer.university

7 ай бұрын

My pleasure!

Amazing! The whole video was too easy too follow. Thanks for this tutorial!

@framer.university

Ай бұрын

Glad it helped! :) thanks for the feedback 💙

Awesome content, glad that I found your channel - I'm from Hungary too

@framer.university

9 ай бұрын

Glad to hear it! Hope you’ll like my upcoming videos as well. :) 🇭🇺🇭🇺

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

@framer.university

9 ай бұрын

Thanks Joshua! Will start making content about the CMS as well in the future!

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!

@framer.university

9 ай бұрын

Thanks for watching!

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

bro you're literally the best!!!!!

@framer.university

Ай бұрын

Thank you so much 💙

You've helped me so much ! i'm grateful* to you my friend .

@framer.university

2 ай бұрын

So happy to hear this 🫡

Thank you for sharing ! I’m learning so much from all your videos- do you know how to create custom password pages?

@framer.university

9 ай бұрын

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?

@natasavukota1441

Ай бұрын

Same problem here, did you find any solution?

@nouraltabba

Ай бұрын

@@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!

@framer.university

9 күн бұрын

Happy to help mate:)

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😲

@framer.university

5 ай бұрын

Sick! Make it 🙌

Fantastically clear as always, thank you! But I have a question if I can anyhow block page behind the preloader from scrolling?

@framer.university

26 күн бұрын

Thank u 🙏 Check this guide: framer.university/blog/how-to-block-scrolling-during-the-website-s-preloader-in-framer

@anastasiiafilenkova8582

25 күн бұрын

@@framer.university Thanks! Best University after my Alma Mater :)

Fabulous, thanks!

@framer.university

5 ай бұрын

My pleasure 😇

Very cool and smooth, thanks Nandi. how can we have dynamic loading transition. like really based on the page Loading time?

@framer.university

9 ай бұрын

Thanks! Unfortunately that would need button code. Natively you can only set a fixed duration.

Thank you, it helped a lot.!!

@framer.university

2 ай бұрын

Glad to hear it mate :)

Nandi you be the best! Thank you

@framer.university

9 ай бұрын

Thank you so much! :) Lemme know what do you want to see next ✌️

Thank you!

@framer.university

9 ай бұрын

Welcome!

Hi, nice video! What microphone are you using? It sounds amazing!!

@framer.university

6 ай бұрын

Thanks a lot! I am using the Logitech Blue Sona. Amazing mic.

You are the best!

@framer.university

9 ай бұрын

Really appreciate you! :)

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!

@framer.university

8 ай бұрын

Thanks! In this case yes, the easiest solution is duplicating the component and adjusting it accordingly.

@ralphchristiansemana5899

8 ай бұрын

@@framer.university I am duplicating it but when I edit it the desktop is changing as well

@Motiv8Malik

7 ай бұрын

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??

When will the free course be available. I have been waiting since forever. Great video btw

@framer.university

8 ай бұрын

Thanks! I’m releasing it really soon! Stay tuned :)

your the man

@framer.university

4 ай бұрын

🤝🤝

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?

@framer.university

9 ай бұрын

Hey! I’d need to see the project. Send remix link in Twitter DM.

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 ?

@framer.university

3 ай бұрын

Check the latest resource on framer.university called Show Once Override. 🫡

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!

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!

@framer.university

5 ай бұрын

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.

@Jauneau19899

5 ай бұрын

@@framer.university Very patronising but ok

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

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...

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!

@framer.university

7 ай бұрын

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

@everydaysebra

6 ай бұрын

@@framer.university somehow this is not working for me. scrolling is still possible. do I have to do anything else?

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?

@framer.university

9 ай бұрын

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

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.

thank bro

@framer.university

9 ай бұрын

MY pleasure, mate!

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 :)

@framer.university

8 ай бұрын

There is a dedicated chapter in the video where I address this issue.

@framer.university

8 ай бұрын

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.

@framer.university

4 ай бұрын

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, 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

@framer.university

6 ай бұрын

Hey! It is Nandi. You cannot add this behavior natively. It works require custom code.

Your a G man

@framer.university

5 ай бұрын

You’re the real g 🫶

What if I have a button link inside the component of overlay? Pointer events selection makes it impossible to click...

@framer.university

8 ай бұрын

Select that specific clickable element and set the pointer events back to auto on it

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

8 ай бұрын

Apply delay for the animations so they happen after the loading animation.

@LejonetJanne

8 ай бұрын

@@framer.university thanks. Yes. I did that.

@framer.university

8 ай бұрын

@@LejonetJanne amazing!

@ariefhaikal604

6 ай бұрын

@@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!

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?

@framer.university

5 ай бұрын

This is something that needs custom code. I’ll try coming up with a solution.

@Cleedek

2 ай бұрын

@@framer.university Have you found the solution for this please?

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?

@framer.university

2 ай бұрын

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?

@framer.university

9 күн бұрын

Yea! Use this override: framer.university/resources/show-once-code-override-for-framer

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.

@framer.university

Ай бұрын

hey! this will help ya: framer.university/resources/show-once-code-override-for-framer lemme know if you need any help!

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

@framer.university

19 күн бұрын

The solution should be pointer events set to none, yes! I show it in the video too.

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!

@framer.university

4 ай бұрын

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?

@notlowtemp

2 ай бұрын

@@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!

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?

@framer.university

2 ай бұрын

what is the preloader's link?

thnx

@framer.university

9 ай бұрын

Happy to help!

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.university

9 ай бұрын

Framer has a pre-built cookie banner component that you can fully customize. Search for it in the insert menu.

@thewebart

9 ай бұрын

@@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.

@framer.university

9 ай бұрын

I think this is what you’re looking for: kzread.info/dash/bejne/YoyOtLijedHZiLw.htmlsi=W6BCBUY-ZNvKjZ4W

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

5 ай бұрын

Thanks! Yes it is because you missed a step. Make sure to watch the full video!

@supoflex

5 ай бұрын

​@@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 :))

@framer.university

5 ай бұрын

@@supoflexno worries, mate :)

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?

@framer.university

7 ай бұрын

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.

@philippegallant4622

5 ай бұрын

@@framer.universityNo code is fun and all but do you know a way to actually do it with a bit of code?

@GreatJoshua-rf9ll

3 ай бұрын

Ugh.. Lottiefiles bruv, Lottiefiles

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

@framer.university

28 күн бұрын

Hey! Use this: framer.university/resources/show-once-code-override-for-framer

Hey guys for some reason I don't have option for "Appear" for the interactions. Do you know how to fix it?

@framer.university

6 ай бұрын

hmm interesting. It should be there. You did everything as shown in the video?

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

@framer.university

Ай бұрын

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))

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.university

4 ай бұрын

I’m soon releasing an override that will only show it once.

@miserywas8285

3 ай бұрын

@@framer.university Any update on this? Has it been released? I don't see it anywhere

THERES ANY OVERRIDE TO MAKE IT REAL WITH JS?

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

@framer.university

5 ай бұрын

I’ll come up with a solution for this!

@AK--gp4ow

4 ай бұрын

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 😊

Does anyone know wht the Appear option is gone from the interactions?

@framer.university

2 ай бұрын

It should be there. Make sure to connect from the whole variant and not from a layer within.

@diegomorrison_

2 ай бұрын

@@framer.university That was the issue, thank you!

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

3 ай бұрын

Here’s the solution: framer.university/blog/how-to-block-scrolling-during-the-website-s-preloader-in-framer

@AlfredoNatal31

3 ай бұрын

@@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.

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

8 ай бұрын

Unfortunately that would require custom code

@cosmictofu

8 ай бұрын

@@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.

@shikhasethi6955

6 ай бұрын

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.

When you need to create a professional email to your costumers How you do this?

@framer.university

8 ай бұрын

What do you exactly mean? Like nandi@framer.university? You need a domain and then you can add emails to it with Google Workspace.

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

5 ай бұрын

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.

@HeeneyOG

5 ай бұрын

@@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.

@framer.university

4 ай бұрын

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.

@framer.university

3 ай бұрын

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?

@framer.university

9 ай бұрын

Hey thanks 🙏 unfortunately this isn’t possible without additional custom code

@masonwong576

9 ай бұрын

@@framer.university Gotcha. Thanks for the quick response!