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.
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.
• Smooth layered page transition• Works across page navigation• Optional scroll lock during animation• Customizable colors• Adjustable animation duration• Direction controls• Optional background cover
Follow these steps to correctly implement the component in your project.
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.
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.
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.
The component should remain on top of other page elements in the layer hierarchy.
It acts as a full-screen overlay during the animation.
For smooth navigation transitions, make sure the component settings are consistent across all pages.
Controls the speed of the main transition animation.
Controls how long the logo takes to disappear at the end of the animation.
Enable or disable the background overlay behind the animation.
Sets the color of the background overlay.
This component works especially well for:
• Portfolio websites• Creative studios• Agencies• Landing pages• Premium brand websites
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.