[Resolved] Fade Out as well as Fade In pages

[Sunny]

Hi all, incredibly happy GP customer here and the documentation and support forums have saved me many a time!

I’m looking to have pages on a few sites i have transition. There is already topic on fading a page in and that solution works a treat (https://generatepress.com/forums/topic/fade-in-on-page-load/)

What i am looking for some help on is how to get a page to Fade Out when a user navigates to another page on the site, to create a quick seamless transition

[Elvin]

Hi,

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

[Sunny]

Thanks, will give this a go and report back!

[Elvin]

No problem.

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

[Sunny]

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;
}

[David]

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

[Sunny]

That makes sense, thank you for your help!

[David]

You’re welcome

[Author]

Posts