再生・逆再生を使ったハンバーガーメニュー（失敗例）

HTML

<button type="button" class="hamburger" aria-controls="navigation" aria-expanded="false">
  <span class="lottie"></span>
</button>

<nav id="navigation" aria-hidden="true">
  <ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</nav>

CSS

#navigation[aria-hidden="true"] {
  visibility: hidden;
}

JavaScript

const animation = lottie.loadAnimation({
  container: document.querySelector('.lottie'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: './hamburger.json'
});

const hamburger = document.querySelector(".hamburger");
const nav = document.querySelector("#navigation");

hamburger.addEventListener('click', ()=>{
  const expanded = hamburger.getAttribute('aria-expanded') === "false";
  if(expanded) {
    animation.setDirection(1);
  }else {
    animation.setDirection(-1);
  }
  animation.play();
    
  nav.setAttribute('aria-hidden', (!expanded).toString());
  hamburger.setAttribute('aria-expanded', expanded.toString());
});