Webflow Joe

F'in Sweet Webflow Hacks

Delayed page load on click

What can this be used for?

  • Useful for custom page transitions
  • Doing { anything } before loading the new page

Step 1

Apply interaction

Apply a click interaction to every element that should initiate the delay. Every element loading a new page inside your website needs the interaction!! This interaction will be the animation you want to play before the page starts to navigate. It should also be the same amount of time as your time variable in the code below. For example, with the 1500 value below, your animation should last 1500ms. ix1 and ix2 both work here.

Step 2

Add this to the <body> of custom code</body>

Inside <head> tag</head>

What the heck does that code mean?

Let's learn by going step by step through the code. The code below is the exact code above with comments.

Inside <head> tag</head>

Why mention target?

Great question! There are two reasons

  1. e.preventDefault(); prevents everything that has to do with a standard link functionality. target="_blank" by default will open the link in a new tab. We're preventing EVERYTHING that's default. We need to manually tell the browser to reapply the target="_blank" functionality
  2. If you have a link to your Facebook page, or any third party site outside of your domain, you want to open that link a new tab. If you want to open it in a new tab, that means you don't want to run your page interaction. Page interactions are generally used only when you're loading a new page inside your site. WIthout that target code, there will be a delay opening the link in a new tab. The user would have to wait 1.5 seconds until that new tab opens. Yuck!

Nice! You're done. Now see it live.

Interested in more f'in sweet Webflow hacks?

Get an alert when we post a new one.
We have 20 posts scheduled to send throughout the next 3 months.

Nice! We'll let you know when a new hack is available.
Something went wrong while submitting the form. Please email us directly at projects@finsweet.com

Want Finsweet to build your Webflow site?

We're Webflow Experts!