Working with Animsition and Infinite Scroll js

Question

I am using infinite scroll js (with behaviour set to twitter) to load in new contents on the index page. My concern is, how do I re-initiate animistion on the new posts that are being loaded via infinite scroll? I have described in detail the page structure being followed and would appreciate it very much if anyone can kindly share a solution for the same.

<!DOCTYPE html>
 <html lang="en">
  <head></head>
  <body>
   <div class="animsition">
    <header class="header"></header>
    <main class="main">
     <section class="main-body">
      <div id="infinite-scroll">
       <article class="post">
        <div class="post-body">
         <h2 class="post-title">
          <a href="" class="nav-link" title=""></a>
         <h2>
        </div>
       </article>
      </div>
      <div class="pagination">
       <a href="" class="next">Load Older Items</a>
      </div>
     </section>
    </main>
   <footer class="footer"></footer>  
  </div>
 </body>
</html>

And here is the JS,

$(".animsition").animsition({
 inClass : 'fade-in',
 outClass : 'fade-out',
 linkElement : '.nav-link',
 overlay : false
});

$(function() {
 $("#infinite-scroll").infinitescroll({ 
  navSelector: ".pagination",
  nextSelector: ".next",
  itemSelector: ".post",
  behavior: "twitter"
 },
function(newElements){

});

score 0 · Answer 1 · edited May 23 '17 at 12:07

I was running into this same problem (animsition + infinite scroll) and couldn't find a good answer here on SO or anywhere else for that matter so I performed some minor surgery on the animsition.js source with nice results.

If you take a look at line 66 (in the current state) you'll see where animsition is binding to link clicks and inserting the animation.

$(options.linkElement).on("click." + namespace, function(event) {
  ...
}

If we instead use a little Javascript event delegation then we can effectively say "bind to all anchors/links on the page now and in the future". So something like...

$("body").on("click." + namespace, options.linkElement, function(event) {
  ...        
});

This is just a hack on my end for now but I'm going to go back later (when I'm not under the gun on a project) to do a proper fork, test, pull request, etc and try to get it into the main project. Hope this works for you and anyone else for now though.

Working with Animsition and Infinite Scroll js

1 Answers1