Home

Library

Code components

Last updated on:

Updated on:

August 15, 2026

Copy code

Page Transition Manager Code for Framer

Page Transition Manager adds smooth, GPU-accelerated transitions whenever a visitor navigates between pages of your Framer site. Over 15 presets included.

...

Variants:

SPA-safe navigation, fail-safe recovery, and 15 presets

Please note: This component is available only for active license holders. Sign in with your license key or purchase one.

Copying disabled

Preview the component

How to use the component?

Insert the component into the pages where you want to make an amazing transition effect.

Place one instance per page. Drop it anywhere on each page you want transitions on (ideally inside a shared/global component so it applies site-wide). It has no visible size on the live site, so exact placement doesn't matter.

Customize in the properties panel, with the layer selected:

Transition - Choose from 15 presets: Fade, Slide (4 directions), Curtain, Split Reveal, Circle Reveal, Directional Wipe, Scale, Blur Fade, Overlay Sweep, Diagonal Wipe, Rounded Reveal, or Custom.
Duration / Split Timing - Set one overall duration, or split exact Exit and Entry durations independently.
Easing - Pick a preset curve or dial in a fully Custom cubic-bezier.
Reveal Origin - Where circle/wipe/scale effects originate from (center, edges, or corners).
Overlay / Secondary Color, Opacity, Radius, Scale, Blur- Fine-tune the look of each preset.
Exclude Paths - List any paths (e.g.,/admin) that should skip the transition entirely.
Reduced Motion - Choose Native off, Fade-only, or Full animation for visitors with motion sensitivity preferences.

Preview to see the effect. The canvas shows a static badge by design; press Preview (or publish) and click between pages to see the transition play live.
Check out more components like this on our main collection page (all code components).

Where to use?

Best placements:

Agency and portfolio sites - Smooth, editorial page-to-page transitions that reinforce a premium feel.
E-commerce and product sites - Directional wipes or curtains between category and product pages.
Any multi-page Framer site - Since it's engineered for reliability first, it's safe to use as a global, site-wide default.

LIMITED TIME OFFER

Launch amazing websites with

Framerstacks

Still trying to design and launch a website from scratch? Check out 800+ pre-built Framer components and sections that 10x your design speed.

Life time access

Save hundreds of hours

10x design speed

Weekly new releases

Premium designs

Color theme responsiveness

Starts from

$79.00

$99

One-time

Buy now

Page Transition Manager Code for Framer

Page Transition Manager adds smooth, GPU-accelerated transitions whenever a visitor navigates between pages of your Framer site. Over 15 presets included.

...

Variants:

SPA-safe navigation, fail-safe recovery, and 15 presets

Please note: This component is available only for active license holders. Sign in with your license key or purchase one.

Copying disabled

Preview the component

How to use the component?

Insert the component into the pages where you want to make an amazing transition effect.

Place one instance per page. Drop it anywhere on each page you want transitions on (ideally inside a shared/global component so it applies site-wide). It has no visible size on the live site, so exact placement doesn't matter.

Customize in the properties panel, with the layer selected:

Transition - Choose from 15 presets: Fade, Slide (4 directions), Curtain, Split Reveal, Circle Reveal, Directional Wipe, Scale, Blur Fade, Overlay Sweep, Diagonal Wipe, Rounded Reveal, or Custom.
Duration / Split Timing - Set one overall duration, or split exact Exit and Entry durations independently.
Easing - Pick a preset curve or dial in a fully Custom cubic-bezier.
Reveal Origin - Where circle/wipe/scale effects originate from (center, edges, or corners).
Overlay / Secondary Color, Opacity, Radius, Scale, Blur- Fine-tune the look of each preset.
Exclude Paths - List any paths (e.g.,/admin) that should skip the transition entirely.
Reduced Motion - Choose Native off, Fade-only, or Full animation for visitors with motion sensitivity preferences.

Preview to see the effect. The canvas shows a static badge by design; press Preview (or publish) and click between pages to see the transition play live.
Check out more components like this on our main collection page (all code components).

Where to use?

Best placements:

Agency and portfolio sites - Smooth, editorial page-to-page transitions that reinforce a premium feel.
E-commerce and product sites - Directional wipes or curtains between category and product pages.
Any multi-page Framer site - Since it's engineered for reliability first, it's safe to use as a global, site-wide default.

LIMITED TIME OFFER

Launch amazing websites with

Framerstacks

Still trying to design and launch a website from scratch? Check out 800+ pre-built Framer components and sections that 10x your design speed.

Life time access

Save hundreds of hours

10x design speed

Weekly new releases

Premium designs

Color theme responsiveness

Starts from

$79.00

$99

One-time

Buy now

Library overview

Framerstacks hosts one of the largest collections of pre-built Framer components and website sections. With 200+ professionally designed components and 800+ variants.

Our library spans 40+ webpage section categories, enabling creators to build beautiful, high-performance websites in Framer faster than ever.

Explore the main library page.

Contribution

Have something creative on your mind? Or wish to become a contributor inside Framerstacks?

You're welcome. Join as a contributor and help to shape the future of the high-quality Framer components and sections gallery. Head over to the submission page and contribute.