Streaming live at 10am (PST)

Page transition issues with custom code

Hi,

So I’ve got this custom code added to the project in order to create some fun transition animations.
This is the code:

    <script>
function delay (URL) {
console.log(URL);
console.log(window.location);
setTimeout( function() { window.location = URL }, 1500 );
}
</script>

What it does is essentially delaying the effect of a button (going to another page), so the transition animation can play on the current page before moving to the next one.

The transitions works by having the nav buttons go to this url: `javascript:delay(’/Pageslug’) instead of having the button go to a page.

So far this works great, except it has a few weird side effects:

  • Using the back button breaks the site transitions and the animation freezes. (firefox and safari)
  • Right clicking a button and opening it as a new tab doesn’t work and gives this url: about:blank#blocked (in chrome. In safari the option isn’t even there)
  • We’re also looking if it’s possible to create a ‘current page’ indicator, but haven’t found a way yet

Any ideas how we could fix this?
Thanks!

Here is my public share link: Sharelink

Published website link

You shouldn’t be using javascript:delay('/Pageslug') in your href attribute, since that breaks normal fallback browser behaviour. You can always perform the delay by catching the click event using an event handler, so that if JavaScript is disabled by the user’s browser for any reason, or if the user clicks on the link any other way they can still reach the destination page.

Sam