Logo Pre-loader

Create a cinematic first impression with a premium loading experience for your Framer website.

Logo Pre-loader is a production-ready Framer component that acts as a professional "gatekeeper" before your website is revealed. It temporarily masks your content with a customizable background, plays a beautifully choreographed logo animation, and then seamlessly transitions visitors into your live site.

Perfect for portfolios, agencies, SaaS products, startups, AI tools, and premium brands looking to elevate their first impression.

✨ Key Features

6 Cinematic Animation Presets – Instantly switch between Glitch, Zoom, Blur, Fade, Slide Up, and Slide Down to match your brand identity.
Smart Session Memory – Built-in Play Once mode uses sessionStorage so returning visitors won't repeatedly see the intro.
Advanced Timing Controls – Fine-tune the entrance, hold, and exit durations to perfectly match your site's pacing.
Editor-Friendly Workflow – Hide the loader while designing using the Show in Editor toggle without removing the component.
Performance Optimized – Powered by an efficient multi-stage animation system with Framer Motion for smooth, hardware-accelerated performance.

🎛️ Property Controls

Preset

Choose from six professionally designed animation styles:

Zoom
Fade
Blur
Slide Up
Slide Down
Glitch

Logo

Upload your logo in SVG, PNG, or JPG format for crisp rendering on every screen size.

Logo Width

Adjust the logo size from 10px to 2000px.

Background

Choose the background color displayed while your website is loading.

Enter Time

Control how long the logo takes to animate into view.

Hold Time

Set how long the logo remains visible before transitioning to your website.

Exit Time

Adjust the speed of the final reveal animation.

Show in Editor

Preview the loader directly inside Framer, or hide it while designing your page.

Play Once

Choose whether the animation should:

Always play on every refresh.
Play Once Per Session using browser memory.

🛠️ How to Use

1. Add the Component

Drag Logo Pre-loader onto your homepage. Since it uses a fixed position, it automatically covers the entire viewport.

2. Upload Your Logo

Add your brand logo and choose an animation preset that fits your visual identity.

3. Customize the Timing

Adjust the Enter, Hold, and Exit durations until the intro feels natural.

4. Publish

While designing, disable Show in Editor for a cleaner workspace. Enable it before publishing if you'd like to preview the complete experience.

🔄 Refund Policy

Due to the digital nature of this product, all purchases are final and non-refundable.

If you experience any issues or need help integrating the component into your Framer project, feel free to reach out. I'll be happy to help you get everything running smoothly.

❓ Questions & Support

Free lifetime updates and email support are included with every purchase.

If you have any questions, feel free to email me or connect with me on LinkedIn.

You can also visit Integry to explore more Framer templates and components.

I'm always happy to help with installation, customization, or any questions you have about the component.

🚀 Setting Up

Need help setting up your website or integrating this component?

Just send me an email or connect on LinkedIn, and I'll help you get everything running perfectly in your Framer project.