Streaming live at 10am (PST)

Delay page transition for animation to complete


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


Design interaction delay between pages
Time delay on current page before load next page
Recreating Codepen in Webflow
#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);
});

#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.


#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


#9

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