Page Transition error

Hi lovely people,

I’m currently working on a website and have followed a tutorial (Perfect Page Transitions in Webflow (2021) - YouTube) in order to create a page transition.

Having followed every step closely (except for the Lottie element), I am experiencing an issue whereby although I have given the transition a high z-index to ensure it appears on top, there are some occasions where buttons beneath this layer are appearing on top of this.

Unsure if this is a timing-related issue, but if anybody is able to help me resolve the issue, it’d be greatly appreciated!

Many thanks,

Tom


Here is my site Read-Only: Webflow - Wildpark Entertainment

Hi everyone, just bumping this up in the hope someone can help resolve :slight_smile:

Hey,
I just implemented a page transition on my site so I think I can help you. Could you please share a read only link? Without it its kinda hard to help :sweat_smile:

Hey Tim, thank you - I did pop the link at the end of my first post: Webflow - Wildpark Entertainment

Oops did not see it it - thanks!

1 Like

I believe it has to do with the custom code, since this also cause me some problems. Try to move them from the project settings to the body of the page or so, or try a more simple delay like this.
Every link needs to have the class delay in this example for it to work, it delays the link loading by 1500ms or 1,5s for that sake.

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

Hi tmbrnr, thanks so much for your help here - it looks as though delaying the links has worked a treat!