About Logo Reveal Loader
Logo Reveal Loader is a premium full-screen logo intro page loader built specifically for Framer.
It reveals your logo using a smooth clip-path animation while a progress bar fills across the screen. Supporting text animates in and out character-by-character, creating a refined, cinematic loading experience.
Designed for high-end portfolios, agencies, and brand-focused websites, this loader ensures your first impression feels intentional and polished.
No external libraries required.Works with SVG and image logos.Fully responsive.
How It Works
Displays full-screen background overlay
Reveals logo using animated clipping mask
Fills a progress bar over a set duration
Animates two text lines character-by-character
Slides the background away to reveal the page
Optionally locks scroll while active
The entire loading sequence is automated — just drop it in.
Logo Reveal Loader — Setup Guide
How to Add the Component
Step 1 — Copy the component
Click Copy Component and paste it directly onto your Framer canvas.
Framer will automatically import it into your Assets panel.
Step 2 — Place it at the top level
Place the component at the top of your layers.
It automatically positions itself as a fixed full-screen overlay.
No manual positioning required.
Step 3 — Upload your logo
Add your logo file in the Logo property.
Supported formats:SVG, PNG, JPG, JPEG, WEBP, GIF
For best quality, SVG is recommended.
Step 4 — Adjust duration
Set the total animation time using the Duration (s) control.
The progress bar and logo reveal will match this timing.
Logo Behaviour
SVG logos can inherit your Accent Color
Or preserve original SVG colors (toggle option)
Raster images are fully supported
Responsive logo width per breakpoint:
Desktop
Tablet
Mobile
Adjustable vertical offset
The loader automatically adapts to screen size.
Text Animation
Two lines of text animate in sequence:
Text 1 enters character-by-character
Text 1 exits upward
Text 2 enters character-by-character
Text 2 exits before reveal
You can customize both text lines directly from properties.
Perfect for:
“Hold tight”
“Loading experience”
“Preparing your journey”
Brand taglines
Customisation Options
Accent color
Background color
Two text fields
Animation duration
Logo width (Desktop / Tablet / Mobile)
Logo vertical offset
Preserve original SVG colors toggle
Scroll locking option
Everything is adjustable directly from Framer’s property panel.
Built-In Smart Handling
Sanitizes SVG files for safety
Automatically removes inline SVG fills (optional)
Responsive breakpoint detection
Smooth cubic-bezier easing
Scroll lock (body + html)
Cleans up animations on unmount
Works with 100dvh for mobile browser accuracy
Perfect For
Agency websites
Branding-heavy landing pages
Personal portfolios
Studio intros
Product launches
Creative showcases
If you want a premium logo reveal loader for Framer with animated text, responsive sizing, and a cinematic page intro — Logo Reveal Loader delivers a strong branded first impression.
