---
title: "LogoMotion — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Luis Martínez · Loaders. LogoMotion component creates a sleek animated preloader that showcases your logo as your site loads."
canonical: "https://framer.elliotli.dev/component/logomotion"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/LogoMotion

# LogoMotion

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

![LogoMotion preview image 1](https://framer.elliotli.dev/og/component/logomotion/a3886d39d6300b9f/1600x1200.jpg)

## Summary

LogoMotion component creates a sleek animated preloader that showcases your logo as your site loads.

## Description

**LogoMotion – Animated Logo Preloader for Modern Websites**The LogoMotion component creates a sleek animated preloader that showcases your logo as your site loads. With smooth motion, optional rotation, and fade-out effect, it ensures your brand leaves a lasting first impression.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-po9uf9et-IEGvNpxbkqDhxS8BGwQ3e3nfuJP7yH)

**Features:**

-   Animated logo entrance and exit with smooth easing
    
-   Optional infinite logo rotation
    
-   Fully customizable background color
    
-   Adjustable logo width and height
    
-   Automatic fade-out after loading (3s duration)
    
-   Built-in with Framer Motion for fluid animations
    

**How it works:**

Place LogoMotion as the **first element** inside your main Frame. Then adjust the following:

-   **Width:** 100%
    
-   **Height:** 100vh
    
-   **Z-index:** 10 (max)
    
-   **Position:** Fixed (Top = 0, Left = 0)
    
-   **Pointer events:** none (in Style panel)
    
-   Finally, **lock the component** to avoid accidental edits.
    

Once set, drop in your logo, adjust its size, background, and rotation. The animation runs automatically on page load and fades out after 3 seconds.

**Perfect for:**

-   Branding-focused websites
    
-   SaaS and startup landing pages
    
-   Portfolios and creative studios
    
-   Any project that needs a polished loading experience
    

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

-   All · #10901

## Details

- **Author**: Luis Martínez
- **Price**: $10.00
- **Published**: 2025-10-10
- **Updated**: 2025-10-10
- **Added**: 2025-10-01
- **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