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.

Smooth Page Transition Overlay