Hi!
I’m new to Webflow and are trying to figure out how to implement JavaScript to my page. I want to delay a page load for animation to finish and then load a sub page using this custom code
<script type="text/javascript">
function delay (URL) {
setTimeout( function() { window.location = URL }, 5000 );
}
</script>
How in the world do I call my function?
See Redirect from an HTML page - Stack Overflow
Put it in the page header code field and change the URL and number of seconds.
yeah thats great for the page to auto redirect. What im looking for is to call a function redirecting the user to a sub page. In that function im putting the delay so that the animation can finish. Its sort of a out animation before moving on 
The problem here is that im not sure how to call the function using onClick or similar.
Anyone have a solution for this? Would love to do this!
Oh I see. Then you will need to replace with this custom code:
<script>
$('.link-classname').click(function(e) {
e.preventDefault();
setTimeout(function(url) { window.location = url }, 5000, this.href);
});
</script>
Replace link-classname with the class of your link/button, and change 5000 to number of milliseconds.
Hey!
I am looking to do this too, and I really am a JS nuthead.
I added the code to the header. I modified the button-class-name… All is good.
Then I gave a button the same name class (In Webflows “Selector” input area, right?
But no delay seems to take place…
Any help would be loved and appreciated!! 
Hi Sam,
I tried using your custom code.
The delay does work. However, the code seems to also freeze my transition/animation.
I’m currently using it with the 2.0 Interactions, so I’m not sure if that’s the issue.
I’m experiencing the same issue… JS setTimeout delay works but the Interactions 2.0 mouse click transitions aren’t firing for some reason…
Hi effixx, did you manage to get a solution for this? I am running into the same problem!
Nope, no solution yet 
Came across this on Smashing Magazine, I am not a developer but it seems to call the HTML from another page onto the page you are on using, while at the same time changing the URL, from the users perspective you are on the next page. Then you can use the animation transitions from one HTML container to another on the same page.
No idea how it impacts on SEO though!
There must be an easier way to do this though.
The code we are using seems to delay the animation and the page transition? I wonder is it possible to add custom code to trigger the animation, then trigger the page transition once the animation is finished.
Sam just sorted this out for me on another thread, this code works for me on desktop at least, haven’t tested on mobile but I am hoping it is fine:
I can’t seem to add code snippets to these posts so attached as an image, do you know how to add code to these posts? I am sure I am missing something simple.
Oh beautiful, can’t wait to test it out! I’ve seen code snippets elsewhere
on the forum, I’m positive there’s a way.
Highlight and click the code format button in the richtext editor, or add an additional 4 spaces before each line of code.
thank you Samliew 
Hey, I have that working thank you!
But I am wondering if it is it possible to just have a generic page delay that isn’t associated with a particular class. ie. if any link within the site is clicked and goes to another page on the site - that there will be a delay - enough for my outro animations to do their thing
It will save me putting in every class name if so, but otherwise this has been working for me thanks!
I found this link recently. Pretty neat:
https://webflow.com/blog/how-to-build-page-transitions-in-webflow
Thanks a lot everyone for helpful links and ideas!
I needed to delay the link opening to allow the sound fade out transition and then open it in a new tab. I spent 4 hours trying to use the window.open(URL, “_blank”) and replacing the target link inside a timeout function and then it turned out to be a popup which was getting blocked on Safari
Then I realized that instead of trying to replace an existing link I can use a non link element as a trigger and use the timeout function with window open. 
<script>
var $video_player_desktop = $('#player');
$("#tumblink").on('click', function(){
$video_player_desktop.animate({ volume: 0 }, 350);
setTimeout(function(){
window.open("https://.......","_blank");
},500);
});
$(window).focus(function() {
$video_player_desktop.animate({ volume: 0.9 }, 350);
});
</script>