Page transition

Themes
1

Hello all, I’m trying to set up some custom page transitions for my theme however something isn’t working properly, here’s my code:

window.onload = () => {
  const anchors = document.querySelectorAll('a');
  let loader = document.querySelector(".loader");

  setTimeout(() => {
    console.log("works");
    loader.classList.remove("loader-active")
  }, 500);

  for (let i = 0; i < anchors.length; i++) {
  const anchor = anchors[i];

anchor.addEventListener('click', e => {
  e.preventDefault();
  let target = e.target.href;

  console.log(target);
  loader.classList.add("loader-active")

  setInterval(() => {
    window.location.href = target;
  }, 500);
})
  }
}

So when it comes to navigation, {{navigation}} or even when I have static links like <a href="{{@site.url}}">Site name</a> the transitions work, but when I have dynamic routes like:

{{#foreach posts}}
<li>
  <a href="{{url}}">
    <h2>{{title}}</h2>
    <span>{{date published_at format="YYYY"}}</span>
  </a>
</li>
{{/foreach}}

I get an undefined url back, any idea what that happens?

Thanks,
Kaique

2

here target variable get undefined value, for that showing error, replace this code to

let target = anchor.href;

I hope now it will work perfectly.

3

It does Rubel, you’re an angel! :raised_hands: