CODEWITHSUNDEEP
javascriptinfinite-scrollanimsitionjquery-infinite-scroll
Dhruba
Dhruba

Reputation: 83

Working with Animsition and Infinite Scroll js

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){

});

Upvotes: 5

Views: 783

Answers (1)

Southerneer
Southerneer

Reputation: 2012

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.

Upvotes: 0

Related Questions