Next Page On Scroll

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.comI 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.