---
title: "Transition Square  — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Rafael Chiqueti · Backgrounds. Smooth Page Transition Overlay"
canonical: "https://framer.elliotli.dev/component/transition-square"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Transition Square

# Transition Square

Smooth Page Transition Overlay

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

![Transition Square  preview image 1](https://framer.elliotli.dev/og/component/transition-square/70cba5e4bb6a7a72/1600x1200.jpg)

## Summary

Smooth Page Transition Overlay

## Description

## Introduction

A cinematic page transition component for Framer that adds smooth layered animations between pages. Easily control colors, direction, timing, background behavior, and scroll locking to create polished navigation experiences.

## Overview

This component adds a smooth page transition animation to Framer websites.

It uses layered animated blocks combined with a background cover to create a cinematic “curtain-style” transition when pages load or when navigating between pages.

The component was designed to solve common limitations with Framer transitions such as scroll behavior, lack of control over timing, and limited customization.

It gives designers a simple way to implement premium page transitions without complex setup.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-l1sb8z96-6p4YR4kKxFvIEwOINTiddqTzpS0qsQ)

## Features

• Smooth layered page transition• Works across page navigation• Optional scroll lock during animation• Customizable colors• Adjustable animation duration• Direction controls• Optional background cover

## Setup Instructions

Follow these steps to correctly implement the component in your project.

### 1\. Add the component to every page

This component must be added to **every page where you want the transition to run**.

If the component is missing from a page, the transition will not work properly when navigating between pages.

### 2\. Set the position to Fixed

After adding the component to a page, set its position to:

**Fixed**

This ensures the transition stays above the page content and covers the viewport during the animation.

### 3\. Set full viewport size

Make sure the component fills the entire viewport.

**Recommended settings**:

Position: Fixed On topWidth: Relative **100%**Height: Viewport **100%**

The component must cover the full screen to properly display the transition.

### 4\. Keep the component above all content

The component should remain on top of other page elements in the layer hierarchy.

It acts as a full-screen overlay during the animation.

### 5\. Use the same setup on all pages

For smooth navigation transitions, make sure the component settings are consistent across all pages.

## Controls

### Animation Duration

Controls the speed of the main transition animation.

### Logo Exit Duration

Controls how long the logo takes to disappear at the end of the animation.

### Background

Enable or disable the background overlay behind the animation.

### Background Color

Sets the color of the background overlay.

## Best Use Cases

This component works especially well for:

• Portfolio websites• Creative studios• Agencies• Landing pages• Premium brand websites

## Refund Policy

Due to the digital nature of this product, refunds are generally not offered once the component has been delivered.

If you experience any issue, please contact us and we will do our best to help resolve the problem.

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

-   All · #5894

## Details

- **Author**: Rafael Chiqueti
- **Price**: $10.00
- **Published**: 2026-03-24
- **Updated**: 2026-03-24
- **Added**: 2026-03-04
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background