Page Transitions

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

[.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.com/page-transition/bundle.v1.0.0.js"></script>

‍

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)