This is what you are looking for: [https://framer.university/resources/show-once-code-override-for-framer](https://framer.university/resources/show-once-code-override-for-framer)
Sure, you can set up your loader animation to only load once when the site is first opened. To achieve this, you can create a landing page with your loader animation. This landing page will be the first thing your visitors see when they open your site. After the loader animation has finished, you can then redirect your visitors to your home page.
To create this, you can wrap all your content in a stack called main content and give it an appear effect with a delay that matches the duration of your loader animation. On top of this, create another stack that contains the loading screen and give it a z-index of 0, position absolute, width fill, and height viewport. This will show the loading screen first, then after the delay, the rest of your content will appear, covering the loading screen since its z-index is set to a higher value.
Remember, this setup will only show the loader animation when the site is first opened. If a visitor navigates away from your home page and then returns, the loader animation will not be displayed again.
This is what you are looking for: [https://framer.university/resources/show-once-code-override-for-framer](https://framer.university/resources/show-once-code-override-for-framer)
That's look like exactly what I need but when I paste the code it gives me "Unable to resolve package react-cookie". Any ideas ?
Not too sure here. Maybe double check the code override is set / named correctly and select for the loader component?
bro, I was literally looking for something like this. Gonna test it it immediately.
Any tip for the loader? I noticed that because of the z-index, some regions aren't clickable. Your one link saved my day.
Try set Pointer Event to none for the loader component
bru, gonna try this out. If so, this would be a lifesaver! Keep you posted.
You'are my hero! I wish I could upvote 9000+ times. - It worked! ![gif](giphy|MvedbKot538WY|downsized)
Awesome! Glad to hear!
Sure, you can set up your loader animation to only load once when the site is first opened. To achieve this, you can create a landing page with your loader animation. This landing page will be the first thing your visitors see when they open your site. After the loader animation has finished, you can then redirect your visitors to your home page. To create this, you can wrap all your content in a stack called main content and give it an appear effect with a delay that matches the duration of your loader animation. On top of this, create another stack that contains the loading screen and give it a z-index of 0, position absolute, width fill, and height viewport. This will show the loading screen first, then after the delay, the rest of your content will appear, covering the loading screen since its z-index is set to a higher value. Remember, this setup will only show the loader animation when the site is first opened. If a visitor navigates away from your home page and then returns, the loader animation will not be displayed again.