---
title: "Preload Animation — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Mikiko Niwa · Loaders. preload animation component designed to deliver a polished and memorable first impression when users open your website."
canonical: "https://framer.elliotli.dev/component/preload-animation"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Preload Animation

# Preload Animation

A clean animated logo for Framer sites

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

![Preload Animation preview image 1](https://framer.elliotli.dev/og/component/preload-animation/258b5d1fe7205ad1/1600x1200.jpg)

## Summary

preload animation component designed to deliver a polished and memorable first impression when users open your website.

## Description

**Preload Animation** is a Framer preload animation component designed to deliver a polished and memorable first impression when users open your website.

When the page loads, your logo appears in the center of the screen with a smooth animation. Once the logo animation is complete, the first-view (hero) section scrolls up from the bottom, seamlessly revealing the top of your homepage.

### Customization

-   **Logo replacement**
    
    -   Easily replace the logo with your own SVG file
        
    -   Ideal for brand logos and symbols
        
-   **Color control**
    
    -   Background color can be customized
        
    -   Logo color can be customized
        
    -   Default setup uses a black background with a white logo
        
-   **Animation settings**
    
    -   Adjust the speed of the logo animation
        
    -   Adjust the scroll-up transition speed
        
    -   Fine-tune the overall timing to match your design
        

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

-   All · #4080

## Details

- **Author**: Mikiko Niwa
- **Price**: $5.00
- **Published**: 2026-01-10
- **Updated**: 2026-01-24
- **Added**: 2025-12-27
- **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