Delay click page transition

Design help Custom code
1

Hi All,

I’m applying this method to delay a page transition in a collection link:

<script> $('.pagetransition').click(function(e) { e.preventDefault(); var linkUrl = $(this).attr('href'); setTimeout(function(url) { window.location = url; }, 3000, linkUrl); }); </script>

[View only link]

The delay seems to work. But the link gets wrong as I receive a 404 page.

Any help would be very appreciated.

Thanks,

Alejo

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

2

Hi Alejo,

To resolve the 404 errors with your Collection page links, you can use Webflow’s native linking functionality. Here’s how to properly link your Collection pages:

  1. Add a link element to your Collection list
  2. Click the gear icon (:gear:) to open the Element Settings Panel
  3. Look for the Collection page link option (marked in purple)
  4. Select “Current Item” from the dropdown menu

This will ensure each item in your Collection list links to its corresponding detail page. You can learn more about structuring and styling Collection pages in our University guide.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

4

Just to clarify, if someone still wants to use a custom script for transition effects, is there a recommended way to preserve the correct link behavior for Collection items? I’ve seen a few people run into 404s when mixing custom JS with dynamic links, so just wondering if there’s a best practice to avoid that while keeping the animation.

5

There is nothing special about collection page links, and they are rendered directly into the HTML- no special JS routing or anything involved.

I’d need a specific example of what you’re doing, but in general it’s pretty simple; get the link, trap the click, perform your animation and then navigate.

I generally target the links in one of three ways;

  1. If it’s a single link, just ID it and attach your script that way
  2. If it’s multiple links, a custom attribute is an easy way to identify them
  3. If it’s all links on the page, you can just target all links however that gets more complex as you probably need to filter out links to other sites, mailto: and tel: links, and target=_blank links