再生・逆再生を使った
ハンバーガーメニュー

<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>

.lottie {
  display: block;
  width: 150px;
  height: 150px;
  border: 1px solid black;
}
#navigation[aria-hidden="true"] {
  visibility: hidden;
}

const animation = lottie.loadAnimation({
  container: document.querySelector('.lottie'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'https://assets6.lottiefiles.com/temp/lf20_bEvT9N.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());
});