<div>
  <div class="h2 bold vhs-flicker js-demo">.vhs-flicker</div>
</div>

<div>
  <div class="vhs-right js-demo">.vhs-right</div>
</div>

<div>
  <div class="vhs-pop js-demo">.vhs-pop</div>
</div>

<button>restart</button>
body {
  overlow-x: hidden;
  > div {
    text-align: center;
    font-family: system-ui;
    font-weight: bold;
    padding: 1rem;
  }
}
const button = document.querySelector("button");
button.addEventListener("click", e => {
  const demoEls = document.querySelectorAll(".js-demo");
  demoEls.forEach(el => {
    const classes = [...el.classList];
    el.classList.remove(...el.classList);
    setTimeout(() => {
      el.classList.add(...classes);
    }, 10);
  })
});

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/vhs.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.