Use JavaScript to animate only once

Question

I created an SVG which you see below, inside there is a css animation. I have a jQuery animation used to add a class to the logo wrapper. So by default the logo is 100vh/vw (as you see in the external css) and then js adds a class to the logo-wrapper img tag that scales the svg down (as you see in the external css).

I want to have this only happen once during a users session, after the cache is cleared it would happen again, but i want to make the logo appear big like that only one time for when a user is browsing the site, instead of whenever they click another page.

this is probably confusing to you but all i am trying to do is make the logo animate on the first visit of the page, then if they click another page it wont animate, im not sure how to use js really so does anyone have any recommendations with how I can make the logo appear 100vh/vw onload and scale down after the animation, then stay that way for the user (unless the cache was cleared)

/* EXTERNAL STYLE */
#Logo .logo img {
        -webkit-transition:all .8s;
        transition:all .8s;
        -webkit-transition-delay: 2s;
        transition-delay: 2s;
        width: 100vw;
        height: 100vh;
    }
    #Logo .logo img.logo-loaded-scale-down {
        height: 53px;
        width: 53px;
    }

/* EXTERNAL JS */
jQuery(document).ready(function() {
    jQuery('.logo-wrapper').addClass('logo-loaded-scale-down');
});

<!-- THE SVG -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">

    <style type="text/css">
        .hmLineLogo{fill:none;stroke:#BF8442;stroke-width:15;stroke-miterlimit:20;stroke-linejoin:round;}

    <defs>
        <style>
            .hmLineLogo {
                stroke-dasharray: 3000;
                stroke-dashoffset: 0;
                -webkit-animation: dash 4s linear forwards;
                -moz-animation: dash 4s linear forwards;
                -o-animation: dash 4s linear forwards;
                animation: dash 4s linear forwards;
            }

            @keyframes dash {
                from {
                    stroke-dashoffset: 3000;
                }
                to {
                    stroke-dashoffset: 0;
                }
            }

            @-webkit-keyframes dash {
                from {
                    stroke-dashoffset: 3000;
                }
                to {
                    stroke-dashoffset: 0;
                }
            }
        </style>
    </defs>
    </style>

    <g>
        <path class="hmLineLogo" d="M515.4,281.1
            c74.1,8.5,41.4,55.9-20.4,76.1c41-60.5,8.8-44.9-80.9-70.9C566.2,236,565.6,173,557.6,125c-14.3-27.8-36.7-50.7-20.4-73.4
            c11.1,5.7,30.5,24.8,35.8,34.5c32.5,5.2,53.9,35.6,105.3,61.8c0.8,2.8-1.1,16-14.4,21.3c-17,6.7-36.9-5.8-55.5,12.8
            c-12.1,12.1-14.3,35.1-25.1,49.8C565.5,256.1,537.6,271.2,515.4,281.1z"/>
        <path class="hmLineLogo" d="M527.3,158.7
            c0,6.5-10.4,57.2-81.9,80c-30.4,8.2-62.1,7.9-99.1-6.9c93.2,99.2-1.5,131.5-32.3,199.9c-7.6,20.5,9.9,57.6,10.1,77
            c0.1,13.6-10.7,36.9-37.2,39.9c0.8-6.2,6-37.3,3.7-49.5c-2.6-13.8-15.8-34.1-18.5-52.8c-4.6-33.2,32-68.7,37.2-93.3
            c1.9-9-4.1-20.6-12.8-34.5c-9.1-14.4-22.1-26.5-23.4-26.1c-6.8,3.5-17.2,26.4-20.8,36.2c-11.7,31.9-30.8,99.1-52.5,125.3
            c-15.8,19.1-55.8,38-95.4,26.7c35.5,0,69.5-26.6,78.5-47.7c22.9-53.6,10.8-143.9,75.6-220.6c74.6-79.8,149.7-44.1,213.5-41.9
            C504.4,171.5,526.8,159.1,527.3,158.7z"/>
    </g>
</svg>

Answer 1 · 2017-11-03T20:07:34Z

November 3, 2017 8:07pm

Maybe apply an ID or another class specifically for the logo in your home page html, and omit that in the other pages? Then use that ID or specific class for the JQuery animation.

Welcome to the Treehouse Community

Looking to learn something new?

Evan Fraser

Evan Fraser

Use JavaScript to animate only once

1 Answer

Valeshan Naidoo

Valeshan Naidoo

Evan Fraser

Evan Fraser

Valeshan Naidoo

Valeshan Naidoo