---
title: "Smart Preloader — Free Framer component · Best of Framer"
description: "Free Framer component · by Igor Reif · Loaders. Includes 'show once' override"
canonical: "https://framer.elliotli.dev/component/smart-preloader"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Smart Preloader

# Smart Preloader

Includes 'show once' override

[View on Framer](https://framer.com/marketplace/components/smart-preloader/?via=elliot-li)

![Smart Preloader preview image 1](https://framer.elliotli.dev/og/component/smart-preloader/df32d826bedf1365/1600x1200.jpg)

## Summary

Includes 'show once' override

## Description

## SmartPreloader is a lightweight, customizable Framer component that seamlessly handles page load animations and smooth exit transitions.

### FEATURES

1.  **_Dual-Mode Utility:_** Works as an interactive homepage preloader with smooth session controls, or as a seamless page transition tool.
    
2.  **_Smart Session Lock:_** Displays the animation once per session to maintain high retention and avoid repetitive loading screens for returning visitors.
    
3.  **_Dynamic Counter & Easing:_** Precise percentage progress indicator synced with a custom Slow-Warp timeline and cubic-bezier curves for a natural, cinematic flow.
    
4.  **_Bulletproof Scroll Locking:_** Keeps the layout intact with no sudden jumps, completely locking user scroll interaction until the reveal animation finishes.
    
5.  **_4-Way Directional Motion:_** Choose from four fluid exit directions (Top, Bottom, Left, Right) to match your site layout.
    
6.  **_Performance First:_** Lightweight, frame-budget conscious React implementation using Framer Motion with automatic SSR/canvas optimization.
    

### TECHNICAL DETAILS

-   **_Framework Support:_** Built natively for Framer using React and TypeScript.
    
-   **_Animation Engine:_** Powered by Framer Motion (useMotionValue, useTransform, animate) for 60fps performance.
    
-   **_Scroll Lock Strategy:_** Event-level interaction trap paired with scrollbar-gutter: stable to ensure zero layout shift.
    
-   **_Customization Controls:_** Complete control over Base/Load colors, start delay, reveal time, exit duration, slow steps, counter typography, and alignment.
    
-   **_Easing Profiles:_** Built-in Cinematic, Expo, and fully customizable Bezier curves (cubic-bezier).
    
-   **_Canvas & SSR Ready:_** Features a dedicated Canvas preview mode and static rendering safety to protect site SEO.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1552

## Details

- **Author**: Igor Reif
- **Published**: 2026-07-24
- **Updated**: 2026-07-24
- **Added**: 2026-07-24
- **Categories**: Loaders

## More like this

-   [Preloader Pro V4](/component/preloader-pro-v4) — Interface Studio · $12 — Your Website, Beautifully Unveiled
-   [Circleloader](/component/circleloader) — gustavwf · $5 — Circular logo reveal loader.
-   [AI Text Loading](/component/ai-text-loading) — Syauqizaidan Khairan Khalaf · $5 — Thinking phrases with a shimmer
-   [Preloader Pro V3](/component/preloader-pro-v3) — Interface Studio · $10 — Set the Stage Before the Story