Setting style animation with javascript not working

Question

I am trying to create a burgermenu for mobile devices. I followed a tutorial and everything worked well until i get to the js part. Here is the js code:

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
    
    burger.addEventListener('click', () => {
        //toggle nav
        nav.classList.toggle('nav-active');

        //Animate links
        navLinks.forEach((link, index) => {
            if(link.style.animation)
            {
                link.style.animation = '';
            }
            else
            {
                console.log(link.style.animation);
                link.style.animation = 'navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s';
                console.log(link.style.animation);
            }
        });
    });


};

navSlide();

Basicly it is activating the menu to float in from the right and then each menu item should ease in. The problem is the animation for the menu items is not there. This is the line which should set this animation:

link.style.animation = 'navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s';

I put the two console logs around it to see what happens and both times it is an empty string. I do not understand why this is. I am not very good at js so probably it is something really stupid. I looked at this for some time now so i would be really gradefull if someone could help me.

Answer 1

change link.style.animation to this:

link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}`;