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

Ward Mayert

Sophie McClure

Reina Stroman

Lizeth Legros

Repellendus Et Eos Possimus

Blanditiis Quibusdam Quia Voluptate

Sed Tenetur Blanditiis

Veritatis