title: How to fix glitches in Lottie Animation Json Video on hover
body: <p>I have developed a concept of having a JSON video of Lottie's animation on the first place of the slider and some CTA there once when I am hovering the flickering is coming on Chrome, and Firefox continuously.</p>
  <pre><code>&lt;lottie-player class=&quot;lottie-video&quot; src='dummy.json' background=&quot;transparent&quot; speed=&quot;1&quot;  loop  autoplay&gt;&lt;/lottie-player&gt;
  </code></pre>
  <p>Used CDN to Load the Lottie Player</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener("DOMContentLoaded", () =&gt; {
      const UL=document.querySelectorAll(".list li");
      const video =document.querySelectorAll(".list li video");
             UL.forEach(li =&gt;{
              li.addEventListener('mouseover',function(e){
                  e.preventDefault();
                  UL.forEach(l=&gt;l.classList.remove('active'));
                  this.classList.add('active');
                  if(li.classList.contains("active")){
                      let src=li.children[2];
                       if(src.classList.contains('video')){
                         document.getElementById('banner').innerHTML=`&lt;lottie-player class="lottie-video" src='dummy.json' background="transparent"
                             speed="1"  loop  autoplay&gt;&lt;/lottie-player&gt; `;
                       }else if(src.classList.contains('img1')){
                          document.getElementById('banner').innerHTML=`&lt;img src=\"sample.jpg"\ /&gt;`;
                       }else if(src.classList.contains('img2')){
                          document.getElementById('banner').innerHTML=`&lt;img src=\"sample.jpg"\ /&gt;`;
                       }
                  }
              })
            });
      });</code></pre>
  </div>
  </div>
  </p>
  <p>I tried adding rendering SVG and canvas but still had the same issue.</p>
  <p>Video for reference:
  <a href="https://www.veed.io/view/4089f05f-b3ef-41bc-8fd3-6c6f0c8f0842" rel="nofollow noreferrer">https://www.veed.io/view/4089f05f-b3ef-41bc-8fd3-6c6f0c8f0842</a>
  <a href="https://www.veed.io/view/4089f05f-b3ef-41bc-8fd3-6c6f0c8f0842?sharingWidget=true" rel="nofollow noreferrer">https://www.veed.io/view/4089f05f-b3ef-41bc-8fd3-6c6f0c8f0842?sharingWidget=true</a></p>