5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T13a5,

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.

5a:[["$","$L5d",null,{"post":{"id":"019e9343-730c-767c-8228-fdc115f80523","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0377da32-5157-43ad-9c57-e949e915db9e","name":"Daniyal Habib","slug":"daniyalweb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1271714/avatar-8E77IXnX9HLKLrOPuUGBp3gf2I7AYE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"DiQKkMtJXLcaCfidXAGm","resolved":true,"title":"Next Page On Scroll","body":"$5e","bodyJson":null,"introduction":"CMS scroll transition for next page","slug":"next-page-on-scroll","author":{"framerUserId":"0377da32-5157-43ad-9c57-e949e915db9e","name":"Daniyal Habib","slug":"daniyalweb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1271714/avatar-8E77IXnX9HLKLrOPuUGBp3gf2I7AYE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/DiQKkMtJXLcaCfidXAGm/next-page-on-scroll-1kBTJYTOa1FyAtLuG00A7bBo8CroEM","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-14T15:06:56.861Z","updatedAt":"2026-06-04T15:27:32.711Z","publishedAt":"2026-06-04T15:32:11.660Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://next-page-on-scroll.framer.website/blog/getting-started","price":"6","paymentUrl":"https://daniyalweb.gumroad.com/l/toemv?wanted=true","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"nU5SwoSLsa3naQJZEbZX","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":21,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-04T15:32:11.660Z","updatedAt":"2026-06-04T15:32:11.660Z","reported":false}}],"$L5f"]

Suggested for you