---
title: "Next Page On Scroll — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Daniyal Habib · Navigation. Next Page on Scroll is a cinematic page transition component for Framer that turns the bottom of your page into an immersive…"
canonical: "https://framer.elliotli.dev/component/next-page-on-scroll"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Next Page On Scroll

# Next Page On Scroll

CMS scroll transition for next pag

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

![Next Page On Scroll preview image 1](https://framer.elliotli.dev/og/component/next-page-on-scroll/8df366957d5cffbc/1600x1200.jpg)

## Summary

Next Page on Scroll is a cinematic page transition component for Framer that turns the bottom of your page into an immersive scroll-driven preview of the next page.

## Description

## Next Page on Scroll

Next Page on Scroll is a cinematic page transition component for Framer that turns the bottom of your page into an immersive scroll-driven preview of the next page.

It transforms a standard page ending into a smooth, interactive transition. As users continue scrolling, the component reveals the next page with animated background imagery, moving text, progress indicators, and a cinematic full-screen transition before navigating automatically.

Built with GSAP + ScrollTrigger, it creates a polished premium effect often seen in award-winning portfolio sites, editorial websites, creative studios, and CMS-powered project showcases.

It supports manual pages and CMS collections, making it ideal for blog systems, portfolios, case studies, and project archives.

After purchase, you’ll also receive the **remix link to the full project**, so you can inspect how the CMS structure is built and connect everything easily inside Framer.

Features

## Scroll-Based Page Transition

-   Triggers the next page preview as users reach the end of a page
    
-   Creates a full-screen cinematic scroll handoff
    
-   Smooth automatic page navigation
    
-   Supports click-based navigation too
    
-   Works with Framer routing
    

## CMS Ready

-   Works perfectly with Framer CMS pages
    
-   Connect CMS fields directly
    
-   Supports Next Item linking
    
-   Great for project showcases
    
-   Ideal for blog systems and article navigation
    

## Visual Animation

-   Background zoom animation
    
-   Dynamic overlay darkening
    
-   Text fade + slide motion
    
-   Progress line indicator
    
-   Cinematic page wipe transition
    

## Smart Navigation

-   Auto detects route patterns
    
-   Supports internal links
    
-   Supports external links
    
-   Optional open in new tab
    
-   Works with CMS dynamic routes
    

## Fully Customizable

-   Background image
    
-   Label text
    
-   Title text
    
-   Description text
    
-   Progress line
    
-   Transition color
    
-   Animation timings
    
-   Scroll smoothing
    

Property Controls

## Navigation

-   Next Link
    
-   Clickable toggle
    
-   Open in New Tab
    

## Background

-   Background Image
    
-   Start Scale
    
-   End Scale
    
-   Start Darken
    
-   End Darken
    

## Content

-   Label Text
    
-   Title Text
    
-   Description Text
    
-   Copy Max Width
    
-   Copy Padding
    

## Animation

-   Content Opacity
    
-   Y Movement
    
-   Progress Direction
    
-   Progress Design
    
-   Scrub Smoothing
    
-   Out Animation Color
    

How to Use

## Setup

-   After copying the component, paste it onto your canvas.
    
-   Then put it at the end of the page.
    
-   Select the component itself and set its Position to **Relative**.
    
-   Set Width to **100%**.
    
-   Set Height to minimum **150vh** (Recommended is **200–250vh**).
    
    _Note: The component has a built-in sticky container. The height you set on the component controls how far users scroll before the transition completes. No external wrapper is needed!_
    

## CMS Setup

-   Connect the **Next Link** field to your CMS next item link.
    
-   Connect the **Background Image** to your CMS next item image.
    
-   Connect the **Title** to next item title.
    
-   Connect the **Description** to next item description.
    
-   Connect any additional fields you want to show.
    

## Final Step

-   Customize animations and styling from the properties panel.
    
-   Preview your page and scroll to the end.
    
-   Enjoy a smooth award-style transition between pages.
    

For any confusion or feature request, contact: [**daniyalhundred@gmail.com**](mailto:daniyalhundred@gmail.com)I usually respond within **10 minutes**.

Best for

-   CMS portfolio websites
    
-   CMS case study pages
    
-   Blog websites
    
-   Creative agencies
    
-   Studio websites
    
-   Editorial experiences
    
-   Product showcase websites
    
-   Award-style Framer sites
    

Next Page on Scroll turns standard page endings into seamless transitions, making your website feel intentional, premium, and highly interactive.

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

-   All · #217

## Details

- **Author**: Daniyal Habib
- **Price**: $6.00
- **Published**: 2026-06-04
- **Updated**: 2026-11-01
- **Added**: 2026-05-14
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation