How should I make my site transition smoothly between html pages?

Question:
How should I make my site transition smoothly between html pages?

1 Like

I would do a simple fade out, fade in. You can do this by checking if the document.referrer starts with the domain of your site. If it does, it means that the user just clicked a link from another one of your pages. So then you can use @keyframes in CSS to make a simple opacity fade on the HTML or body element. To make links fade out, you can use the click event on every link in document.querySelectorAll("a"), and prevent the default action (i.e. going to the link), so that you can play the animation. Then, apply a class that has animation set to your fade out animation, to the html or body element. Then, you can finally go location.href = theLink.href, with theLink being the reference to the link. Here’s some scrappy example code for fading out of the old page and directing to the next one:

Array.from(document.querySelectorAll("a")).forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault()
        link.classList.add("fadeOutAnimClass")
        link.addEventListener("animationend", () => {
            location.href = link.href
        })
    })
})

And here’s some scrappy code to put on every page that will fade into the page contents, if it just came from a fade out:

if (document.referrer.toLowerCase().startsWith("https://coolwebsite.redcoder.repl.co")) {
    document.body.classList.add("fadeIntoContents") // or document.documentElement, depending on if you fade the body element or HTML element
    document.body.addEventListener("animationend", () => {
        document.body.style.opacity="1"
        document.body.classList.remove("fadeIntoContents") // I just do these two lines so the animation doesn't end and fade back out.
    })
}

Both of those pieces of code should be applied to every page. If you need more clarification, please let me know!

2 Likes

I already figured out how to do the fade out when a link is pressed, but how do I make it so that a page fades in when it loads?

2 Likes

That second block of code should do the trick, as well as adding this to your CSS:

body {
  opacity: 0;
}
.fadeIntoContents {
  animation: fadeInto 0.2s ease;
}
@keyframes fadeInto {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

And to note, I guess I messed up in my last post. Make sure it is document.body.style.opacity rather than document.body.opacity, since CSS properties are not direct properties of Elements

5 Likes

No luck :frowning:

2 Likes

Can you link your project or a side-JSFiddle of the page?

1 Like

@boston2029 The link to the repl is: Austinf.me

1 Like

Looks like you have it working fine…?

Just checked again, seems to be working. It sometimes doesn’t play the animation, but it’s so inconsistent (like 1 out of 20 times) that I’ll let it slide.

1 Like

I was able to fix what I believe is every other issue. To update it, first make the CSS code this:

/* Fade in */
body {
  opacity: 0;
}
.fadeIntoContents {
  animation: fadeInto 0.5s ease;
}
@keyframes fadeInto {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeOut {
  animation: fadeOut 0.5s ease;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

js/script.js should be this:

window.transitionToPage = function(href) {
    document.querySelector('body').classList.add("fadeOut")
    document.querySelector('body').addEventListener("animationend", () => {
      document.body.style.opacity="0"
      location.href=href
    })
}

And then the codeblock inside of base.html should be this:

if (document.referrer.toLowerCase().startsWith("https://austinfme.redcoder.repl.co")) {
  document.body.classList.add("fadeIntoContents") // or document.documentElement, depending on if you fade the body element or HTML element
  document.body.addEventListener("animationend", () => {
      document.body.style.opacity="1"
      document.body.classList.remove("fadeIntoContents") // I just do these two lines so the animation doesn't end and fade back out.
  })
} else {
  document.body.style.opacity = 1
}

You can adjust the fade speed by changing the 0.5s (one half second) both times in the CSS.

3 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.