Streaming live at 10am (PST)

Javascript delay on page links


#1

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?


Creating Page Transitions in WebFlow
#2

See http://stackoverflow.com/q/5411538/584192

Put it in the page header code field and change the URL and number of seconds.


#3

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 :slight_smile:

The problem here is that im not sure how to call the function using onClick or similar.


#4

Anyone have a solution for this? Would love to do this! :slight_smile:


Is it possible to take user to another page at end of animation?
#5

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.


#6

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!! :smiley:


#7

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.


#8

I’m experiencing the same issue… JS setTimeout delay works but the Interactions 2.0 mouse click transitions aren’t firing for some reason…


#9

Hi effixx, did you manage to get a solution for this? I am running into the same problem!


#10

Nope, no solution yet :frowning:


#11

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.


#12

@effixx

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:

pagedelay

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.


#13

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.


#14

Highlight and click the code format button in the richtext editor, or add an additional 4 spaces before each line of code.