Skip to content

component

Smart Preloader

By Igor Reif

Details

Summary

Includes 'show once' override

Description

SmartPreloader is a lightweight, customizable Framer component that seamlessly handles page load animations and smooth exit transitions. FEATURES Dual-Mode Utility: Works as an interactive homepage preloader with smooth session controls, or as a seamless page transition tool. Smart Session Lock: Displays the animation once per session to maintain high retention and avoid repetitive loading screens for returning visitors. Dynamic Counter & Easing: Precise percentage progress indicator synced with a custom Slow-Warp timeline and cubic-bezier curves for a natural, cinematic flow. Bulletproof Scroll Locking: Keeps the layout intact with no sudden jumps, completely locking user scroll interaction until the reveal animation finishes. 4-Way Directional Motion: Choose from four fluid exit directions (Top, Bottom, Left, Right) to match your site layout. 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.

Introduction

Includes 'show once' override

Rank history

Daily rank per list, from the first snapshot — lower is better.

15011001150115218/148/228/309/79/15
  • All · #1345