Streaming live at 10am (PST)

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
1 Like