Animation on scaling down to mobile

Question

I have made a responsive navbar and have added an animation to be played when ".nav-toggle" is clicked for the mobile size of the navbar.

When I am scaling down my browser window, for a split second at screen size 768px you can see the animation playing in reverse. The animation I am asking about is the "transform: scale(1, 0);".

How do I get the animation to not play when the user is scaling down the window size from desktop to mobile? Again, the animation in question occurs when you get to 768px, it animates in reverse for like a second then it works normally.

Thank you for your help!!

const mainNav = document.querySelector('.main-nav');
const navToggle = document.querySelector('.nav-toggle');
const navLinks = document.querySelectorAll('.main-nav li');

navToggle.addEventListener('click', function () {
    mainNav.classList.toggle('main-nav-active');

    navLinks.forEach((links, index) => {
        if (links.style.animation) {
            links.style.animation = '';
        } else {
            links.style.animation = `navLinksFade .3s ease forwards ${index / 10 + .2}s`
        };
    });
});

:root {
    --clr-primary-200: #f3eed9;
    --clr-primary-400: #824936;


    --clr-neutral-100: #FFF;
    --clr-neutral-900: #222c2a;

    --ff-primary: 'Roboto', sans-serif;
    --ff-accent: 'Playfair Display SC', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--ff-primary);
    font-size: 1.3175;
}

.navbar {
    background-color: var(--clr-neutral-900);
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 10vh;
}

.logo {
    color: var(--clr-neutral-100);
    text-decoration: none;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.main-nav {
    display: flex;
    width: 60%;
    justify-content: space-around;
}

.main-nav li {
    list-style: none;
}

.nav-links {
    text-decoration: none;
    color: var(--clr-neutral-100);
    font-size: 1.4rem;
}

.nav-toggle {
    color: var(--clr-neutral-100);
    font-size: 2rem;
    display: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .main-nav {
        position: absolute;
        background-color: var(--clr-neutral-900);
        top: 10vh;
        width: 100%;
        height: 40%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
        transform: scale(1, 0);
        transform-origin: top;
        transition: all 200ms ease-in;
    }

    .main-nav li {
        opacity: 0;
    }

    .logo {
        margin-right: auto;
        margin-left: 2rem;
    }

    .nav-toggle {
        display: block;
        margin-right: 2rem;
    }

    .main-nav-active {
        transform: scale(1, 1);
    }
}

@keyframes navLinksFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

Animation on scaling down to mobile

0 Answers