Logo Nav Preloader

From Logo Reveal to Navigation

Logo Nav Preloader turns your brand’s first impression into a seamless navigation experience. Your logo appears through a precise mask, scales and travels into the navbar, and a curtain lifts to reveal your page.

Designed to Be Edited on the Canvas

Unlike a code-only navbar, the navigation uses native Framer canvas layers. Customize links, labels, buttons, spacing, typography, colors, layouts, and the mobile menu visually. The embedded preloader handles the animation, with settings available in Framer’s properties panel—no code editing required.

Features

• Logo-to-navbar transition — Coordinated mask reveal, logo flight, resizing, and curtain exit.

• Canvas-editable navigation — Real Framer layers for links, CTA, and mobile menu.

• Two navigation layouts — Choose a perfectly centered logo or a standard left-aligned logo. The centered logo remains aligned regardless of link count.

• Six mask directions — Center Out, Left to Right, Right to Left, Radial, Bottom Up, and Top Down.

• Unified Transition control — Adjust coordinated timing and easing in one place.

• Custom branding — Upload SVG, PNG, JPG, JPEG, or WebP logos; adjust colors, opacity, aspect ratio, and sizes.

• Responsive sizing — Independent logo widths for desktop, tablet, and mobile, with mobile navigation variants.

• Canvas preview modes — View the resting state, intro screen, or looping animation while editing.

• Interactive demo — Switch logo placement or mask direction and replay the animation.

• GSAP-powered motion — Carefully coordinated movement and easing.

Made For

Creative studios, portfolios, agencies, product launches, and brand-led websites looking for a memorable introduction that naturally becomes useful navigation.

Edit the navigation on the canvas. Fine-tune the animation in the properties panel. No coding needed.