How to have animations when the website opens up?

Hello, GTP,

Thank you for contacting us and for using XStore.

Please provide the URL of your site where elements in the header are added. We will check what can be done to help you.

Kind Regards,
8theme team

Hello, GTP,

Thank you for your response, but we asked you about URL of your site.

In this case, we can provide you with an example, but further customization should be done by you for your site.

Result – https://gyazo.com/da6e5f9935f61fed7450126d5d842ee9 , code snippet added in child-theme/functions.php:

add_action('wp_head', function() { ?>
    <style type="text/css">
        .header-wrapper .et_column {
            opacity: 0;
            transform: translateY(30px)
        }

        .et-preloader-hide .header-wrapper .et_column {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .2s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .2s forwards;

        }

        .et-preloader-hide .header-wrapper .et_column:nth-child(2) {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .4s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .3s forwards
        }

        .et-preloader-hide .header-wrapper .et_column:nth-child(3) {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .5s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .4s forwards
        }

        .et-preloader-hide .header-wrapper .et_column:nth-child(4) {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .6s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .5s forwards
        }

        @keyframes et_header_fade_up {
            0% {
                transform: translateY(30px)
            }

            to {
                transform: translateY(0)
            }
        }

        @keyframes et_header_fade {
            0% {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

    </style>
<?php });

For https://xstore.8theme.com/elementor2/industrial-power-tools/ , the next code can be used:

add_action('wp_head', function() { ?>
    <style type="text/css">
        .header-wrapper .et_element-top-level {
            opacity: 0;
            transform: translateY(30px)
        }

        .et-preloader-hide .header-wrapper .et_b_header-logo.et_element-top-level {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .2s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .2s forwards;

        }

        .et-preloader-hide .header-wrapper .header-secondary-menu.et_element-top-level {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .4s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .3s forwards
        }

        .et-preloader-hide .header-wrapper .et_b_header-search.et_element-top-level {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .5s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .4s forwards
        }

        .et-preloader-hide .header-wrapper .header-html_block4 {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .6s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .5s forwards
        }
        .et-preloader-hide .header-wrapper .header-main-menu2.et_element-top-level {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .7s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .6s forwards
        }
        .et-preloader-hide .header-wrapper .et_b-header-account.et_element-top-level {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .8s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .7s forwards
        }
        .et-preloader-hide .header-wrapper .et_b-header-cart.et_element-top-level {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .9s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .8s forwards
        }

        @keyframes et_header_fade_up {
            0% {
                transform: translateY(30px)
            }

            to {
                transform: translateY(0)
            }
        }

        @keyframes et_header_fade {
            0% {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

    </style>
<?php });

Kind Regards,
8theme team