FadeinLeft Image scroll Waypoint
<p>I have tried different websites even tried to decode waypoint guide but no luck. I can't seem to get scroll function to work with following code. (reference: <a href="http://blog.robamador.com/using-animate-css-jquery-waypoints/" rel="nofollow">http://blog.robamador.com/using-animate-css-jquery-waypoints/</a>)</p>

<p>Any help will be greatly appreciated. </p>

<pre><code>&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css"&gt;

&lt;style&gt;
img {
margin:1000px 0;
display:block;

}

&lt;/style&gt;

&lt;script&gt;
//Animate from top
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));
},
{ offset: 'bottom-in-view' });
//Animate from bottom
 $('.animated').waypoint(function() {
 $(this).toggleClass($(this).data('animated'));});
 &lt;/script&gt;

&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;img class="animated" data-animated="fadeInLeft" src="http://placekitten.com/g/200/300"&gt;
&lt;img class="animated" data-animated="bounce" src="http://placekitten.com/g/200/300"&gt;
&lt;script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"&gt;   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>