Globally delaying page transitions

Hi, I’m currently using the following code to delay link transitions in order for an animation to occur:

function delay (URL) {
setTimeout( function() { window.location = URL }, 1500 );
}

combined with this on the URLs I want to trigger it:

`javascript:delay('URL goes here')

and this works perfectly… however the site is getting built out more and integrating the CMS. I actually don’t have any links that shouldn’t trigger this, so I tried using this global jquery version for delaying all links:

$(function(){
    $("a").click(function(evt){
        var link = $(this).attr("href");
        setTimeout(function() {
            window.location.href = link;
        }, 500);
    });
});

Unfortunately this breaks all Webflow interactions.

Does anyone know another way to globally add a delay to all links? Failing that, is there some way that I can integrate it with the CMS, since ideally I want to be able to use the ‘links to: current page’ feature, otherwise it looks like I’ll need a separate CMS collection list for every link in a collection, so that the js trigger can be manually inserted as the URL…

Can you post your published site link?

Sorry but no I can’t, it’s NDA’d client work :disappointed_relieved:

I can make this all work with workarounds I just thought maybe someone has previously found a solution. It’s further compounded by not being able to use the JS within collection pages so looks like absolutely every link is going to have to be managed manually and no CMS page templates… or ditch the transitions.

Take a look at this tutorial. You could use this to render code anywhere.

Wow that’s very interesting, it’s potentially a bit beyond me but I will surely try and give it a go, thank you.

Still kind of hoping to solve it just with something global without breaking everything as then I won’t need to go to such lengths!

@joshuafry I’m sure it’s possible but without seeing the live site it is very difficult to troubleshoot. You could clone the project and remove any of the branding to avoid violating the NDA, but beyond that I’m not sure I can help.

Thank you - OK I think I will probably do that unless I think of something else, I just need to find the time as debranding it is quite difficult. Would really appreciate any help once I get around to it, hopefully later this week.

@joshuafry sure, just let me know

I think I’ve solved how to do a global delay now. I was just missing a ‘prevent default’ line from the jquery:

<script>
    $(function(){
        $("a").click(function(evt){
            evt.preventDefault();
            var link = $(this).attr("href");
            setTimeout(function() {
                window.location.href = link;
            }, 1500);
        });
    });
</script>

For anyone else checking trying to do the same thing:

  • Add this to the footer code in your site settings
  • The ‘1500’ is the number of milliseconds to delay the link by
4 Likes

This implementation worked great so thank you for that.

I am, however seeing a problem with links with the ‘open new tab’ box checked not opening the link in a new tab.

Is there a workaround for this? Hugely appreciated!

1 Like

I’m having the same problem here

Hey there,

So my main man @Jeandcc helped us out with a revised script to allow both new tabs and mail opens:

<script>

$(function() {
$(“a”).click(function(evt) {
evt.preventDefault();
var link = $(this).attr(“href”);
var opensInNewTab = $(this).attr(“target”);
var itsMail = link.includes(“mailto:”);
setTimeout(function() {
if (opensInNewTab || itsMail) {
window.open(link, “_blank”);
return;
} else {
window.location.href = link;
}
}, 1250);
});
});

Hope this helps!

3 Likes

Umm… you rule! Thanks so much @tjthomsonjones & @Jeandcc . :raised_hands:

1 Like

I updated the code so it doesn’t break the behavior of webflow tabs:

$(function() {
  $("a").click(function(evt) {
    const targetLink = $(this).attr("href");

    if (
      $(this).hasClass("w-tab-link") ||
      targetLink == "#" ||
      targetLink.indexOf("/") == -1 ||
      targetLink.indexOf("http") != -1 ||
      trimAnchorLink(targetLink) === window.location.pathname
    )
      return;

    evt.preventDefault();

    var opensInNewTab = $(this).attr("target");
    var itsMail = targetLink.includes("mailto:");
    setTimeout(function() {
      if (opensInNewTab || itsMail) {
        window.open(targetLink, "_blank");
        return;
      } else {
        window.location.href = targetLink;
      }
    }, 500);
  });
});

function trimAnchorLink(link) {
  var index = link.indexOf("#");
  if (index != -1) return link.substring(0, index);
  return false;
}


Keep using this until something else needs to be taken care of. I developed what Tom needed, now if you need something else covered, just post it here and I’ll update the code.

EDIT 1: Disabling delay for in-page links
EDIT 2: Disabling delay for external links

3 Likes

Great work, thanks for improving on this!

1 Like

Hi @jeandoc! Thanks so much for your help on this. I tried implementing in my own project, but for some reason it’s not working. I was wondering if you have any idea why? Here’s the read only link.

Just make the links in Webflow regular links:

For example: This:

image

Should become this
image

There`s no need to use delay in the links