Load sidebar template just once to prevent multiple animations

Question

I have a home template with a header, footer and a left sidebar.

<?php get_header(); ?>
<div class="content">
    <?php get_sidebar('left'); ?>
    <div class="middlebar">
        this is the main content
    </div>
</div>
<?php get_footer(); ?>

After a click on one of the multiple options of the menu, the page template is loaded which has an additional right sidebar.

<?php get_header(); ?>
<div class="content">
    <?php get_sidebar('left'); ?>

    <div class="middlebar">
        pagecontent
    </div>
    <?php get_sidebar('right'); ?>
</div>

<?php get_footer(); ?>

I animated this sidebar, that it slides in after the page is loaded.

jQuery(window).ready(function($){
    $("#sidebarRight").animate({right: '0px'});
});

My problem now is that the animation is played on every click on one of the menu points. So after a click on a link, the sidebar disappears only to reappear again. I want that the animation is just played once when the user leaves the home template and enters the page template (by clicking one of the menu points) and not during switching between the different pages.

My first idea was to change the middlebar div with every click. So that not the whole page template is reloaded but just the new content is loaded and inserted in the div. A positive side effect would be that fewer data has to be loaded, but I was not able to prevent the multiple loading of the sidebar.

I also tried to set cookies, but that worked neither.

How can I load the sidebar only at the first click, so that the animation is also played just once.

Answer 1

you can write the script with a conditions

<?php is_front_page(){ ?>
<script>
jQuery(window).ready(function($){
    $("#sidebarRight").animate({right: '0px'});
});
</script>
<?php } ?>

alternatively you can set the cookie or localstorage that the animation has been completed

<script>
    if(!localStorage.getItem("animated")){ // check if the animated is set if not set do the animation
       jQuery(window).ready(function($){
        jQuery("#sidebarRight").animate({right: '0px'});
        localStorage.setItem("animated", "yes"); // after comleting the animation set the animated so that animation does not happen again
    });
}
    </script>

Answer 2

If you want a site that have a "state", you will need to develop the theme to produce a sort of "One Page Application" in which the browser basically never reload pages, but is doing all updates via AJAX.

Anything else means a full reload of the page and in that case the page will "blink" in any case so not sure of the value of eliminating the animation, but you can use a session cookie to keep a value indicating that the animation was done and check it before doing it again.