Load More

Load items from your Collection List on the same page.
Scroll
Scroll
Scroll
Scroll
Scroll

Use cases

Prevent long load time
Your Collection has lots of Items. Maybe these Items also have 'heavy' graphics. The page may take too long to load all items at once. The Load More component can load additional item after the initial page items have loaded.
You want to use Pagination, but don't want to load a new page
Load the new items on the same page, directly under the already loaded Collection Items. Use our pagination option for better UX.
Filter items in pagination
Use the pagination option to have Collection Items inside a pagination element. Filter results within the pagination and update the pagination UI in real time as you filter.

How to use it

Paste before </body> tag of the page you're working with.

Standard implementation

<!-- F'in sweet CMS Library for Webflow -->
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.7.js"></script>

<script>
// immediately/self invoked function. This function executes right away
(function() {
  // create a new Library instance and store it in a variable called "customBlogPosts"
  var fsMagic = new FsLibrary('.blog-posts-list')

  // run the loadmore Library component on your instance
  fsMagic.loadmore({
    button: ".load-more-button", // class of Webflow Pagination button
    resetIx: true, // adds Webflow interactions to newly loaded item
    animation: {
      enable: true,
      duration: .3,
      easing: 'ease',
      effects: 'fade'
    }
  })

})();
</script>

Copy code

Use pagination

<!-- F'in sweet CMS Library for Webflow -->
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.7.js"></script>

<script>
// immediately/self invoked function. This function executes right away
(function() {
  // create a new Library instance and store it in a variable called "customBlogPosts"
  var fsMagic = new FsLibrary('.blog-posts-list')

  // run the loadmore Library component on your instance
  fsMagic.loadmore({
    button: ".load-more-button", // class of Webflow Pagination button
    resetIx: true, // adds Webflow interactions to newly loaded items
    loadAll: true, // loads ALL items in your collection load on the page. Required for pagination
    paginate: {
      enable: true,
      itemsPerPage: 5,
      insertPagination: '.pagination-container',
      bgColor: '#FFFFFF',
      bgColorActive: '#000000',
      textColor: '#000000',
      textColorActive: '#FFFFFF',
      borderColor: '#000000'
    },
    animation: {
      enable: true,
      duration: .3,
      easing: 'ease',
      effects: 'fade'
    }
  })

})();
</script>

Copy code

Use infinite scroll

<!-- F'in sweet CMS Library for Webflow -->
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.7.js"></script>

<script>
// immediately/self invoked function. This function executes right away
(function() {
  // create a new Library instance and store it in a variable called "customBlogPosts"
  var fsMagic = new FsLibrary('.blog-posts-list')

  // run the loadmore Library component on your instance
  fsMagic.loadmore({
    button: ".load-more-button", // class of Webflow Pagination button
    resetIx: true, // adds Webflow interactions to newly loaded items
    loadAll: false, // required false for infinite scrolling
    infiniteScroll: true, // set to true to continuously load more items as you are scrolling. Default is false
    infiniteScrollPercentage: 70, // % of the total height of the collection list in view to trigger infiniteScroll
    animation: {
      enable: true,
      duration: .3,
      easing: 'ease',
      effects: 'fade'
    }
  })

})();
</script>

Copy code

Code explanation

fsMagic

The variable we created to store our Library instance. The name of the variable can be set to whatever you want.

button

The class of the load more button that loads more Collection Items. This must be the native Webflow Paginate button.

Cool: The button hides itself after there are no more items to load (NICE!).

resetIx

Resets Webflow Interactions to make sure your newly loaded items have interactions applied to them.

Set to ~true~ if you have Webflow interactions within your Load More instance. Set to ~false~ if you have no interactions on your page.

loadAll

Loads all of the items in your Collection. This can load more than 100 items in a single Dynamic List

~false~ = only load the first set of items in your pagination
~true~ = load all of the items in your pagination.

If you have no reason to set ~loadAll~ to ~true~, set to ~false~.

Tutorial for loadAll https://cmsdocs-howto.webflow.io/loadmore/example3

pagination

Option to add a pagination element to your Load More component.

Tutorial for pagination https://cmsdocs-howto.webflow.io/loadmore/example5

enable

~true~ turns pagination on, ~false~ turns pagination off (default: ~false~).

itemsPerPage

Amount of items to show inside each page of pagination.

For example, ~5~ would show 5 items in each page of pagination. ~20~ would show 20 items in each page of pagination.

itemsPerPage accepts a number (~5~).

insertPagination

Where we "insert" the pagination component on the page.

Place a div with a unique class on the page. It should be placed where you want pagination to appear. We insert, or "paste" the pagination element inside insertPagination.

insertPagination accepts a class name (~.pagination-container~).

bgColor

Applies a ~background-color~ to the pagination element.

bgColor accepts a hex value (~#FFFFFF~).

bgColorActive

Applies a ~background-color~ on the active-state of the pagination element's page item.

bgColorActive accepts a hex value (~#AAAAAA~).

textColor

Applies a ~color~ to the pagination element. This changes the color of the text.

textColor accepts a hex value (~#000000~).

textColorActive

Applies a ~color~ on the active-state of the pagination element's text.

textColor accepts a hex value (~#000000~).

borderColor

Applies a ~border-color~ to the pagination element.

borderColor accepts a hex value (~#000000~).

infiniteScroll

Continuously load more items from the Collection List as you reach the end of the list. This creates an 'infinite scrolling' effect.

~false~ = continuous infinite scrolling is turned off. User must click "Next" button to load more items
~true~ = continuous infinite scrolling is turned on. Items will load automatically for the user as they scroll

Tutorial for infiniteScroll: https://cmsdocs-howto.webflow.io/loadmore/example4

infiniteScrollPercentage

Works with infiniteScroll.

The percent height of the Collection List element scrolled so far before infiniteScroll is triggered. A smaller percentage value will load items sooner than a larger value.

Recommended to set between 60-80. Trial and error testing with your list setup is recommended.

Tutorial for infiniteScroll: https://cmsdocs-howto.webflow.io/loadmore/example4

animation

Option to add animations and transitions for items being loaded with the Load More button.

enable

~true~ turns animation on, ~false~ turns animation off (default: ~true~).

duration

Time the animation happens in seconds. ~0.2~ would be 0.2 seconds, or 200 milliseconds (default: ~0.2~).

easing

Easing of the effect. Available options are ~ease~, ~ease-in~, ~ease-out~, and ~ease-in-out~ (default: ~ease~).

effects

Add ~fade~, ~translate~, ~rotate~, and ~scale~ effects (default: ~fade~).