---
title: "EditorialLoader — Free Framer component · Best of Framer"
description: "Free Framer component · by Aathif Thajudeen · Loaders. Premium scroll-locked hero reveal"
canonical: "https://framer.elliotli.dev/component/editorialloader"
---

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

# EditorialLoader

Premium scroll-locked hero reveal

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

![EditorialLoader preview image 1](https://framer.elliotli.dev/og/component/editorialloader/caa26acd2ff77843/1600x1200.jpg)

## Summary

Premium scroll-locked hero reveal

## Description

**Editorial Loader** is a premium opening animation for your website's main image, bringing a high-end luxury magazine feel to any Framer site. Instead of just popping into view, your hero image expands dynamically in a smooth three-step sequence: it grows from zero, anchors briefly inside a beautifully balanced mini-frame, and then unfolds seamlessly to take over the entire screen.

**🛠️ The Problem It Solves: Zero Layout Shifting**

On most websites, loading animations cause a frustrating glitch where the layout jumps sideways when the desktop scrollbar track disappears and reappears.

**Editorial Loader fixes this completely.** It freezes the webpage and reserves layout stability while your image expands. The exact millisecond the full-bleed transition ends, it releases page controls so users can scroll normally with **absolutely zero screen shifting or layout jerking.**

**🎛️ Simple Panel Controls (No Coding Needed)**

Customize the entire micro-interaction right from Framer's right-hand sidebar panel:

-   **Hero Image**: Easily upload any image asset straight from your desktop or canvas.
    
-   **Initial Width & Height**: Customize the precise pixel size of your intermediate pause box.
    
-   **Hold Delay**: Choose exactly how long the image waits before expanding to build anticipation.
    
-   **Duration**: Fine-tune how fast or slow the container unfolds to full-bleed dimensions.
    
-   **Ease Profile**: Choose between a luxury custom curve (**Editorial**), an organic tension curve (**Balanced**), or straight progression (**Linear**).
    
-   **Corners**: Soften the aesthetic by adding custom rounded edges to your loading image block.
    

**🎨 Built for Web Designers**

-   **Smart Canvas Fallback**: Inside the Framer editor workspace, the component bypasses the animation loop and stays fully loaded at 100% size. This ensures you can design text stacks, navigation bars, and buttons on top of it with zero guesswork.
    
-   **100% Responsive Layouts**: Automatically scales perfectly to fit mobile, tablet, and widescreen desktop breakpoints effortlessly.
    

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

-   All · #2100

## Details

- **Author**: Aathif Thajudeen
- **Published**: 2026-05-30
- **Updated**: 2026-05-30
- **Added**: 2026-05-20
- **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