start gif animation on visible slide - Flexslider
<p>I am building tutorial using Flexslider (woo themes). There are 4 slides and each slide is having an animated gif file. All the slides play their animation at the same time even the hidden ones.</p>

<p>The question is how can I set the slides to play the gif animation only when they are visible?
<pre><code></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-html lang-html prettyprint-override"><code>&lt;div class="flexslider"&gt;
 &lt;ul class="slides"&gt;
    &lt;li&gt; Slide 1 &lt;img src"img/animatedgif1.gif" /&gt;&lt;/li&gt;
    &lt;li&gt; Slide 2 &lt;img src"img/animatedgif2.gif" /&gt; &lt;/li&gt;
    &lt;li&gt; Slide 3 &lt;img src"img/animatedgif3.gif" /&gt;&lt;/li&gt;
    &lt;li&gt; Slide 4 &lt;img src"img/animatedgif4.gif" /&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
</div>
</div>
</p>

<p></pre></code></p>