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

Doloribus Dignissimos Illo

Dolores Qui

Sapiente Repellat

Minus Non Numquam Fugiat

Ward Mayert

Sophie McClure

Reina Stroman

Lizeth Legros

Repellendus Et Eos Possimus

Blanditiis Quibusdam Quia Voluptate

Sed Tenetur Blanditiis

Veritatis