seamless-pagination

pjax page updates in Webflow

Should work with any section of the page, including multiple paginated lists.

Loads next page in background and seamlessly replaces content, using: https://github.com/defunkt/jquery-pjax

Props to Mister Create's similar demo for the idea: https://forum.webflow.com/t/what-in-webflow-017-barba-js/68239

Custom code added (before /body tag).

Code

<!-- Start seamless-pagination custom code -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
  var containerSelector = '#seamless-replace';
  $(document).pjax(
    '.w-pagination-wrapper a',
    containerSelector,
    {
      container: containerSelector, 
      fragment: containerSelector,
      scrollTo: false,
      timeout: 2500,
    }
  );
  // These 3 lines should reinitialize interactions
  $(document).on('pjax:end', function() {
    Webflow.require('ix2').init();
  });
</script>

<!-- End seamless-pagination custom code -->

Demo

Autem Reprehenderit Ipsum Eius

Repudiandae Consequatur

Et Est

Elena Thompson

Ressie Mitchell

Leonel Ankunding

Marcia Will

Sunt Sit

Minus Doloremque

Voluptatem Illum Minus Ea

Nemo Voluptates