How to give transition effects according to viewport?
<p>I want to add <code>animation</code> and <code>transition</code> effects when the page is scrolled and the viewport becomes visible on the screen. 
I tried the below one to check whether the specific block has come into viewport but it didn't work:</p>

<p><code>js</code></p>

<pre><code>    (function($) {

  $.fn.visible = function(partial) {

      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop + $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top + $t.height(),
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;

    return ((compareBottom &lt;= viewBottom) &amp;&amp; (compareTop &gt;= viewTop));

  };

})(jQuery);

var win = $(window);

var allMods = $(".module");

allMods.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("already-visible"); 
  } 
});

win.scroll(function(event) {

  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in"); 
    } 
  });

});
</code></pre>

<p><code>Html</code></p>

<pre><code>&lt;section&gt;

  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt; 
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;
  &lt;div class="module"&gt;&lt;/div&gt;


&lt;/section&gt;
</code></pre>

<p><code>css</code></p>

<pre><code>   * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

section {
  background: #eee;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}

.module {
  width: 48%;
  min-height: 200px;
  background: white;
  position: relative;
  float: left;
  padding: 20px;
  margin-right: 4%;
  margin-bottom: 4%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.module:nth-child(even) {
  margin-right: 0;
}



.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}

.come-in:nth-child(odd) {
  animation-duration: 0.6s;
}

.already-visible {
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to {
    transform: translateY(0);
  }
}
</code></pre>

<p>Please help me with jquery to do that.</p>