Estoy tratando de crear un menú de hamburguesas para dispositivos móviles. Seguí un tutorial y todo funcionó bien hasta que llegué a la parte js. Aquí está el código js:

 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();

Básicamente, está activando el menú para que flote desde la derecha y luego cada elemento del menú debería entrar lentamente. El problema es que la animación de los elementos del menú no está allí. Esta es la línea que debería establecer esta animación:

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

Coloco los dos registros de la consola a su alrededor para ver qué sucede y en ambas ocasiones es una cadena vacía. No entiendo por qué es esto. No soy muy bueno en js, así que probablemente sea algo realmente estúpido. Miré esto durante algún tiempo, así que estaría realmente calificado si alguien pudiera ayudarme.