Our most used Webflow hack - Seamless Pagination

Our most used Webflow hack - Seamless Pagination
Webflow introduced Pagination for Collections lists a long time ago, but the feature has never been perfected. We've created a quick post on the Webflow hack we probably use the most to give blogs and other collections list seamless pagination in our Webfow projects.

This one's gonna be super quick and easy, so let's give your Webflow collection seamless pagination.

Step 1 - Add teensy bit of code to your page

Open up the Page Settings, scroll to Custom Code and past the bit below into the Before the </body> tag section:

<!-- 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 -->

Now, in the Designer, click on the Collection List, switch to the Collections List Settings Panel on the right and paste "seamless-replace" into ID.

Publish and you now have seemless pagination.

recent projects