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.

Did you forget to use backticks ( ` ) when you set the link.style.animation. To use template literal it must use backticks — Kyle DePace
– Kyle DePace, Commented Dec 27, 2021 at 17:41
` navLinkFade 0.5s ease forwards ${index / 7 + 0.3} ` like this — Ricardo de Paula
– Ricardo de Paula, Commented Dec 27, 2021 at 18:04

sandeep.kgp · Accepted Answer · 2021-12-27 18:18:04Z

1

change link.style.animation to this:

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

answered Dec 27, 2021 at 18:18

sandeep.kgp

8865 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tobias Over a year ago

Thanks, that did it. May I ask what the syntactic difference is?

sandeep.kgp Over a year ago

This provides the best explanation : developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Setting style animation with javascript not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related