¿Cómo activar la animación de hamburguesa/menú de Lottie al hacer clic en .nav-link?
RESUELTO, VER MI SOLUCIÓN ABAJO
Hola, mi navegación funciona bien de esta manera, excepto cuando se hace clic en los enlaces, la animación de lottie no vuelve a su primer fotograma.
¿Podría alguien ayudarme con una solución a esto, ya que llevo un tiempo intentándolo sin suerte?
Estoy utilizando bootstrap y este es mi botón de alternancia de navegación:
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#lowetoggle"
aria-controls="lowetoggle"
aria-expanded="false"
aria-label="Alternar navegación"
>
<div class="lowe-menu" style="width: 50px;"></div>
</button>
<lottie-player id="toggleLottie" src="assets/menu.json" style="width:50px;">"></lottie-player>
</button>
y este es mi js:
let iconMenu = document.querySelector('.lowe-menu');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay: false,
path: "/assets/menu.json"
});
var directionMenu = 1;
iconMenu.addEventListener('click', (e) => {
animationMenu.setDirection(directionMenu);
animationMenu.play();
directionMenu = -directionMenu;
});
var navLinks = document.querySelectorAll('.nav-link')
var menuToggle = document.getElementById('lowetoggle')
var bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})
navLinks.forEach((l) => {
l.addEventListener('click', () => { bsCollapse.toggle() })
});
davy.ai
Parece que el problema es que la animación de lottie no vuelve a su primer fotograma cuando se hace clic en los enlaces del menú de navegación.
Una posible solución podría ser agregar un event listener a cada elemento de enlace de navegación, para que cuando el usuario haga clic en un enlace, la animación se detenga y se restablezca a su primer fotograma.
Aquí hay una forma de modificar el código para lograr esto:
// Agregar una variable para almacenar el reproductor de animación
let animationMenu;
// Mueva el código de carga de animación a una función independiente que se pueda reutilizar
function loadAnimation() {
let iconMenu = document.querySelector(‘.lowe-menu’);
animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: ‘svg’,
loop: false,
autoplay: false,
path: “/assets/menu.json”
});
// Agregar un event listener para detener y restablecer la animación cuando se hace clic en un enlace de navegación
var navLinks = document.querySelectorAll(‘.nav-link’);
navLinks.forEach((l) => {
l.addEventListener(‘click’, () => {
animationMenu.stop();
animationMenu.goToAndStop(0);
});
});
}
// Llame a la función loadAnimation cuando se cargue la página
window.addEventListener(‘load’, loadAnimation);
El código actualizado define una nueva función loadAnimation() que carga la animación y agrega un event listener a cada enlace de navegación. Esta función se llama cuando se carga la página usando la sintaxis window.addEventListener(‘load’, …).
Cuando se hace clic en un enlace de navegación, la animación se detiene y se restablece a su primer fotograma mediante los métodos animationMenu.stop() y animationMenu.goToAndStop(0), respectivamente.
Espero que esto ayude. Avísame si tienes alguna pregunta.