Delay page transition for animation to complete

Design help Custom code
1

Hi, with some help from other users I am nearly there with this. I want to click a link but delay the page transition until an animation finished.

This code from @samliew is almost there, it delays the transition and goes to the page correctly but it also stops the animation from happening.

download

Here is my test link with the above code added to Custom code in the footer, as you will see the link delays for 3 seconds before taking the user to the next page, but it stops the animation changing the background colour of the body.

https://preview.webflow.com/preview/jsd-test?preview=427c8cb9261e1a8016ae0accc11dff7a

PS: How do you add a code snippet to a post comment? :blush:

1 Like
2

You’ll want to use preventDefault instead:

$('.pagetransition').click(function(e) {
  e.preventDefault();
  var linkUrl = $(this).attr('href');
  setTimeout(function(url) { window.location = url; }, 3000, linkUrl);
});
5 Likes
3

Whoop! That works perfectly. Thanks for your assistance Sam, much appreciated! (On desktop anyway, will check on mobile etc)

4

Hey

I wonder if it is possible to create a delay between each page loading.

So click on a button - then do something like fade out a element on a page, wait a second or two then open a new page.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

5

Read above.

1 Like
6

Thank you Vincent sir

7

Hey John, can you show me this on your site? What was the final code? How did you implement on the button? Struggling here…:frowning: thanks in advance for any help you can give

8

Hi, its a bit tricky alright.

Check that you have the code in the footer and that your link div includes the class to call the code, in my case .pagetransition. When the link is clicked it pauses for the specified time before moving to the next page.

On my site (link below, for future readers link will probably not remain active), scroll down on home page and click one of the portfolio items, a div grows from the right hand side to fill the screen before taking the user to a new page with the same colour background so the movement ultimately will feel like the page has grown out of the click! I hope! Not finished yet.

Note that you cannot see custom code effects in the webflow preview mode, you need to publish the site and look at it in a browser.

https://preview.webflow.com/preview/john-sherwin-website?preview=3e416d6c4e134624974607feaf02fe2e

You can see the published site at http://john-sherwin-website.webflow.io/
I don’t think you can publish from a read only link.

Hope that is of some help, feel free to come back to me with questions.

John

2 Likes
9

Thanks will give it a go. Appreciate your prompt reply :slight_smile:

10

Hi all! Thank you so much for all the helpful info here.

I’ve put the code in my footer, and I’ve given the button the .pagetransition class name. But I don’t think it’s working because I’m using a mailto: link.

As you can see, in the ‘WriteSection’ - I’ve got a little ‘loading bar’ which I’ve got the interactions/animation down-pat (I think) but once you click the ‘contact button’ - the animation doesn’t play and the mailto link doesn’t work. But the 3 second delay does work!

Here’s the read-only link to the website:
https://preview.webflow.com/preview/blurbster?utm_medium=preview_link&utm_source=designer&utm_content=blurbster&preview=960cf52036b0b5b8a9ac7354116b24fd&workflow=preview

Here’s the code that I’ve put in the footer:

$(‘.pagetransition’).click(function() {
var linkURL = $(this).attr(‘href’);
setTimeout(function(url) { window.location = url; }, 3000, linkURL);
return false;
});

Screen Shot 2022-12-14 at 9.54.05 pm
Screen Shot 2022-12-14 at 9.54.05 pm1410×534 51.8 KB

Tagging @samliew and @johnsherwin because you both seem to know a lot about this!
Let me know if you need any more information! I’m a bit of Webflow newbie.