01

transition

Replay

Replay

02

attributes

03

code

How it works

This script adds smooth page transitions to your Webflow site with just a few clicks. Simply copy the component below, paste it into your project, and customize the animation directly in Webflow's interactions panel — no coding required.

Installation

Step 1: Copy the component

Click the button below to copy the transition component to your clipboard. Then paste it anywhere in your Webflow project using Cmd+V (Mac) or Ctrl+V (PC).

copy element to webflow

Copy to webflow

Copy to webflow

Step 2: Add the scripts

Add these two code snippets to your project settings.
Go to Project Settings → Custom Code and paste the Head Code in the "Head Code" section and the Footer Code in the "Before </body> tag" section.

head code

Copy

Copy

<style>
body .pm-transition {display: block}
.w-editor .pm-transition {display: none;}
.no-scroll-transition {overflow: hidden; position: relative;}
</style>

footer code

Copy

Copy

<script>
let transitionTrigger = $(".pm-transition-trigger");
let introDurationMS = 600;
let exitDurationMS = 1000;
let excludedClass = "no-transition";
  
// On Page Load
window.addEventListener("DOMContentLoaded", (event) => {
if (transitionTrigger.length > 0) {
  Webflow.push(function () {
    transitionTrigger.click();
  });
  $("body").addClass("no-scroll-transition");
  setTimeout(() => {$("body").removeClass("no-scroll-transition");}, introDurationMS);
}
});

// On Link Click
$("a").on("click", function (e) {
  if ($(this).prop("hostname") == window.location.host && $(this).attr("href").indexOf("#") === -1 &&
      !$(this).hasClass(excludedClass) && $(this).attr("target") !== "_blank" && transitionTrigger.length > 0) {
    e.preventDefault();
		$("body").addClass("no-scroll-transition");
    let transitionURL = $(this).attr("href");
    transitionTrigger.click();
    setTimeout(function () {window.location = transitionURL;}, exitDurationMS);
  }
});
// On Back Button Tap
window.onpageshow = function(event) {if (event.persisted) {window.location.reload()}};
// Hide Transition on Window Width Resize
setTimeout(() => {$(window).on("resize", function () {
setTimeout(() => {$(".pm-transition").css("display", "none");}, 50);});
}, introDurationMS);
</script>

Step 3: Create a global component

After pasting the transition element, convert it to a Symbol/Component and add it to all pages where you want transitions to work. This ensures the animation triggers consistently across your entire site.

Configuration Options

The script includes several customizable options at the top of the code:

  • introDurationMS: 600 — Duration of the page entrance animation (in milliseconds)
  • exitDurationMS: 1000 — Duration of the page exit animation (in milliseconds)
  • excludedClass: "no-transition" — Add this class to any link you want to exclude from transitions

Advanced Features

  • Scroll prevention — The script automatically locks scrolling during transitions to ensure smooth animations
  • Smart link detection — Only triggers on internal links (external links and anchors work normally)
  • Back button support — Properly handles browser back/forward navigation
  • Editor visibility — Transitions are hidden in the Webflow editor for easier editing
  • Responsive handling — Automatically manages transitions during window resizing

Customization

Once installed, you can fully customize the transition animation directly in Webflow:

  1. Open your component and locate the div with class pm-transition-trigger (or transition-trigger)
  2. You'll find two interactions already attached:
    • Page Open — Controls how the page reveals
    • Page Exit — Controls how the page disappears

Simply edit these interactions to create your own unique transitions. Add blur effects, sliding panels, scaling animations, or anything else you can imagine — it's all customizable through Webflow's native interaction panel. No code needed.

The default setup includes a subtle blur effect, but you can replace it with any animation you want: sliding doors, fade effects, morphing shapes, or even complex multi-step animations. The component gives you complete creative control while handling all the technical complexity behind the scenes.

‍

contact me

Contact for brand, web
or motion

Mail

Mail