seamless-pagination

pjax page updates in Webflow

DemoFeedbackMore

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

Velit Id

Quia Laboriosam Nesciunt

Velit Voluptate Et Itaque

Nihil Qui

Elena Thompson

Ressie Mitchell

Leonel Ankunding

Marcia Will

Repellendus Et Eos Possimus

Blanditiis Quibusdam Quia Voluptate

Sed Tenetur Blanditiis

Veritatis