Page Transitions

Create visual continuity between pages with custom page transitions.
Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

[.c-title_step]How to add Page Transitions in Webflow?[.c-title_step]

Use Refokus Page Transitions to create custom page transitions to improve your ​​website navigation and user experience, creating visual continuity between pages.


[.c-title_step]Step #1: Copy/Paste tool URL[.c-title_step]

[.c-text_step]Paste the following script in the “Before tag" field under the "Custom Code" section in the page settings.[.c-text_step]

<script src="https://tools.refokus.io/page-transition/bundle.v1.0.0.js"></script>

[.c-title_step]Step #2: Set custom attributes[.c-title_step]

Everything is made using custom attributes, so when we say “Add” that means“Add a custom attribute”.


Before we start, activate Webflow’s pagination.

  • Create two interactions on Webflow. One for when the page loads (entrance) and one for leaving the pace (exit).
  • Attach the interaction to enter the page to the trigger “On Page Load”
  • Create a button (with display: none) and attach the interaction to leave the page to the click of that element and Add [.c-tool_tag]r-page-transition="1"[.c-tool_tag] on it.


  • To set up the interaction’s duration, you need to add [.c-tool_tag]total-time="800"[.c-tool_tag] (the value is in milliseconds)

Mobile Transitions

You can determine on which devices the transition will be displayed. To do that, add [.c-tool_tag]allowed-devices="desktop, tablet, mobile"[.c-tool_tag] (separated by a comma)

Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

Hello! 👋

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.