[.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 #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.