Page Transitions

Hello! 👋

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

Page Transitions

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

[.c-title-3-primary]How to add Page Transitions in Webflow?[.c-title-3-primary]

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

Step #1

Copy the

Page Transitions

<script> and paste it before the </body> of your page

Copy Script Code
<script
src=
"
https://tools.refokus.com/page-transition/bundle.v1.0.0.js
"
></script>
<script src="https://tools.refokus.com/page-transition/bundle.v1.0.0.js"></script>
Copy Text to Clipboard
Copied!
Step #2

Set Custom Attributes

Everything is made using custom attributes, so when we say “Add” that means "Add a custom attribute”.
Learn more
anchor link
Create your In and Out transitions in Webflow Animations
anchor link
Setting up the 'In' Animation
anchor link
Setting up the 'Out' Animation
anchor link
Create a delay for the 'Out' Animation
anchor link
Responsive Options
anchor link
anchor link
anchor link
anchor link
anchor link
General Notes
Step #3

Publish your site to the staging domain to test the tool is working.

Clonable Demo

Publish your site to the staging domain to test the tool is working.

Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback
Share on LinkedInShare on TwitterShare via URL
Other Webflow tools you might be interested in
Back to directory
Copy to Clipboard
Create a button that will copy any piece of text, including links, to the clipboard.
Link to tool
Form Validator
Create a form field validator inside of your native Webflow form element.
Link to tool
Slider Generator
Create custom sliders in Webflow powered by SlickJS.
Link to tool