---
title: "Shutter Transition — Free Framer component · Best of Framer"
description: "Free Framer component · by Eddie Mj · Loaders. The shutter transition lasts 0.2s, and works well paired with the \"Fade In\" page transition built in Framer."
canonical: "https://framer.elliotli.dev/component/shutter-transition"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Shutter Transition

# Shutter Transition

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

![Shutter Transition preview image 1](https://framer.elliotli.dev/og/component/shutter-transition/fed46414fb0596be/1600x1200.jpg)

## Summary

The shutter transition lasts 0.2s, and works well paired with the "Fade In" page transition built in Framer.

## Description

A page transition component that mimics a shutter effect to reveal the content underneath. The reveal shows a solid color of your choice before revealing the website underneath. The shutter transition lasts 0.2s, and works well paired with the "Fade In" page transition built in Framer. This shutter animation is perfect for website page transitions or content reveals.

**Features:**

-   Responsive shutter animation that spans the full page width
    
-   Quick 0.2s transition, which doesn't distract users from main content
    
-   Smooth page transition with easy ease
    
-   Customizable colors and background fade allows you to personalize the transition **_NOTE:_** Keep "BG Fade" color set to 0% opacity in order to allow the content to still be seen after the animation.
    
-   Perfect for pre-loaders, content reveals, or page transitions
    

**_PLEASE NOTE:_** Make sure to give the component “Pointer: None” under "Styles" so the website content underneath works properly.

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

-   All · #4533

## Details

- **Author**: Eddie Mj
- **Published**: 2025-10-07
- **Updated**: 2025-10-07
- **Added**: 2025-10-02
- **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