Fade Out as well as Fade In pages

Hi,

You can try this out:
https://christopheraue.net/design/fading-pages-on-load-and-unload

Thanks, will give this a go and report back!

No problem.

Though, If I may suggest, adding something like a exit-intent even if its just an animation is bad user experience.

Agreed, this is something i'll only be using on the very aesthetically driven over functionally driven experiences

I've managed to get it working great! One question I have is I'm currently using two elements, both generate_before_header. Not sure why its not working when they are together in the same element, could you help figure out what I'm missing?

I've also included the CSS code at the bottom for those who are looking to do the same thing

Element 1:

<svg id="fader"></svg>
        <script>
            fadeInPage();
        </script>

Element 2:

<script>
function fadeInPage() {
    if (!window.AnimationEvent) { return; }
    var fader = document.getElementById('fader');
    fader.classList.add('fade-out');
}

document.addEventListener('DOMContentLoaded', function() {
 if (!window.AnimationEvent) { return; }
    var anchors = document.getElementsByTagName('a');
    
    for (var idx=0; idx<anchors.length; idx+=1) {
        if (anchors[idx].hostname !== window.location.hostname ||
            anchors[idx].pathname === window.location.pathname) {
            continue;
        }
        anchors[idx].addEventListener('click', function(event) {
            var fader = document.getElementById('fader'),
                anchor = event.currentTarget;
            
            var listener = function() {
                window.location = anchor.href;
                fader.removeEventListener('animationend', listener);
            };
            fader.addEventListener('animationend', listener);
            
            event.preventDefault();
            fader.classList.add('fade-in');
        });
    }
});
window.addEventListener('pageshow', function (event) {
  if (!event.persisted) {
    return;
  }
  var fader = document.getElementById('fader');
  fader.classList.remove('fade-in');
});
</script>

CSS Code

#fader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
pointer-events: none;
background: #000000;
animation-duration: 300ms;
    animation-timing-function: ease-in-out;
}

@keyframes fade-out {
    from { opacity: 1 }
      to { opacity: 0 }
}

@keyframes fade-in {
    from { opacity: 0 }
      to { opacity: 1 }
}

#fader.fade-out {
    opacity: 0;
    animation-name: fade-out;
}

#fader.fade-in {
    opacity: 1;
    animation-name: fade-in;
}

Hi there,

you will need to make sure your Script is executed after the HTML is loaded.
Either set your Element 2 containing your scripts to a higher priority. Or move it to a hook further down the page - generally you add scripts in the footer: wp_footer

That makes sense, thank you for your help!

You're welcome