Transition Square — Smooth Page Transition Overlay

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.

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.