[Resolved] Fade Out as well as Fade In pages

Home Forums Support Fade Out as well as Fade In pages

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1498991
    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

    #1499029
    Elvin
    Customer Support

    Hi,

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

    A wise man once said:
    "Have you cleared your cache?"

    #1500920
    Sunny

    Thanks, will give this a go and report back!

    #1500990
    Elvin
    Customer Support

    No problem.

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

    A wise man once said:
    "Have you cleared your cache?"

    #1501070
    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;
    }
    #1501106
    David
    Staff
    Customer Support

    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

    #1501112
    Sunny

    That makes sense, thank you for your help!

    #1501134
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.